@if (item; as item) {
  <div>
    <div class="card border-0">
      <fm-thumbnail [item]="item" [edit]="item.isEditable"></fm-thumbnail>
    </div>
    <div class="card">
      <div class="card-body">
        <fm-back-button></fm-back-button>
        <h1 class="card-title">{{item.name}}</h1>
        <div class="card menu-card">
          <ul class="p-0 mt-2">
            @if (itemTypeService.hasViewer(item)) {
              <li><a href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary"><i class="fal fa-eye" aria-hidden="true" title="View"></i>&nbsp;<span i18n>View</span></a></li>
            }
            @if (item.isEditable) {
              <li><a href="#" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" title="Edit"></i> <span i18n>Edit</span></a></li>
            }
            @if (itemTypeService.isLayer(item)) {
              @if (!getItemLayer(item)) {
                <li><a href="#" (click)="handleAddAsLayer(item)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
              }
              @if (getItemLayer(item)) {
                <li ><a href="#" (click)="handleRemoveLayer(item)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
              }
            }
          </ul>
        </div>
      </div>
    </div>
  </div>
}