<div
  class="inner-scroll bg-level-1 flex-grow inner-scroll--md overflow-visible-sm overflow-visible-xs"
>
  <div class="card-block overflow-visible">
    @if (isLoading && !archives.length) {
      <c8y-loading></c8y-loading>
    }
    <c8y-list-group>
      @for (archive of archives; track archive) {
        <c8y-li-timeline [ngClass]="{ active: isActive(archive) }">
          {{ archive.created | c8yDate: 'mediumDate' }}
          {{ archive.created | c8yDate: 'shortTime' }}
          <c8y-li>
            <c8y-li-icon
              [icon]="checkIfLast(archive) ? 'flag-checkered' : 'file-zip-o'"
            ></c8y-li-icon>
            <c8y-li-body>
              <div class="d-flex a-i-start">
                <div style="min-width: 0; flex: 1">
                  <span
                    class="text-truncate-wrap"
                    title=" {{ archive.description || archive.name }}"
                  >
                    {{ archive.description || archive.name }}
                  </span>
                  @if (archive.description) {
                    <small class="text-muted">{{ archive.description }}</small>
                  }
                </div>
                @if (isLoading && toActivate(archive)) {
                  <i
                    class="icon-spin"
                    [c8yIcon]="'circle-o-notch'"
                    title="{{ 'Activating' | translate }}"
                  ></i>
                }
                @if (isActive(archive)) {
                  <span class="label label-primary m-l-auto m-t-4">{{ 'Active' | translate }}</span>
                }
              </div>
            </c8y-li-body>
            @if (hasAdminPermissions && !isLoading && !isActive(archive)) {
              <c8y-li-action
                icon="check-square-o"
                (click)="setActive(archive)"
              >
                {{ 'Set as active`archive`' | translate }}
              </c8y-li-action>
            }
            <c8y-li-action
              icon="download"
              (click)="downloadArchive(archive)"
            >
              {{ 'Download`archive`' | translate }}
            </c8y-li-action>
            @if (
              hasAdminPermissions &&
              archives.length > 1 &&
              !checkIfLast(archive) &&
              !isActive(archive)
            ) {
              <c8y-li-action
                icon="delete"
                (click)="deleteArchive(archive)"
              >
                {{ 'Delete`archive`' | translate }}
              </c8y-li-action>
            }
            @if (hasAdminPermissions && canReactivate && isActive(archive)) {
              <c8y-li-action
                icon="undo"
                (click)="reactivateArchive()"
              >
                {{ 'Reactivate archive' | translate }}
              </c8y-li-action>
            }
          </c8y-li>
        </c8y-li-timeline>
      }
    </c8y-list-group>
  </div>
</div>
@if (!isLoading && hasAdminPermissions) {
  <div class="card-footer">
    <c8y-form-group class="m-auto">
      <c8y-upload-archive
        [(application)]="application"
        (refresh)="onRefresh()"
      ></c8y-upload-archive>
    </c8y-form-group>
  </div>
}