<ng-container *ngIf="files$ | async as assets; else loading">
  <div
    class="text-center sticky-top separator-bottom bg-component"
    style="z-index: 1001"
  >
    <p
      class="m-0 p-16"
      *ngIf="assets.length"
    >
      {{ '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$ | async"
          (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 | c8yDate"
            >
              <div class="icon-flex small">
                <i
                  class="m-r-4"
                  [c8yIcon]="'calendar'"
                ></i>
                <span>{{ asset.addedAt | c8yDate }}</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="card btn-clean interact pointer"
        [ngClass]="{
          'col-md-3 col-sm-4 col-xs-12': inModalView(),
          'col-md-1 col-sm-3 col-xs-12': !inModalView()
        }"
        *ngFor="let asset of assets"
        (click)="select(asset)"
      >
        <div class="card-block">
          <ng-container [ngSwitch]="asset | staticAssetMainType">
            <div
              class="bg-checkered"
              *ngSwitchCase="'image'"
            >
              <img
                class="img-responsive m-auto img-square"
                [alt]="asset.fileName"
                [src]="asset.path"
              />
            </div>
            <div
              class="bg-checkered"
              *ngSwitchCase="'font'"
            >
              <div
                class="img-responsive m-auto img-square"
                [ngStyle]="{ 'font-family': asset.hashSum }"
              >
                <p class="fit-h text-balance text-truncate-wrap">
                  <!-- intentionally not translated -->
                  The quick brown fox jumps over the lazy dog.
                </p>
              </div>
            </div>
            <div
              class="bg-checkered"
              *ngSwitchDefault
            >
              <div class="img-responsive m-auto img-square d-flex a-i-center j-c-center">
                <i
                  class="icon-2x"
                  [c8yIcon]="'file'"
                ></i>
              </div>
            </div>
          </ng-container>
          <p
            class="text-medium text-truncate-wrap m-t-8"
            [title]="asset.fileName"
          >
            <a
              [href]="asset.path"
              download
              (click)="$event.stopPropagation()"
            >
              <i [c8yIcon]="'download'"></i>
              {{ asset.fileName }}
            </a>
          </p>
          <p class="m-b-4">
            <code class="text-10">{{ asset.type }}</code>
          </p>
          <p class="small text-muted d-flex flex-wrap a-i-center">
            {{ asset.size | bytes }}
            <span class="m-l-auto">
              <i
                class="m-r-4"
                [c8yIcon]="'calendar'"
              ></i>
              <span>{{ asset.addedAt | c8yDate }}</span>
            </span>
          </p>
        </div>
      </button>
    </div>
  </div>
</ng-container>

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