<div class="card pointer" (click)="detail()">
  <div class="card-block text-center card-column-30">
    <div class="card-appicon">
      <c8y-app-icon [name]="app.name" [contextPath]="app.contextPath"></c8y-app-icon>
    </div>
    <p title="{{ app | humanizeAppName | async }}" class="e2e-appCardName text-medium">
      {{ app | humanizeAppName | async }}
    </p>
    <small *ngIf="app.manifest?.version" class="text-muted">
      <em>{{ app.manifest.version }}</em>
    </small>
  </div>
  <div class="card-block p-t-0 p-b-0 no-min-height card-column-90">
    <div class="card-column-80">
      <div *ngIf="app.description" class="text-center-grid">
        <div class="p-b-8 card-hidden-grid"></div>
        <span>{{ app.description | translate }}</span>
        <div class="p-b-8"></div>
      </div>
    </div>
    <div class="card-column-20 text-center-grid">
      <span class="label" [ngClass]="appState.class">{{ appState.label }}</span>
    </div>
    <div class="card-column-20 text-center-grid">
      <div class="p-b-16 card-hidden-list"></div>
      <a
        *ngIf="canOpenInBrowser"
        title="{{ 'Open' | translate }}"
        class="btn btn-sm btn-default"
        [href]="getHref(app)"
        (click)="$event.stopPropagation()"
      >
        <i c8yIcon="external-link" class="m-r-4"></i>
        {{ 'Open' | translate }}
      </a>
      <div class="p-b-16 card-hidden-list"></div>
    </div>
  </div>

  <div class="card-actions m-t-0">
    <div class="dropdown" dropdown>
      <button
        title="{{ 'Settings' | translate }}"
        class="dropdown-toggle c8y-dropdown"
        dropdownToggle
        (click)="$event.stopPropagation()"
      >
        <i c8yIcon="ellipsis-v"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
        <li>
          <button title="{{ 'Edit' | translate }}" (click)="detail(); $event.stopPropagation()">
            <i c8yIcon="pencil" class="m-r-4"></i>
            {{ 'Edit' | translate }}
          </button>
        </li>
        <li *ngIf="canDelete">
          <button
            title="{{ 'Delete' | translate }}"
            href=""
            (click)="delete(); $event.stopPropagation()"
          >
            <i c8yIcon="trash" class="m-r-4"></i>
            {{ 'Delete' | translate }}
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>