<app-card padding="sm" [interactive]="true" class="asset-tile" [class.asset-tile--list]="layout() === 'list'" [class.asset-tile--selected]="selected()">
  <label class="asset-tile__select" (click)="$event.stopPropagation()">
    <app-toggle size="sm" [ngModel]="selected()" (ngModelChange)="toggleSelected.emit($event)" [ariaLabel]="asset().filename" />
  </label>

  <button type="button" class="asset-tile__surface" (click)="open.emit()" [attr.aria-label]="asset().filename">
    @if (isImage()) {
      <img class="asset-tile__preview" [src]="asset().thumbnailUrl || asset().url" [alt]="asset().altText?.['en'] || ''" loading="lazy" />
    } @else {
      <div class="asset-tile__preview asset-tile__preview--file">{{ asset().mimeType }}</div>
    }

    <div class="asset-tile__meta">
      <span class="asset-tile__filename">{{ asset().filename }}</span>
      <span class="asset-tile__sub">
        {{ formatSize(asset().size) }}
        @if (dimensionsLabel()) { · {{ dimensionsLabel() }} }
      </span>
      <div class="asset-tile__badges">
        @if (isUnused()) {
          <app-badge variant="neutral">{{ 'mediaLibrary.unused' | translate }}</app-badge>
        }
        @if (missingAlt() && isImage()) {
          <app-badge variant="warning">{{ 'mediaLibrary.missingAlt' | translate }}</app-badge>
        }
        @if (usageCount(); as count) {
          <app-badge variant="info">{{ count }} {{ 'mediaLibrary.usageCount' | translate }}</app-badge>
        }
      </div>
    </div>
  </button>

  <div class="asset-tile__actions">
    <app-button variant="ghost" size="sm" (click)="remove.emit()">{{ 'mediaLibrary.delete' | translate }}</app-button>
  </div>
</app-card>
