<div class="inner-scroll split-view__list">
  <div class="card-header separator sticky-top bg-component">
    <div class="card-title" translate>Versions</div>
  </div>

  <div class="bg-level-1 flex-grow">
    <div class="p-16" *ngIf="isLoading">
      <c8y-loading></c8y-loading>
    </div>
    <ul class="nav c8y-nav-stacked" *ngIf="!isLoading">
      <li
        class="c8y-stacked-item p-t-0 p-b-0 p-r-4"
        [ngClass]="{ active: selectedVersion === applicationVersion.version }"
        *ngFor="let applicationVersion of sortedVersions"
      >
        <div
          class="flex-grow d-flex a-i-center gap-4 p-t-8 p-b-8"
          (click)="selectVersion(applicationVersion.version)"
        >
          <i c8yIcon="big-parcel" class="icon-20"></i>
          <span class="text-label-small">
            {{ 'Version' | translate }}
          </span>
          <span class="text-medium">{{ applicationVersion.version }}</span>
          <div class="text-truncate d-flex j-c-end flex-grow gap-4 flex-wrap m-l-auto">
            <span *ngFor="let tag of applicationVersion.tags" class="label label-info">
              {{ tag }}
            </span>
          </div>
        </div>
        <div class="dropdown" dropdown *ngIf="hasAdminPermissions && isPackageOwnedByCurrentTenant">
          <button
            class="dropdown-toggle c8y-dropdown"
            type="button"
            title="{{ 'Settings' | translate }}"
            dropdownToggle
          >
            <i c8yIcon="ellipsis-v"></i>
          </button>
          <ul *dropdownMenu class="dropdown-menu dropdown-menu-right">
            <li>
              <button
                type="button"
                title="{{ 'Set as latest`version`' | translate }}"
                (click)="setVersionAsLatest(applicationVersion)"
                [disabled]="applicationVersion.tags?.includes('latest')"
              >
                <i c8yIcon="collect" class="m-r-4"></i>
                {{ 'Set as latest`version`' | translate }}
              </button>
            </li>
            <li>
              <button
                type="button"
                title="{{ 'Download' | translate }}"
                (click)="downloadArchive(applicationVersion)"
              >
                <i c8yIcon="download" class="m-r-4"></i>
                {{ 'Download' | translate }}
              </button>
            </li>
            <li>
              <button
                type="button"
                title="{{ 'Delete' | translate }}"
                (click)="removeVersionPackage(applicationVersion.version)"
                [disabled]="applicationVersion.tags?.includes('latest')"
              >
                <i c8yIcon="trash" class="m-r-4"></i>
                {{ 'Delete' | translate }}
              </button>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

  <div
    class="card-footer separator sticky-bottom"
    *ngIf="!isLoading && isPackageOwnedByCurrentTenant"
  >
    <div class="form-group m-b-0">
      <label translate>Upload a new version</label>
      <c8y-upload-archive
        [(application)]="package"
        [uploadNewVersion]="true"
        (refresh)="packageVersionUploaded()"
        [preUploadCallback]="preUploadCallback"
      ></c8y-upload-archive>
    </div>
  </div>
</div>