<c8y-modal
  [title]="modalTitle"
  (onDismiss)="cancel()"
  [headerClasses]="'dialog-header'"
  [labels]="{ cancel: 'Cancel' }"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'select-all'"></span>
  </ng-container>
  <ng-container *ngIf="files$ | async as assets; else loading">
    <div class="text-center sticky-top separator-bottom bg-component" style="z-index: 1001;">
      <p *ngIf="assets.length" class="m-0 p-16">
        {{ 'Select from the list below or`first part, followed by upload a new asset`' | translate }}
        <button
          class="btn-link"
          aria-controls="collapseUpload"
          [attr.aria-expanded]="isExpanded"
          (click)="isExpanded = !isExpanded"
        >
          {{ 'upload a new asset' | translate }}
        </button>
      </p>
      <div
        class="collapse"
        id="collapseUpload"
        [isAnimated]="true"
        [collapse]="!isExpanded"
      >
        <div class="p-t-24 p-l-24 p-r-24 bg-level-1 separator-top-bottom p-b-32">
          <c8y-drop-area
            class="drop-area-sm m-b-8"
            [icon]="'upload'"
            [accept]="accept"
            (dropped)="addFiles($event)"
          ></c8y-drop-area>
          <c8y-messages
            [helpMessage]="
              'After uploading, the asset will be visible in the list below.' | translate
            "
          ></c8y-messages>
        </div>
      </div>
    </div>
    <div *ngIf="assets.length">
      <c8y-list-group
        class="m-b-0"
        *ngIf="layout != 'grid'"
      >
        <c8y-list-item *ngFor="let asset of assets">
          <c8y-list-item-icon icon="file"></c8y-list-item-icon>

          <c8y-list-item-body>
            <div class="row">
              <div class="col-md-3 col-xs-12 d-flex a-i-center">
                <div
                  class="text-truncate"
                  title="{{ asset.fileName }}"
                >
                  {{ asset.fileName }}
                </div>
                <button
                  class="btn-dot m-l-4"
                  [title]="'Preview' | translate"
                  [popover]="preview"
                  placement="end"
                  triggers="focus"
                  container="body"
                  [adaptivePosition]="false"
                >
                  <i c8yIcon="eye"></i>
                </button>
                <ng-template #preview>
                  <div class="bg-checkered">
                    <img
                      class="fit-w"
                      [alt]="asset.fileName"
                      [src]="asset.path"
                    />
                  </div>
                </ng-template>
              </div>
              <div class="col-md-3 col-xs-12 text-muted">
                <code class="text-10">{{ asset.type }}</code>
              </div>
              <div class="col-md-2 col-xs-12 text-muted">
                <span class="small">{{ asset.size | bytes }}</span>
              </div>
              <div
                class="col-md-2 col-xs-12 text-muted"
                [title]="asset.addedAt | date"
              >
                <div class="icon-flex small">
                  <i
                    class="m-r-4"
                    c8yIcon="calendar"
                  ></i>
                  <span>{{ asset.addedAt | date }}</span>
                </div>
              </div>
              <div class="col-md-2 col-xs-12 d-flex">
                <button
                  class="btn btn-default btn-sm m-l-auto showOnHover"
                  (click)="select(asset)"
                  translate
                >
                  Select
                </button>
              </div>
            </div>
          </c8y-list-item-body>
        </c8y-list-item>
      </c8y-list-group>
      <div
        class="card-group-block interact-grid"
        *ngIf="layout === 'grid'"
      >
        <button
          class="col-md-3 col-sm-4 col-xs-12 card btn-clean interact pointer"
          *ngFor="let asset of assets"
          (click)="select(asset)"
        >
          <div class="card-block">
            <div class="bg-checkered">
              <img
                class="img-responsive m-auto img-square"
                [alt]="asset.fileName"
                [src]="asset.path"
              />
            </div>
            <p
              class="text-medium text-truncate-wrap m-t-8"
              title="{{ asset.fileName }}"
            >
              {{ asset.fileName }}
            </p>
            <p class="m-b-4">
              <code class="text-10">{{ asset.type }}</code>
            </p>
            <p class="small text-muted d-flex a-i-center">
              {{ asset.size | bytes }}
              <span class="m-l-auto">
                <i
                  class="m-r-4"
                  c8yIcon="calendar"
                ></i>
                <span>{{ asset.addedAt | date }}</span>
              </span>
            </p>
          </div>
        </button>
      </div>
    </div>
  </ng-container>

  <ng-template #loading>
    <div class="p-24">
      <c8y-loading></c8y-loading>
    </div>
  </ng-template>
</c8y-modal>