<ion-header>
  <ion-toolbar class="header-toolbar">
    <nav-buttons></nav-buttons>
    <ion-title color="light">{{'general, addAttach' | translate}}</ion-title>

    <ion-buttons slot="primary">
      <ion-button style="background: none !important;" (click)="closeBtnModal()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-card>
    <ion-card-header class="boxHdr">
      <ion-grid no-padding>

        <ion-row style="width: 100%;" nowrap align-items-center>
          <ion-col size="10">
            <div class="hrTitle">{{'general, addAttach' | translate}}</div>
          </ion-col>
          <ion-col size="2">
            <div class="fileDiv"> <input end class="inputfile" type="file" ng2FileSelect [uploader]="uploader"
                (change)="onFileSelected($event)" />
              <label end for="file">
                <ion-icon style="font-size: 30px;" name="add"></ion-icon>
              </label></div>
          </ion-col>
        </ion-row>

      </ion-grid>
      <!-- <div class="fileDiv"> <input end class="inputfile" type="file" ng2FileSelect [uploader]="uploader"
          (change)="onFileSelected($event)" />
        <label end for="file">
          <ion-icon name="add"></ion-icon>
        </label></div> -->
    </ion-card-header>
    <ion-card-content>
      <ion-grid class=" gridAH" *ngIf="uploader?.queue?.length > 0">
        <ion-row class="rowAH titleH" align-items-center>
          <ion-col size="4">
            <label class="Header" for="">{{'addAttach, name' | translate}}</label>
          </ion-col>
          <ion-col size="4">
            <label class="Header" for="">{{'addAttach, size' | translate}}</label>
          </ion-col>
          <ion-col size="4">
            <label class="Header" for="">{{'addAttach, remove' | translate}}</label>
          </ion-col>
        </ion-row>
        <ion-row class="rowAH" *ngFor="let item of uploader.queue">
          <ion-col size="4">
            <label for="">{{ item?.file?.name }}</label>
          </ion-col>
          <ion-col size="4">
            <label *ngIf="uploader.options.isHTML5">{{ item?.file?.size/1024/1024 | number:'.2' }} MB</label>
          </ion-col>
          <ion-col size="4">
            <button class="iconButton" ion-button (click)="removeFile(item)"> <img class="imgSize"
                src="../assets/imgs/deletegray.png"></button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

</ion-content>

<ion-footer>
  <div class="centerDiv">
    <ion-button class="footer-button" color="customnavy" ion-button (click)="OkBtnModal()">
      {{'general, ok' | translate}}</ion-button>
  </div>
</ion-footer>