<div class="transferpage">
  <div class="innertransferpage main-content-global">
    <div class="header">
      <label>{{ selectedHeader | translate}}</label>
      <div class="options">
        <div class="search" (click)="showFilter()">
          <span [sharedSimpleTooltip]="'hintText.search' | translate">
            <img alt="Filter" width='16' height='16' class="filter-img" [images]="{'normal':'assets/images/Search.svg','hover':'assets/images/Search_Blue_new.svg'}"
              hoverimagechange src="assets/images/Search.svg" type="image/svg+xml" />
          </span>
        </div>
        <div class="refresh" [sharedSimpleTooltip]="('hintText.refresh'|translate)">
          <img alt="Refresh" (click)="refresh()" src="assets/images/Refresh.svg">
        </div>
      </div>
    </div>
    <div class="pagination ">
      <app-shared-pagination [componentConf]="paginationConf"></app-shared-pagination>
    </div>
    <table class="bx--data-table-v2" aria-label="Transfers List" role="region">
      <thead>
        <tr>
          <th *ngFor="let objhead of keyListTemp" class='{{ objhead.width }}'>{{ objhead.display | translate}}</th>
          <th>{{ 'Process Number' | translate }}</th>
          <th>{{ 'Transfer Detail' | translate }}</th>
          <th class="width-2"></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let transfer of selectedDisplayList | filter : searchConf?.searchText : headerListSearch; let i=index;" (dblclick)="showTransferDetails(transfer, i )">
          <td (click)="showTransferDetails(transfer, i )" *ngFor="let objBody of keyListTemp" [ngClass]="{'errorRow':(selectedFilter==='all'&&transfer.status==='HE'),'high':transfer.highlight}">
            <div *ngIf="objBody.key==='statusText'">
              <div *ngIf="transfer.status==='EX'" class="icon_success">
                <div *ngIf="transfer.statusText >= 1" id="myProgress">
                  <div id="myBar" [style.width]="(transfer.sentBytesLong/transfer.sourceFileSize)*100+'%'"></div>
                </div>
                <span> {{ transfer[objBody.key]}}
                  <span *ngIf="transfer.statusText >= 1">%</span>
                </span>
              </div>
              <div *ngIf="transfer.status!=='EX'" [ngClass]="{'icon_error':(transfer.status==='HE')}">
                <img *ngIf="selFil==='all'" alt="" [src]="transfer.img"/>
                <span [ngClass]="{'error':selectedFilter==='error'}"> {{ transfer[objBody.key]}}</span>
              </div>
            </div>
            <div *ngIf="objBody.key!=='statusText'">
              <div class="incoutImage" *ngIf="transfer.status==='EX'&& transfer.HDTP && objBody.key==='secondaryNode'">
                <img alt="PNode" src="assets/images/arrow_inwards_icon.svg" *ngIf="transfer.HDTP==='P'">
                <img alt="Snode" src="assets/images/arrow_outwards_icon.svg" *ngIf="transfer.HDTP==='S'">
              </div>
              <div *ngIf="objBody.key==='scheduledTime'||objBody.key==='logTime'">{{ transfer[objBody.key]| dateFormatPipe : 'MMM dd, yyyy hh:mm a'}}</div>
              <div class="incoutImage" *ngIf="objBody.key!=='scheduledTime'&&objBody.key!=='logTime'">
                <div [ngClass]="{ 'transfer-name': (objBody.key==='processName')}">{{ transfer[objBody.key]}}</div>
                <div class="processNumber" *ngIf="objBody.key==='processName'">{{ transfer.processNumber}}</div> 
              </div>
            </div>
          </td>
          <td class="bx--table-overflow" [ngClass]="{'errorRow':(selectedFilter==='all'&&transfer.status==='HE'),'high':transfer.highlight}">
              <div *ngIf="permissionObj.authorizedToChangeProcess!=='No' || permissionObj.authorizedToDeleteProcess!=='No'">
                  <app-custom-menu *ngIf="((transfer.queue==='EXEC' || transfer.queue==='exec') && transfer.status !== 'PE') || transfer.status==='EX'" [data]="{ item : transfer, index : i }" [componentConf]="executionOverFlowMenuConf"></app-custom-menu>
                  <app-custom-menu *ngIf="(transfer.queue==='WAIT')  || transfer.status==='PE' || transfer.status==='WC' || transfer.status==='RE' || transfer.status==='WR' || transfer.status==='WS' || transfer.status==='WA'"
                    [data]="{ item : transfer, index : i }" [componentConf]="waitscheduleOverFlowMenuConf"></app-custom-menu>
                  <app-custom-menu *ngIf="transfer.status==='RA' || transfer.status==='RH' || transfer.status==='HC' || transfer.status==='HR' || transfer.status==='HO' || transfer.status==='HI'"
                    [data]="{ item : transfer, index : i }" [componentConf]="heldOverFlowMenuConf"></app-custom-menu>
                  <app-custom-menu *ngIf="transfer.status==='HE' || transfer.status==='PR'" [data]="{ item : transfer, index : i }" [componentConf]="errorOverFlowMenuConf"></app-custom-menu>
                  <app-custom-menu *ngIf="transfer.status==='HS'" [data]="{ item : transfer, index : i }" [componentConf]="suspendedOverFlowMenuConf"></app-custom-menu>
              </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div *ngIf="showMoreRecordNotification" class="bx--row">
      <p class="morrecordTxt">
        <a>{{ 'listTransfer.forMoreRecordsGotoAdvancePage' | translate }}</a>
      </p>
    </div>
    <div *ngIf="listlength === 0" class="emptyTranferList">
      <img alt="Image Not Available" src="assets/images/notransfer_graphic.svg">
      <div class="emptyList">{{ 'listTransfer.emptyList' | translate }}</div>
    </div>
  </div>
</div>
<div data-modal class="bx--modal detail-delete-confirm" tabindex="-1">
  <app-shared-modal [componentConf]="deleteConfirmationTab"></app-shared-modal>
</div>
<div data-modal id="modal--danger" class="bx--modal bx--modal--danger transfer-search-filter" tabindex="-1">
  <app-transfer-search-form [componentConf]="queryConf"></app-transfer-search-form>
</div>