<h2>{{ 'settings.chanedit.title' | translate }}</h2>
<div class="block card w-full" style="height: 90vh" *ngIf="(chansLoaded && transDone >= numTranslations) else loading">
    <p-table [value]="allChannels" scrollHeight="flex" [scrollable]="true"
        styleClass="p-datatable-sm p-datatable-striped" [rowHover]="true" (onFilter)="onFilter($event)"
        responsiveLayout="scroll" [sortField]="sortField" [sortOrder]="sortOrder"  (onSort)="onSort($event)">
        <ng-template pTemplate="caption">
            <button pButton pRipple label="{{ 'settings.chanedit.new_channel' | translate }}" icon="pi pi-plus"
                class="p-button-success mr-2" (click)="openNew()"
                [disabled]="setupService.pageType == 'S' && setupService.schedulingEnabled"></button>
            <p-button icon="pi pi-trash" (onClick)="deleteSourceRequest()" *ngIf="setupService.pageType == 'S' "
                pTooltip="{{ 'settings.chanedit.delete_source' | translate }}" tooltipPosition="top"
                label="{{ 'common.delete' | translate }}" styleClass="p-button-danger"
                [disabled]="setupService.schedulingEnabled" class="p-2">
            </p-button>
            <p-button icon="pi pi-history" (onClick)="restoreDataRequest()"
                pTooltip="{{ 'settings.chanedit.res_tooltip' | translate }}" tooltipPosition="top"
                label="{{ 'settings.chanedit.res_title' | translate }}" styleClass="p-button-success" class="p-2"
                [disabled]="videoSources.length == 0">
            </p-button>
            <p-button icon="pi pi-download" pTooltip="{{ 'settings.chanedit.icondld_tooltip' | translate }}"
                tooltipPosition="top" (onClick)="downloadIconsRequest()"
                label="{{ 'settings.chanedit.icondld_title' | translate }}" styleClass="p-button-success" class="p-2"
                [disabled]="videoSources.length == 0">
            </p-button>
            <div *ngIf="setupService.pageType != 'S' " class="p-2">
                {{ 'settings.chanedit.delete_message' | translate }}
            </div>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th style="width:  8%">{{ 'settings.chanedit.col_icon' | translate }}</th>
                <th style="width:  8%" pSortableColumn="ChanSeq">
                    {{ 'settings.chanedit.col_channum' | translate }} <p-sortIcon field="ChanSeq"></p-sortIcon></th>
                <th style="width:  6%">{{ 'settings.chanedit.col_freqid' | translate }}</th>
                <th style="width:  10%">{{ 'settings.chanedit.col_callsign' | translate }}</th>
                <th style="width:  23%">{{ 'settings.chanedit.col_name' | translate }}</th>
                <th style="width:  16%" pSortableColumn="Source">
                    {{ 'settings.chanedit.col_source' | translate }} <p-sortIcon field="Source"></p-sortIcon>
                </th>
                <th style="width:  6%">{{ 'settings.chanedit.col_priority' | translate }}</th>
                <th style="width:  10%">{{ 'settings.chanedit.col_visibility' | translate }}</th>
                <th style="width:  6%">{{ 'settings.chanedit.col_useeit' | translate }}</th>
                <th style="width:  6%">{{ 'settings.chanedit.col_commfree' | translate }}</th>
                <th style="width:  7%; white-space: nowrap;">
                    <!-- These are disabled buttons to ensure the spacing of the heading
                         matches the spacing of the rows -->
                    <button pButton pRipple icon="pi pi-pencil" class="p-button-text" disabled="true"></button>
                    <button pButton pRipple icon="pi pi-trash" class="p-button-text p-button-danger"
                        *ngIf="setupService.pageType == 'S'" disabled="true"></button>
                </th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th><p-columnFilter type="text" field="CallSign"></p-columnFilter></th>
                <th><p-columnFilter type="text" field="ChannelName"></p-columnFilter></th>
                <th>
                    <p-columnFilter field="Source" matchMode="equals" [showMenu]="false">
                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                            <p-dropdown [ngModel]="value" [options]="sourceNames" name="filter"
                                (onChange)="filter($event.value)"
                                placeholder="{{ 'settings.chanedit.all' | translate }}" [showClear]="true"
                                appendTo="body">
                                <ng-template let-option pTemplate="item">
                                    {{option}}
                                </ng-template>
                            </p-dropdown>
                        </ng-template>
                    </p-columnFilter>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-channel>
            <tr [ngClass]="{'line-through' : channel.ChanId < 0}">
                <td class="pt-1 pb-0">
                    <img src="{{'./Guide/GetChannelIcon?Filename=' + channel.Icon + authorization}}" height="32" width="42"
                        *ngIf="channel.Icon; else nullIcon" style="background-color:#000000" onerror="this.height='0'">
                    <ng-template #nullIcon><img height="32" width="42"></ng-template>
                </td>
                <td>{{ channel.ChanNum }}</td>
                <td>{{ channel.FrequencyId }}</td>
                <td>{{ channel.CallSign }}</td>
                <td>{{ channel.ChannelName }}</td>
                <td>{{ channel.Source }}</td>
                <td>{{ channel.RecPriority }}</td>
                <td>{{ getVisibility(channel) }}</td>
                <td>
                    <i *ngIf="channel.UseEIT;else eit" class="pi pi-circle-fill"></i>
                    <ng-template #eit><i class="pi pi-circle"></i></ng-template>
                </td>
                 <td>
                    <i *ngIf="channel.CommMethod == COMM_DETECT_COMMFREE;else commer" class="pi pi-circle-fill"></i>
                    <ng-template #commer><i class="pi pi-circle"></i></ng-template>
                 </td>
                <td class="pt-1 pb-0" style="white-space: nowrap;">
                    <button pButton pRipple icon="pi pi-pencil" class="p-button-text" (click)="editChannel(channel)"
                        [disabled]="channel.ChanId < 0
                        || (setupService.pageType == 'S' && setupService.schedulingEnabled)"
                        pTooltip="{{ 'settings.chanedit.editchan' | translate }}" tooltipPosition="left"></button>
                    <button pButton pRipple icon="pi pi-trash" class="p-button-text p-button-danger"
                        *ngIf="setupService.pageType == 'S'" (click)="deleteRequest(channel)"
                        pTooltip="{{ 'settings.chanedit.deletechan' | translate }}" tooltipPosition="left"
                        [disabled]="channel.ChanId < 0 || setupService.schedulingEnabled"></button>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>
<ng-template #loading>
    <p-progressSpinner></p-progressSpinner>
</ng-template>

<form class="ml-3 mr-3" name="chanform" #chanform="ngForm">

    <p-dialog header="{{ dialogHeader }}" [(visible)]="displayChannelDlg" [modal]="true"
        [style]="{height: '75vw', width: '50vw'}" [closable]="false" [closeOnEscape]="false">

        <div class="form-group field">
            <label for="ChannelName" class="label block">{{ 'settings.chanedit.channame' | translate }}</label>
            <input pInputText id="ChannelName" [(ngModel)]="channel.ChannelName" name="ChannelName"
                #ChannelName="ngModel" class="mb-2 form-control w-full" />
            <small class="block">
                {{ 'settings.chanedit.channame_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="ChanNum" class="label block">{{ 'settings.chanedit.channum' | translate }}</label>
            <input pInputText id="ChanNum" [(ngModel)]="channel.ChanNum" name="ChanNum" #ChanNum="ngModel"
                class="mb-2 form-control w-full" />
            <small class="block">
                {{ 'settings.chanedit.channum_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="FrequencyId" class="label block">{{ 'settings.chanedit.freqid' | translate }}</label>
            <input pInputText id="FrequencyId" [(ngModel)]="channel.FrequencyId" name="FrequencyId"
                #FrequencyId="ngModel" class="mb-2 form-control w-full" />
            <small class="block">
                {{ 'settings.chanedit.freqid_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="CallSign" class="label block">{{ 'settings.chanedit.callsign' | translate }}</label>
            <input pInputText id="CallSign" [(ngModel)]="channel.CallSign" name="CallSign" #CallSign="ngModel"
                class="mb-2 form-control w-full" />
            <small class="block">
                {{ 'settings.chanedit.callsign_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="icon" class="label block">{{ 'settings.chanedit.icon_label' | translate
                }}</label>
            <p-dropdown [options]="icons" [(ngModel)]="channel.Icon" name="icon" appendTo="body">
                <ng-template pTemplate="selectedItem">
                    <div *ngIf="channel.Icon">
                        <img *ngIf="!channel.Icon.endsWith('\t')"
                            src="{{'./Guide/GetChannelIcon?Filename=' + channel.Icon + authorization }}"
                            class="vertical-align-middle h-2rem" />
                        &nbsp;&nbsp;{{channel.Icon}}
                    </div>
                </ng-template>
                <ng-template let-icon pTemplate="item">
                    <div>
                        <!-- Name ending with tab character is code for "no icon". -->
                        <img *ngIf="!icon.endsWith('\t')" src="{{'./Guide/GetChannelIcon?Filename=' + icon + authorization }}"
                            class="vertical-align-middle h-2rem" />
                        &nbsp;&nbsp;{{icon}}
                    </div>
                </ng-template>
            </p-dropdown>
            <small class="block">
                <div [innerHTML]="'settings.chanedit.icon_desc' |
                 translate: {iconDir: '<code>&quot;' + iconDir + '&quot;</code>'} "> </div>
            </small>
        </div>

        <div class="form-group field">
            <p-button icon="pi pi-search" (onClick)="searchIconRequest();"
                label="{{ 'settings.chanedit.iconsrch_title' | translate }}" styleClass="p-button-success"></p-button>
            <small class="block">
                {{ 'settings.chanedit.iconsearch_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="ExtendedVisible" class="label block">{{ 'settings.chanedit.visible_label' | translate
                }}</label>
            <p-dropdown [options]="visibilities" [(ngModel)]="channel.ExtendedVisible" [editable]="false"
                optionLabel="prompt" optionValue="value" [maxlength]="0" [style]="{'minWidth':'400px'}"
                name="ExtendedVisible" #ExtendedVisible="ngModel" appendTo="body">
            </p-dropdown>
            <small class="block">
                {{ 'settings.chanedit.visible_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="SourceId" class="label block">{{ 'settings.chanedit.source_label' | translate
                }}</label>
            <p-dropdown [options]="videoSources" [(ngModel)]="channel.SourceId" [editable]="false"
                optionLabel="SourceName" optionValue="Id" [maxlength]="0" [style]="{'minWidth':'400px'}" name="SourceId"
                #SourceId="ngModel" appendTo="body">
            </p-dropdown>
            <small class="block">
                {{ 'settings.chanedit.source_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="Format" class="label block">{{ 'settings.chanedit.format_label' | translate
                }}</label>
            <p-dropdown [options]="tvFormats" [(ngModel)]="channel.Format" [editable]="false" optionLabel="prompt"
                optionValue="value" [maxlength]="0" [style]="{'minWidth':'400px'}" name="Format" #Format="ngModel"
                appendTo="body">
            </p-dropdown>
            <small class="block">
                {{ 'settings.chanedit.format_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="RecPriority" class="label block">{{ 'settings.chanedit.priority_label' | translate
                }}</label>
            <p-inputNumber [(ngModel)]="channel.RecPriority" name="RecPriority" id="RecPriority" [showButtons]="true"
                [min]="-99" [max]="99" [step]="1"></p-inputNumber>
            <small class="block">
                {{ 'settings.chanedit.priority_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <p-checkbox inputId="UseEIT" [(ngModel)]="channel.UseEIT" name="UseEIT" #UseEIT="ngModel"
                class="label mb-2 w-full" [binary]="true" label="{{ 'settings.chanedit.eit_label' | translate }}">
            </p-checkbox>
            <small class="block">
                {{ 'settings.chanedit.eit_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="XMLTVID" class="label block">{{ 'settings.chanedit.xmltvid_label' | translate }}</label>
            <input pInputText id="XMLTVID" [(ngModel)]="channel.XMLTVID" name="XMLTVID" #XMLTVID="ngModel"
                class="mb-2 form-control w-full" />
            <small class="block">
                {{ 'settings.chanedit.xmltvid_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="TimeOffset" class="label block">{{ 'settings.chanedit.timeoffset_label' | translate
                }}</label>
            <p-inputNumber [(ngModel)]="channel.TimeOffset" name="TimeOffset" id="TimeOffset" [showButtons]="true"
                [min]="-1440" [max]="1440" [step]="30"></p-inputNumber>
            <small class="block">
                {{ 'settings.chanedit.timeoffset_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="CommMethod" class="label block">{{ 'settings.chanedit.commmethod_label' | translate
                }}</label>
            <p-dropdown [options]="commMethods" [(ngModel)]="channel.CommMethod" [editable]="false"
                optionLabel="LocalizedName" optionValue="CommMethod" [maxlength]="0" [style]="{'minWidth':'400px'}"
                name="CommMethod" #CommMethod="ngModel" appendTo="body">
            </p-dropdown>
            <small class="block">
                {{ 'settings.chanedit.commmethod_desc' | translate }}
            </small>
        </div>

        <!-- Advanced Settings Panel -->
        <p-accordion>
            <p-accordionTab header="{{ 'settings.chanedit_advanced' | translate }}" [(selected)]="selectedAdvanced">
                <div class="form-group field">
                    <label for="MplexId" class="label block">{{ 'settings.chanedit.mplex_label' | translate
                        }}</label>
                    <p-dropdown [options]="multiplexes" [(ngModel)]="channel.MplexId" [editable]="false"
                        optionLabel="Description" optionValue="MplexId" [maxlength]="0" [style]="{'minWidth':'400px'}"
                        name="MplexId" #MplexId="ngModel" appendTo="body">
                    </p-dropdown>
                    <small class="block">
                        {{ 'settings.chanedit.mplex_desc' | translate }}
                    </small>
                </div>

                <div class="form-group field">
                    <label for="ServiceId" class="label block">{{ 'settings.chanedit.serviceid_label' | translate
                        }}</label>
                    <p-inputNumber [(ngModel)]="channel.ServiceId" name="ServiceId" id="ServiceId" [showButtons]="true"
                        [min]="-1" [max]="65535" [step]="1"></p-inputNumber>
                    <small class="block">
                        {{ 'settings.chanedit.serviceid_desc' | translate }}
                    </small>
                </div>
            </p-accordionTab>
        </p-accordion>

        <ng-template pTemplate="footer">
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="successCount > 0 && errorCount == 0 && !chanform.dirty" severity="success"
                    text="{{ 'common.savesuccess' | translate }}"></p-message>
                <p-message *ngIf="errorCount > 0" severity="error"
                    text="{{ 'common.networkfail' | translate }}"></p-message>
            </div>
            <p-button icon="pi pi-times-circle" (onClick)="closeDialog()" label="{{ 'common.close' | translate }}"
                styleClass="p-button-warning">
            </p-button>
            <p-button icon="pi pi-save" (onClick)="saveChannel();" label="{{ 'common.save' | translate }}"
                styleClass="p-button-success" [disabled]="!chanform.dirty || channel.ChannelName.trim() == ''
                 || channel.ChanNum.trim() == '' || channel.CallSign.trim() == ''"></p-button>
        </ng-template>
    </p-dialog>

    <p-dialog header="{{ 'common.unsaved_heading' | translate }}" [(visible)]="displayUnsaved" [modal]="true">
        <p>{{ 'common.unsaved_message' | translate }}</p>
        <ng-template pTemplate="footer">
            <p-button icon="pi pi-times-circle" (onClick)="closeDialog()" label="{{ 'common.nosave' | translate }}"
                styleClass="p-button-danger">
            </p-button>
            <p-button icon="pi pi-check-circle" (onClick)="displayUnsaved=false"
                label="{{ 'common.continue' | translate }}" styleClass="p-button-success">
            </p-button>
        </ng-template>
    </p-dialog>

    <p-dialog header="{{ 'settings.chanedit.delete_this' | translate }}" [(visible)]="displayDelete" [modal]="true"
        [draggable]="false" [resizable]="false">
        <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
        <p>{{ 'settings.chanedit.delete_details' |
            translate: {ChanNum: channel.ChanNum,
            ChannelName: channel.ChannelName,
            Source: getSource(channel)} }}</p>
        <ng-template pTemplate="footer">
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="errorCount > 0" severity="error"
                    text="{{ 'common.networkfail' | translate }}"></p-message>
            </div>
            <p-button icon="pi pi-times-circle" (onClick)="displayDelete=false; chanform.form.markAsPristine();"
                label="{{ 'common.close' | translate }}" styleClass="p-button-warning">
            </p-button>
            <p-button icon="pi pi-check-circle" (onClick)="deleteChannel(channel)"
                label="{{ 'common.delete' | translate }}" styleClass="p-button-danger"></p-button>
        </ng-template>
    </p-dialog>

    <p-dialog header="{{ 'settings.chanedit.delete_source' | translate }}" [(visible)]="displayDeleteSource"
        [modal]="true" [draggable]="false" [resizable]="false">
        <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
        <p *ngIf="filterEvent.filters.Source.value else all"><b>{{ 'settings.chanedit.delete_source_details' |
                translate: {
                Source: filterEvent.filters.Source.value} }}</b></p>
        <ng-template #all>
            <p><b>{{ 'settings.chanedit.delete_all_details' | translate }}</b></p>
        </ng-template>
        <div *ngIf="channel.ChanId != 0">
            <p> {{ 'common.delete' | translate }} {{channel.ChanNum}} {{channel.ChannelName}}</p>
        </div>
        <ng-template pTemplate="footer">
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="errorCount > 0" severity="error"
                    text="{{ 'common.networkfail' | translate }}"></p-message>
            </div>
            <p-button icon="pi pi-times-circle"
                (onClick)="displayDeleteSource=false; channelOperation = -1; chanform.form.markAsPristine();"
                label="{{ 'common.cancel' | translate }}" styleClass="p-button-warning">
            </p-button>
            <p-button icon="pi pi-check-circle" (onClick)="deleteSource()" [disabled]="working"
                label="{{ 'common.delete' | translate }}" styleClass="p-button-danger"></p-button>
        </ng-template>
    </p-dialog>

    <p-dialog header="{{ 'settings.chanedit.res_title' | translate }}" [(visible)]="resShowDialog" [modal]="true"
        [closable]="false" [closeOnEscape]="false">
        <div class="form-group field">
            <label for="resSourceId" class="label block">{{ 'settings.chanedit.source_label' | translate
                }}</label>
            <p-dropdown [options]="resSources" [(ngModel)]="resSourceId" [editable]="false" optionLabel="SourceName"
                optionValue="Id" [maxlength]="0" [style]="{'minWidth':'400px'}" name="resSourceId" appendTo="body">
            </p-dropdown>
            <small class="block">
                {{ 'settings.chanedit.res_source_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <p-checkbox inputId="resXMLTV" [(ngModel)]="resXMLTV" name="resXMLTV" class="label mb-2 w-full"
                [binary]="true" label="{{ 'settings.chanedit.res_xmltv_label' | translate }}">
            </p-checkbox>
            <small class="block">
                {{ 'settings.chanedit.res_xmltv_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <p-checkbox inputId="resVisible" [(ngModel)]="resVisible" name="resVisible" class="label mb-2 w-full"
                [binary]="true" label="{{ 'settings.chanedit.res_visible_label' | translate }}">
            </p-checkbox>
            <small class="block">
                {{ 'settings.chanedit.res_visible_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <p-checkbox inputId="resIcon" [(ngModel)]="resIcon" name="resIcon" class="label mb-2 w-full" [binary]="true"
                label="{{ 'settings.chanedit.res_icon_label' | translate }}">
            </p-checkbox>
            <small class="block">
                {{ 'settings.chanedit.res_icon_desc' | translate }}
            </small>
        </div>

        <ng-template pTemplate="footer">
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="resSearchDone && !chanform.dirty" severity="info" text="{{ 'settings.chanedit.restore_details' |
                    translate: {NumChannels: resResult.NumChannels,
                     NumXLMTVID: resResult.NumXLMTVID,
                     NumVisible: resResult.NumVisible,
                     NumIcon: resResult.NumIcon} }}">
                </p-message>
            </div>
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="successCount > 0 && errorCount == 0 && !chanform.dirty" severity="success"
                    text="{{ 'common.savesuccess' | translate }}"></p-message>
            </div>
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="errorCount > 0" severity="error"
                    text="{{ 'common.networkfail' | translate }}"></p-message>
            </div>
            <p-button icon="pi pi-times-circle" (onClick)="closeDialog()" label="{{ 'common.close' | translate }}"
                styleClass="p-button-warning">
            </p-button>

            <p-button icon="pi pi-search" (onClick)="restoreSearch();" label="{{ 'common.search' | translate }}"
                styleClass="p-button-success"
                [disabled]="!resSourceId || (!resXMLTV && !resIcon && !resVisible)"></p-button>

            <p-button icon="pi pi-save" (onClick)="restoreSave();" label="{{ 'common.save' | translate }}"
                styleClass="p-button-success"
                [disabled]="!resSearchDone || !resResult.NumChannels || !chanform.pristine"></p-button>

        </ng-template>
    </p-dialog>

    <p-dialog header="{{ 'settings.chanedit.icondld_title' | translate }}" [(visible)]="icondldShowDialog"
        [modal]="true" [closable]="false" [closeOnEscape]="false">

        <div class="field-radiobutton">
            <p-radioButton name="dldtype" value="all" [(ngModel)]="icondldType" inputId="dldAll"
                [disabled]="icondldStatus > 0"></p-radioButton>
            <label for="dldAll" class="label block">{{ 'settings.chanedit.iconall_title' | translate }}</label>
        </div>
        <div class="field-radiobutton">
            <p-radioButton name="dldtype" value="missing" [(ngModel)]="icondldType" inputId="dldMissing"
                [disabled]="icondldStatus > 0"></p-radioButton>
            <label for="dldMissing" class="label block">{{ 'settings.chanedit.iconmissing_title' | translate }}</label>
        </div>

        <ng-template pTemplate="footer">
            <div class="col-12" style="text-align: left;" *ngIf="icondldStatus > 0">
                {{ 'settings.chanedit.icondld_details' |
                translate: {Count: icondldCount,
                Max: icondldMax} }}
                <table>
                    <tr>
                        <td>
                            {{ 'settings.chanedit.icondld_found' | translate }}
                        </td>
                        <td>{{icondldFound}}</td>
                    </tr>
                    <tr>
                        <td>
                            {{ 'settings.chanedit.icondld_success' | translate }}
                        </td>
                        <td>{{successCount}}</td>
                    </tr>
                    <tr>
                        <td>
                            {{ 'settings.chanedit.icondld_failed' | translate }}
                        </td>
                        <td>{{errorCount}}</td>
                    </tr>
                </table>
            </div>
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="icondldStatus == 2" severity="success"
                    text="{{ 'settings.chanedit.icondld_complete' | translate }}"></p-message>
            </div>
            <p-button icon="pi pi-times-circle" (onClick)="closeDialog()" label="{{ 'common.close' | translate }}"
                styleClass="p-button-warning" [disabled]="icondldStatus == 1">
            </p-button>

            <p-button icon="pi pi-play" (onClick)="startIcondld();" label="{{ 'common.start' | translate }}"
                styleClass="p-button-success"
                [disabled]="!icondldType || icondldStatus == 1 || icondldStatus == 2"></p-button>

            <p-button icon="pi pi-stop" (onClick)="stopIcondld();" label="{{ 'common.stop' | translate }}"
                styleClass="p-button-danger" [disabled]="!icondldType || icondldStatus != 1"></p-button>
        </ng-template>
    </p-dialog>

    <p-dialog header="{{ 'settings.chanedit.iconsrch_title' | translate }}" [(visible)]="iconsrchShowDialog"
        [style]="{height: '65vw', width: '40vw'}" [modal]="true" [closable]="false" [closeOnEscape]="false">
        <div class="form-group field">
            <label for="iconsrchTerm" class="label block">{{ 'settings.chanedit.iconsrchterm_title' | translate
                }}</label>
            <input pInputText id="iconsrchTerm" [(ngModel)]="iconsrchTerm" name="iconsrchTerm" #srchTerm="ngModel"
                class="mb-2 form-control w-full" />
            <small class="block">
                {{ 'settings.chanedit.iconsrchterm_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <p-button icon="pi pi-search" (onClick)="iconSearch();" label="{{ 'common.search' | translate }}"
                styleClass="p-button-success"></p-button>
        </div>

        <div class="form-group field">
            <label *ngIf="iconsrchResult.length > 0" for="srchicon" class="label block">{{
                'settings.chanedit.iconsrch_select' | translate }}</label>
            <label *ngIf="iconsrchResult.length == 0 && (successCount>0 || errorCount>0)" for="srchicon"
                class="label block">{{'primeng.emptyMessage' | translate}}</label>
            <p-listbox [options]="iconsrchResult" [(ngModel)]="iconsrchSelect" name="srchicon" optionlabel="name"
                [listStyle]="{'max-height':'18rem'}">
                <ng-template let-icon pTemplate="item">
                    <div>
                        <img src="{{icon.url}}" class="vertical-align-middle h-2rem" />
                        &nbsp;&nbsp;{{icon.name}}
                    </div>
                </ng-template>
            </p-listbox>
        </div>

        <ng-template pTemplate="footer">
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="errorCount > 0" severity="error" text="Icon Download Failed"></p-message>
            </div>
            <p-button icon="pi pi-times-circle" (onClick)="iconsrchShowDialog=false"
                label="{{ 'common.cancel' | translate }}" styleClass="p-button-warning">
            </p-button>
            <p-button icon="pi pi-save" (onClick)="iconsrchSave();" label="{{ 'common.save' | translate }}"
                styleClass="p-button-success" [disabled]="!iconsrchSelect"></p-button>
        </ng-template>
    </p-dialog>

</form>