<div class="card pointer card--d-col">
  <div (click)="detail()" class="card-block text-center card-column-40">
    <div class="card-appicon">
      <c8y-app-icon
        *ngIf="!isPackage && !isFeature && !isMicroservice && !isExternal"
        [app]="app"
        [contextPath]="app.contextPath"
        [name]="app.name"
      ></c8y-app-icon>
      <i *ngIf="isPackage" c8yIcon="big-parcel"></i>
      <i *ngIf="isFeature" c8yIcon="tab"></i>
      <i *ngIf="isMicroservice" c8yIcon="microchip"></i>
      <i *ngIf="isExternal" c8yIcon="globe1"></i>
    </div>
    <p class="e2e-appCardName text-medium" title="{{ app | humanizeAppName | async }}">
      {{ app | humanizeAppName | async }}
    </p>
    <small *ngIf="app.manifest?.version && (isPackage || isMicroservice)" class="text-muted">
      <em>{{ app.manifest.version }}</em>
    </small>
  </div>
  <div (click)="detail()" class="card-block p-0 no-min-height card--d-col card-column-80 flex-grow">
    <div class="card-block no-min-height p-t-0 p-b-0 card-column-80">
      <div *ngIf="app.description" class="text-center-grid">
        <div class="p-b-8 card-hidden-grid"></div>
        <p class="small l-h-tight p-b-8 p-l-0 p-r-0">{{ app.description | translate }}</p>
      </div>
    </div>
    <div class="card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid">
      <span [ngClass]="appState.class" class="label">{{ appState.label | translate }}</span>
    </div>
    <div class="card-footer no-min-height p-t-0 p-b-0 card-column-20 text-center-grid">
      <div class="p-b-16 card-hidden-list"></div>
      <button
        (click)="openApp(); $event.stopPropagation()"
        *ngIf="canOpenInBrowser"
        [disabled]="disableOpenInBrowser"
        class="btn btn-xs btn-default"
        [title]="openButtonTitle | translate"
      >
        <i c8yIcon="external-link" class="m-r-4"></i>
        {{ 'Open' | translate }}
      </button>
      <div class="p-b-32 card-hidden-list"></div>
    </div>
  </div>

  <div *ngIf="canEdit || canOpenInBrowser || canDelete" class="card-actions m-t-0">
    <div class="dropdown" dropdown>
      <button
        class="dropdown-toggle c8y-dropdown"
        dropdownToggle
        title="{{ 'Settings' | translate }}"
      >
        <i c8yIcon="ellipsis-v"></i>
      </button>
      <ul *dropdownMenu class="dropdown-menu dropdown-menu-right">
        <li *ngIf="canEdit">
          <button (click)="detail()" title="{{ 'Edit' | translate }}">
            <i c8yIcon="pencil" class="m-r-4"></i>
            {{ 'Edit' | translate }}
          </button>
        </li>
        <ng-container *c8yIfAllowed="['ROLE_APPLICATION_MANAGEMENT_ADMIN']">
          <li>
            <button
              (click)="delete()"
              href=""
              title="{{ canDelete ? 'Delete' : (CANNOT_DELETE_HINT | translate) }}"
              [disabled]="!canDelete"
            >
              <i c8yIcon="trash" class="m-r-4"></i>
              {{ 'Delete' | translate }}
            </button>
          </li>
          <li *ngIf="canClone">
            <button
              (click)="clone()"
              href=""
              [title]="'Clone application' | translate"
            >
              <i c8yIcon="copy" class="m-r-4"></i>
              {{ 'Clone application' | translate }}
            </button>
          </li>
        </ng-container>
      </ul>
    </div>
  </div>
</div>