<app-dialog [open]="!!asset()" [titleText]="'mediaLibrary.detailsTitle' | translate" size="lg" (closed)="close.emit()">
  @if (asset(); as item) {
    <div class="asset-details">
      <div class="asset-details__preview">
        @if (isImage()) {
          <img [src]="item.url" [alt]="item.altText?.['en'] || ''" />
        } @else {
          <div class="asset-details__file">{{ item.mimeType }}</div>
        }
      </div>

      <div class="asset-details__facts">
        <dl>
          <dt>{{ 'mediaLibrary.filename' | translate }}</dt>
          <dd>{{ item.filename }}</dd>
          <dt>{{ 'mediaLibrary.format' | translate }}</dt>
          <dd>{{ item.mimeType }}</dd>
          <dt>{{ 'mediaLibrary.fileSize' | translate }}</dt>
          <dd>{{ formatSize(item.size) }}</dd>
          <dt>{{ 'mediaLibrary.dimensions' | translate }}</dt>
          <dd>{{ dimensionsLabel() || ('mediaLibrary.unknownValue' | translate) }}</dd>
          <dt>{{ 'mediaLibrary.uploadDate' | translate }}</dt>
          <dd>{{ formatDate(item.createdAt) }}</dd>
          <dt>{{ 'mediaLibrary.lastUsed' | translate }}</dt>
          <dd>{{ 'mediaLibrary.unknownValue' | translate }}</dd>
          <dt>{{ 'mediaLibrary.usageCountLabel' | translate }}</dt>
          <dd>{{ usages().length }}</dd>
        </dl>
      </div>

      <div class="asset-details__usage">
        <h4>{{ 'mediaLibrary.usedIn' | translate }}</h4>
        @if (usages().length === 0) {
          <p class="asset-details__hint">{{ 'mediaLibrary.notUsed' | translate }}</p>
        } @else {
          <ul>
            @for (usage of usages(); track usage.detail) {
              <li><app-badge variant="info">{{ usage.labelKey | translate }}</app-badge> <span>{{ usage.detail }}</span></li>
            }
          </ul>
        }
      </div>

      <div class="asset-details__edit">
        @if (isImage()) {
          <app-form-field [label]="'mediaLibrary.altText' | translate" [hint]="'mediaLibrary.altTextHelp' | translate">
            <app-input [ngModel]="item.altText?.['en'] || ''" (ngModelChange)="onAltChange($event)" [disabled]="!!item.decorative" />
          </app-form-field>
          <label class="toggle-row">
            <app-toggle [ngModel]="!!item.decorative" (ngModelChange)="onDecorativeChange($event)" [ariaLabel]="'mediaLibrary.decorative' | translate" />
            <span>{{ 'mediaLibrary.decorative' | translate }}</span>
          </label>
          @if (!item.decorative && !item.altText?.['en']) {
            <p class="asset-details__warning">{{ 'mediaLibrary.missingAltWarning' | translate }}</p>
          }
        }
        <app-form-field [label]="'mediaLibrary.caption' | translate">
          <app-input [ngModel]="item.caption || ''" (ngModelChange)="onCaptionChange($event)" />
        </app-form-field>
        <app-form-field [label]="'mediaLibrary.description' | translate">
          <app-input [ngModel]="item.description || ''" (ngModelChange)="onDescriptionChange($event)" />
        </app-form-field>
      </div>

      <div class="asset-details__actions">
        <app-button variant="danger" size="sm" (click)="remove.emit()">{{ 'mediaLibrary.delete' | translate }}</app-button>
        <app-button variant="secondary" size="sm" (click)="close.emit()">{{ 'mediaLibrary.cancel' | translate }}</app-button>
      </div>
    </div>
  }
</app-dialog>
