<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    path="#applications"
    label="{{ 'Own applications' | translate }}"
    icon="c8y-modules"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<c8y-ui-action-bar-set>
  <c8y-refresh-btn></c8y-refresh-btn>
</c8y-ui-action-bar-set>

<div class="row">
  <div class="col-sm-8">
    <div class="c8y-empty-state text-center" ng-show="vm.archives.length === 0">
      <h1 c8y-icon="archive"></h1>
      <h3 translate>Archives listing is currently not supported for this application.</h3>
    </div>

    <ul class="timeline-list">
      <li
        class="timeline-list-item d-flex"
        ng-repeat="archive in vm.archives | orderBy:'-created'"
        ng-class="{ active: vm.isActive(archive) }"
      >
        <small class="timeline-item-date text-right">
          <strong ng-bind="archive.created |  absoluteDateTimeFormat:'D MMM YYYY'"></strong>
          <br />
          <span class="text-muted" ng-bind="archive.created | absoluteTime"></span>
        </small>
        <div class="timeline-item-content d-flex">
          <div class="list-item-icon">
            <i c8y-icon="{{ $last ? 'flag-checkered' : 'file-zip-o' }}"></i>
          </div>
          <div class="list-item-body">
            <span class="text-truncate">
              <span ng-bind="archive.name"></span>
              <small class="text-muted" ng-bind="archive.length | bytes"></small>
            </span>
            <small class="text-muted" ng-bind="archive.description"></small>
          </div>

          <i
            c8y-icon="circle-o-notch"
            class="icon-spin"
            title="{{ 'Activating' | translate }}"
            ng-if="vm.requestInProgress && vm.toActivate(archive)"
          ></i>

          <div
            class="list-item-actions"
            ng-if="!vm.requestInProgress"
            data-active="{{ 'Active`archive`' | translate }}"
          >
            <div class="dropdown clearfix" ng-if="!vm.isActiveArchive(archive)" uib-dropdown>
              <button
                title="{{ 'Actions' | translate }}"
                type="button"
                class="dropdown-toggle c8y-dropdown"
                aria-haspopup="true"
                uib-dropdown-toggle
              >
                <i c8y-icon="ellipsis-v"></i>
              </button>
              <ul
                class="dropdown-menu dropdown-menu-right"
                aria-labelledby="dropdownMenu1"
                uib-dropdown-menu
              >
                <li>
                  <button
                    title="{{ 'Set as active`archive`' | translate }}"
                    type="button"
                    ng-click="vm.setActive(archive)"
                    ng-disabled="vm.requestInProgress || refreshLoading"
                  >
                    <i c8y-icon="check-square-o"></i>
                    {{ 'Set as active`archive`' | translate }}
                  </button>
                </li>
                <li ng-if="!$last">
                  <button
                    title="{{ 'Remove' | translate }}"
                    type="button"
                    ng-click="vm.deleteArchive(archive)"
                    ng-disabled="vm.requestInProgress || refreshLoading"
                  >
                    <i c8y-icon="times"></i>
                    {{ 'Remove' | translate }}
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="col-sm-4">
    <c8y-if-allowed any-role="['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_CREATE', 'ROLE_BINARY_ADMIN', 'ROLE_BINARY_CREATE']">
      <file-picker
        files="vm.appArchives"
        multiple="false"
        required="true"
        data-disabled="vm.requestInProgress || refreshLoading"
        display-drop-zone="true"
        drop-zone-label="'Upload archive' | translate"
        processing-status="vm.uploadStatus"
        on-file-selected="vm.uploadArchive()"
      ></file-picker>
    </c8y-if-allowed>
  </div>
</div>
