@if (item(); as item) {
  <article class="inventory-detail" aria-label="Gegenstandsdetails">
    <div class="inventory-detail__header">
      <img class="inventory-detail__icon" [src]="item.item.iconPath" [alt]="item.item.name" />
      <div>
        <h2 class="inventory-detail__name" data-detail-name>{{ item.item.name }}</h2>
        <p class="inventory-detail__rarity" data-detail-rarity>{{ rarityLabel() }}</p>
        @if (slotLabel(); as slot) {
          <p class="inventory-detail__meta">{{ slot }}</p>
        }
      </div>
    </div>

    @if (statRows().length) {
      <dl class="inventory-detail__stats" data-detail-stats>
        @for (row of statRows(); track row.label) {
          <div class="inventory-detail__stat">
            <dt>{{ row.label }}</dt>
            <dd>
              {{ row.value }}
              @if (row.diff !== null && row.diff !== 0) {
                <span
                  class="inventory-detail__diff"
                  [class.inventory-detail__diff--positive]="row.diff > 0"
                  [class.inventory-detail__diff--negative]="row.diff < 0"
                >
                  ({{ row.diff > 0 ? '+' : '' }}{{ row.diff }})
                </span>
              }
            </dd>
          </div>
        }
      </dl>
    }

    <div class="inventory-detail__actions">
      @if (item.equipped) {
        <span class="inventory-detail__equipped" data-detail-equipped>Ausgerüstet</span>
      } @else if (!isEquippable()) {
        <span class="inventory-detail__note">Nicht ausrüstbar</span>
      } @else {
        <button
          type="button"
          class="inventory-detail__equip"
          data-detail-equip
          [disabled]="busy()"
          (click)="onEquip()"
        >
          Ausrüsten
        </button>
      }
    </div>
  </article>
} @else {
  <p class="inventory-detail__empty" data-detail-empty>Wähle einen Gegenstand aus deinem Inventar.</p>
}