<section class="hs-application hs-application--holodock hd-shell {{#unless canEdit}}hd-readonly{{/unless}} {{#if selectedProfile}}hd-condition-{{selectedProfile.dashboard.condition.level}}{{/if}}">
  <div class="hs-background" aria-hidden="true"></div>
  <div class="hs-frame" aria-hidden="true">
    <img class="hs-frame-piece hs-frame-piece--default hs-frame-corner hs-frame-corner--top-left" src="modules/holodock/assets/frame/hs-frame-corner--top-left.svg?v=4" alt="">
    <img class="hs-frame-piece hs-frame-piece--default hs-frame-corner hs-frame-corner--top-right" src="modules/holodock/assets/frame/hs-frame-corner--top-right.svg?v=4" alt="">
    <img class="hs-frame-piece hs-frame-piece--default hs-frame-corner hs-frame-corner--bottom-left" src="modules/holodock/assets/frame/hs-frame-corner--bottom-left.svg?v=4" alt="">
    <img class="hs-frame-piece hs-frame-piece--default hs-frame-corner hs-frame-corner--bottom-right" src="modules/holodock/assets/frame/hs-frame-corner--bottom-right.svg?v=4" alt="">
    <img class="hs-frame-piece hs-frame-piece--default hs-frame-edge hs-frame-edge--left" src="modules/holodock/assets/frame/hs-frame-edge--left.svg?v=4" alt="">
    <img class="hs-frame-piece hs-frame-piece--default hs-frame-edge hs-frame-edge--right" src="modules/holodock/assets/frame/hs-frame-edge--right.svg?v=4" alt="">
    <img class="hs-frame-piece hs-frame-piece--default hs-frame-header" src="modules/holodock/assets/frame/hs-frame-header.svg?v=1" alt="">
    <img class="hs-frame-piece hs-frame-piece--space-police hs-frame-corner hs-frame-corner--top-left" src="modules/holodock/assets/frame/hs-frame-corner--top-left--space-police.svg?v=1" alt="">
    <img class="hs-frame-piece hs-frame-piece--space-police hs-frame-corner hs-frame-corner--top-right" src="modules/holodock/assets/frame/hs-frame-corner--top-right--space-police.svg?v=1" alt="">
    <img class="hs-frame-piece hs-frame-piece--space-police hs-frame-corner hs-frame-corner--bottom-left" src="modules/holodock/assets/frame/hs-frame-corner--bottom-left--space-police.svg?v=1" alt="">
    <img class="hs-frame-piece hs-frame-piece--space-police hs-frame-corner hs-frame-corner--bottom-right" src="modules/holodock/assets/frame/hs-frame-corner--bottom-right--space-police.svg?v=1" alt="">
    <img class="hs-frame-piece hs-frame-piece--space-police hs-frame-edge hs-frame-edge--left" src="modules/holodock/assets/frame/hs-frame-edge--left--space-police.svg?v=1" alt="">
    <img class="hs-frame-piece hs-frame-piece--space-police hs-frame-edge hs-frame-edge--right" src="modules/holodock/assets/frame/hs-frame-edge--right--space-police.svg?v=1" alt="">
    <img class="hs-frame-piece hs-frame-piece--space-police hs-frame-header" src="modules/holodock/assets/frame/hs-frame-header--space-police.svg?v=1" alt="">
  </div>
  <div class="hs-content">
  <header class="hd-topbar">
    <div>
      <p class="hd-kicker">HoloDock</p>
      <h2>Ship Operations</h2>
    </div>
    <div class="hd-profile-picker">
      <label>
        <span>Ship Profile</span>
        <select data-hd-profile-select {{#unless hasProfiles}}disabled{{/unless}}>
          {{#each profiles as |profile|}}
            <option value="{{profile.id}}" {{#if profile.isSelected}}selected{{/if}}>{{profile.name}}</option>
          {{/each}}
        </select>
      </label>
      {{#if canEdit}}
        <button type="button" class="hd-icon-action" data-hd-action="create-profile" title="New ship profile"><i class="fa-solid fa-plus"></i></button>
        {{#if selectedProfile}}
          <button type="button" class="hd-icon-action" data-hd-action="profile-permissions" title="Player rights"><i class="fa-solid fa-user-shield"></i></button>
          <button type="button" class="hd-icon-action" data-hd-action="delete-profile" title="Delete profile"><i class="fa-solid fa-trash"></i></button>
        {{/if}}
      {{/if}}
    </div>
  </header>

  {{#if selectedProfile}}
    <div class="hd-ops-layout">
      <aside class="hd-ship-inspector" aria-label="Ship information">
        {{#if canEdit}}
          <details class="hd-setup-panel">
            <summary>
              <span><i class="fa-solid fa-gear"></i> Ship Setup</span>
              <small>{{hdFallback selectedProfile.shipClass "Unclassified vessel"}}</small>
            </summary>
            <form data-hd-profile-form class="hd-inspector-form">
              <label>
                <span>Ship Name</span>
                <input type="text" name="name" value="{{selectedProfile.name}}">
              </label>
              <label>
                <span>Class / Type</span>
                <input type="text" name="shipClass" value="{{selectedProfile.shipClass}}" placeholder="Unclassified vessel">
              </label>
              <label>
                <span>Image Path</span>
                <span class="hd-image-field">
                  <input type="text" name="image" value="{{selectedProfile.image}}" placeholder="modules/holodock/assets/SpaceshipDefault.webp">
                  <button type="button" data-hd-action="browse-image" title="Choose ship image"><i class="fa-solid fa-folder-open"></i></button>
                </span>
              </label>
              <label>
                <span>Power Capacity</span>
                <input type="number" name="powerCapacity" value="{{selectedProfile.powerCapacity}}" min="0" step="1" placeholder="0 for untracked">
              </label>
              <button type="submit" class="hd-primary-action"><i class="fa-solid fa-floppy-disk"></i> Save Ship</button>
            </form>
          </details>
        {{else}}
          <div class="hd-inspector-readout">
            <p class="hd-kicker">Active Vessel</p>
            <h3>{{selectedProfile.name}}</h3>
            <span>{{hdFallback selectedProfile.shipClass "Unclassified vessel"}}</span>
          </div>
        {{/if}}

        <section class="hd-inspector-section hd-ship-vitals">
          <div class="hd-section-heading">
            <div>
              <p class="hd-kicker">Operations</p>
            </div>
            {{#if canEdit}}
              <button type="button" data-hd-action="create-stat" title="Add statistic"><i class="fa-solid fa-plus"></i></button>
            {{/if}}
          </div>

          <div class="hd-vital-grid {{#if selectedProfile.dashboard.hasAlerts}}has-alerts{{/if}}">
            {{#each selectedProfile.dashboard.tiles as |tile|}}
              <button type="button" class="hd-vital-card {{tile.stateClass}} {{#if tile.page}}is-clickable{{/if}} {{#if tile.isActive}}is-active{{/if}}" {{#if tile.page}}data-hd-page="{{tile.page}}"{{/if}}>
                <i class="fa-solid {{tile.icon}}"></i>
                <span>{{tile.label}}</span>
                <strong>{{tile.value}}</strong>
                <small>{{tile.note}}</small>
              </button>
            {{/each}}
          </div>

          {{#if selectedProfile.hasAdditionalStats}}
            <div class="hd-inspector-stats">
              {{#each selectedProfile.additionalStats as |stat|}}
                <article class="hd-inspector-stat">
                  <span>{{stat.label}}</span>
                  <strong>{{stat.value}}</strong>
                  {{#if stat.note}}<small>{{stat.note}}</small>{{/if}}
                  {{#if ../canEdit}}
                    <div class="hd-compact-actions">
                      <button type="button" data-hd-edit-stat="{{stat.id}}" title="Edit statistic"><i class="fa-solid fa-pen-to-square"></i></button>
                      <button type="button" data-hd-delete-stat="{{stat.id}}" title="Delete statistic"><i class="fa-solid fa-trash"></i></button>
                    </div>
                  {{/if}}
                </article>
              {{/each}}
            </div>
          {{else}}
            <p class="hd-muted">No additional ship stats configured.</p>
          {{/if}}
        </section>
      </aside>

      <main class="hd-command-deck">
        <svg class="hd-link-layer" data-hd-link-lines aria-hidden="true"></svg>

        <section class="hd-command-header">
          <div>
            <p class="hd-kicker">Active Vessel</p>
            <h1>{{selectedProfile.name}}</h1>
            <span>{{hdFallback selectedProfile.shipClass "Unclassified vessel"}}</span>
          </div>
          <div class="hd-condition-badge {{selectedProfile.dashboard.condition.level}}">
            <i class="fa-solid {{selectedProfile.dashboard.condition.icon}}"></i>
            <span>{{selectedProfile.dashboard.condition.label}}</span>
            <small>{{selectedProfile.dashboard.condition.note}}</small>
          </div>
          {{#unless isOverview}}
            <button type="button" class="hd-overview-return" data-hd-page="overview"><i class="fa-solid fa-arrow-left"></i> Overview</button>
          {{/unless}}
        </section>

        {{#if isOverview}}
          <section class="hd-page hd-overview-page">
            <div class="hd-hero-ship">
              <div class="hd-ship-image-wrap" data-hd-ship-map>
                <img src="{{selectedProfile.image}}" alt="{{selectedProfile.name}}" onerror="this.src='modules/holodock/assets/SpaceshipDefault.webp'">
                {{#each selectedProfile.slots as |slot|}}
                  {{#if slot.hasAnchor}}
                    <button type="button" class="hd-anchor-pin {{slot.pinStateClass}} {{#if slot.isSelectedEquipment}}is-selected{{/if}}" data-hd-anchor-slot="{{slot.id}}" data-hd-anchor-state="{{slot.pinStateClass}}" data-hd-anchor-x="{{slot.anchorX}}" data-hd-anchor-y="{{slot.anchorY}}" title="{{slot.label}}">
                      <span class="sr-only">{{slot.label}}</span>
                    </button>
                  {{/if}}
                {{/each}}
              </div>
            </div>
          </section>
        {{/if}}

        {{#if isSystems}}
          <section class="hd-page hd-systems-page">
            {{#if selectedProfile.dashboard.hasSystems}}
              <div class="hd-systems-table">
                {{#each selectedProfile.dashboard.systems as |system|}}
                  <article class="hd-system-row {{system.stateClass}}">
                    <img src="{{system.itemImg}}" alt="">
                    <div>
                      <strong>{{system.itemName}}</strong>
                      <small>{{system.slotLabel}} | {{system.category}}</small>
                    </div>
                    {{#if system.powerEnabled}}<span>{{system.powerAllocationText}}</span>{{/if}}
                    {{#if system.durabilityEnabled}}<span>{{system.durabilityText}}</span>{{/if}}
                    <em><i class="fa-solid {{system.icon}}"></i>{{system.state}}</em>
                  </article>
                {{/each}}
              </div>
            {{else}}
              <p class="hd-muted">No installed ship systems yet.</p>
            {{/if}}
          </section>
        {{/if}}

        {{#if isEquipment}}
          <section class="hd-page hd-equipment-page">
            {{#if selectedProfile.hasSelectedEquipment}}
              <article class="hd-equipment-editor">
                <header>
                  <img src="{{selectedProfile.selectedEquipmentSlot.item.img}}" alt="">
                  <div>
                    <p class="hd-kicker">{{selectedProfile.selectedEquipmentSlot.category}}</p>
                    <h3>{{selectedProfile.selectedEquipmentSlot.item.name}}</h3>
                  </div>
                </header>

                {{#if selectedProfile.selectedEquipmentSlot.item.description}}
                  <div class="hd-item-description">{{{selectedProfile.selectedEquipmentSlot.item.description}}}</div>
                {{/if}}

                <div class="hd-editor-grid">
                  {{#if selectedProfile.selectedEquipmentSlot.item.equipment.durability.enabled}}
                    <section title="A player needs to be a Trusted Player for activation to impact durability.">
                      <span>Durability</span>
                      <strong>{{selectedProfile.selectedEquipmentSlot.item.equipment.durability.value}} / {{selectedProfile.selectedEquipmentSlot.item.equipment.durability.max}}</strong>
                      <small>{{selectedProfile.selectedEquipmentSlot.item.equipment.durability.state}}</small>
                    </section>
                  {{/if}}
                  {{#if selectedProfile.selectedEquipmentSlot.item.equipment.power.enabled}}
                    <section>
                      <span>Power Allocation</span>
                      <strong>{{selectedProfile.selectedEquipmentSlot.item.equipment.power.allocationText}}</strong>
                      <small>{{selectedProfile.selectedEquipmentSlot.item.equipment.power.state}}</small>
                      <div class="hd-power-meter" aria-hidden="true">
                        <span style="width: {{selectedProfile.selectedEquipmentSlot.item.equipment.power.allocationPercent}}%"></span>
                      </div>
                    </section>
                  {{/if}}
                  {{#if selectedProfile.selectedEquipmentSlot.item.equipment.activation.enabled}}
                    <section>
                      <span>Activation</span>
                      <strong>{{selectedProfile.selectedEquipmentSlot.item.equipment.activation.label}}</strong>
                      <small>{{hdFallback selectedProfile.selectedEquipmentSlot.item.equipment.activation.blockedReason "Ready"}}</small>
                      {{#if selectedProfile.selectedEquipmentSlot.item.equipment.activation.resourceCost}}<small>Cost: {{selectedProfile.selectedEquipmentSlot.item.equipment.activation.resourceCost}}</small>{{/if}}
                      {{#if selectedProfile.selectedEquipmentSlot.item.equipment.activation.durabilityCost}}<small>Durability cost: {{selectedProfile.selectedEquipmentSlot.item.equipment.activation.durabilityCost}}</small>{{/if}}
                      {{#if selectedProfile.selectedEquipmentSlot.item.equipment.activation.cooldown}}<small>Cooldown: {{selectedProfile.selectedEquipmentSlot.item.equipment.activation.cooldown}} rounds</small>{{/if}}
                      {{#if selectedProfile.selectedEquipmentSlot.item.equipment.activation.cooldownText}}<small>{{selectedProfile.selectedEquipmentSlot.item.equipment.activation.cooldownText}}</small>{{/if}}
                    </section>
                  {{/if}}
                </div>

                <footer class="hd-equipment-actions">
                  {{#if canActivateSystems}}
                  {{#if selectedProfile.selectedEquipmentSlot.item.equipment.activation.enabled}}
                    <section class="hd-action-group hd-action-primary">
                      <span>Activation</span>
                      <button type="button" class="hd-primary-action {{#if selectedProfile.selectedEquipmentSlot.item.equipment.activation.isBlocked}}is-blocked{{/if}}" data-hd-activate-equipment="{{selectedProfile.selectedEquipmentSlot.id}}" {{#if selectedProfile.selectedEquipmentSlot.item.equipment.activation.isBlocked}}disabled{{/if}}>
                        <i class="fa-solid fa-bolt"></i>
                        {{selectedProfile.selectedEquipmentSlot.item.equipment.activation.label}}
                      </button>
                    </section>
                  {{/if}}
                  {{/if}}
                  {{#if canEdit}}
                    {{#if selectedProfile.selectedEquipmentSlot.item.equipment.power.enabled}}
                      <section class="hd-action-group">
                        <span>Power</span>
                        <label class="hd-inline-field">
                          <small>Allocated</small>
                          <input class="hd-direct-input" type="number" min="0" step="1" value="{{selectedProfile.selectedEquipmentSlot.item.equipment.power.allocated}}" data-hd-power-allocation="{{selectedProfile.selectedEquipmentSlot.id}}" title="Power allocation">
                        </label>
                        {{#if selectedProfile.selectedEquipmentSlot.item.equipment.power.isOffline}}
                          <button type="button" data-hd-power-toggle="{{selectedProfile.selectedEquipmentSlot.id}}" data-hd-power-online="true"><i class="fa-solid fa-power-off"></i> Online</button>
                        {{else}}
                          <button type="button" data-hd-power-toggle="{{selectedProfile.selectedEquipmentSlot.id}}" data-hd-power-online="false"><i class="fa-solid fa-power-off"></i> Offline</button>
                        {{/if}}
                      </section>
                    {{/if}}
                    {{#if selectedProfile.selectedEquipmentSlot.item.equipment.durability.enabled}}
                      <section class="hd-action-group">
                        <span>Integrity</span>
                        <label class="hd-inline-field" title="A player needs to be a Trusted Player for activation to impact durability.">
                          <small>Current of {{selectedProfile.selectedEquipmentSlot.item.equipment.durability.max}}</small>
                          <input class="hd-direct-input" type="number" min="0" max="{{selectedProfile.selectedEquipmentSlot.item.equipment.durability.max}}" step="1" value="{{selectedProfile.selectedEquipmentSlot.item.equipment.durability.value}}" data-hd-durability-value="{{selectedProfile.selectedEquipmentSlot.id}}" title="A player needs to be a Trusted Player for activation to impact durability.">
                        </label>
                      </section>
                    {{/if}}
                    <section class="hd-action-group hd-action-secondary">
                      <span>Sheet</span>
                      <div class="hd-button-row">
                        <button type="button" data-hd-open-item="{{selectedProfile.selectedEquipmentSlot.id}}"><i class="fa-solid fa-up-right-from-square"></i> Open</button>
                        <button type="button" data-hd-remove-item="{{selectedProfile.selectedEquipmentSlot.id}}"><i class="fa-solid fa-xmark"></i> Remove</button>
                      </div>
                    </section>
                  {{/if}}
                </footer>
              </article>
            {{else}}
              <p class="hd-muted">Select installed equipment from the right rail.</p>
            {{/if}}
          </section>
        {{/if}}

        {{#if isPower}}
          <section class="hd-page hd-power-page">
            <div class="hd-reactor-node">
              <i class="fa-solid fa-atom"></i>
              <span>Reactor</span>
              <strong>{{selectedProfile.powerGrid.reactorLabel}}</strong>
            </div>

            {{#if selectedProfile.powerGrid.hasNodes}}
              <div class="hd-power-grid">
                {{#each selectedProfile.powerGrid.nodes as |node|}}
                  <article class="hd-power-node {{#if node.isOffline}}is-offline{{/if}} {{#if node.isNoPower}}is-no-power{{/if}} {{#if node.isUnderpowered}}is-low-power{{/if}}">
                    <span>{{node.category}}</span>
                    <strong>{{node.itemName}}</strong>
                    <small>{{node.allocationText}} | {{node.state}}</small>
                    <div class="hd-power-meter" aria-hidden="true"><span style="width: {{node.allocationPercent}}%"></span></div>
                    {{#if ../canEdit}}
                      <label class="hd-inline-field">
                        <small>Allocated</small>
                        <input class="hd-direct-input" type="number" min="0" step="1" value="{{node.allocated}}" data-hd-power-allocation="{{node.slotId}}" title="Power allocation">
                      </label>
                    {{/if}}
                  </article>
                {{/each}}
              </div>
            {{else}}
              <p class="hd-muted">No powered equipment is installed.</p>
            {{/if}}
          </section>
        {{/if}}

        {{#if isDamage}}
          <section class="hd-page hd-damage-page">
            {{#if selectedProfile.dashboard.hasSystems}}
              <div class="hd-systems-table">
                {{#each selectedProfile.dashboard.systems as |system|}}
                  {{#if system.durabilityEnabled}}
                    <article class="hd-system-row {{system.stateClass}}">
                      <img src="{{system.itemImg}}" alt="">
                      <div><strong>{{system.itemName}}</strong><small>{{system.slotLabel}}</small></div>
                      <span>{{system.durabilityText}}</span>
                      <em><i class="fa-solid {{system.icon}}"></i>{{system.state}}</em>
                    </article>
                  {{/if}}
                {{/each}}
              </div>
            {{else}}
              <p class="hd-muted">No tracked damage systems yet.</p>
            {{/if}}
          </section>
        {{/if}}

        {{#if isSpeed}}
          <section class="hd-page hd-stat-detail-page">
            <article class="hd-stat-detail">
              <i class="fa-solid fa-gauge-high"></i>
              <p class="hd-kicker">Speed</p>
              {{#if canEdit}}
                <section class="hd-stat-primary-field {{#unless selectedProfile.dashboard.speed.hasValue}}is-empty{{/unless}}">
                  <span>Speed</span>
                  <div class="hd-stat-input-row">
                    <input type="text" value="{{selectedProfile.dashboard.speed.inputValue}}" placeholder="{{selectedProfile.dashboard.speed.value}}" data-hd-stat-key="{{selectedProfile.dashboard.speed.key}}" data-hd-stat-value="{{selectedProfile.dashboard.speed.statId}}" data-hd-stat-label="{{selectedProfile.dashboard.speed.editLabel}}" data-hd-stat-note="{{selectedProfile.dashboard.speed.note}}" title="Speed">
                    <button type="button" data-hd-unset-stat="{{selectedProfile.dashboard.speed.key}}" title="Unset speed"><i class="fa-solid fa-xmark"></i></button>
                  </div>
                </section>
              {{else}}
                {{#if selectedProfile.dashboard.speed.hasValue}}
                  <section class="hd-stat-primary-field">
                    <span>Speed</span>
                    <strong>{{selectedProfile.dashboard.speed.value}}</strong>
                  </section>
                {{/if}}
              {{/if}}
              <div class="hd-stat-detail-grid">
                {{#each selectedProfile.dashboard.speed.metrics as |metric|}}
                  {{#if ../canEdit}}
                    <section class="{{#unless metric.hasValue}}is-empty{{/unless}}">
                      <span>{{metric.label}}</span>
                      <div class="hd-stat-input-row">
                        <input type="text" value="{{metric.inputValue}}" placeholder="{{metric.value}}" data-hd-stat-key="{{metric.key}}" data-hd-stat-value="{{metric.statId}}" data-hd-stat-label="{{metric.editLabel}}" data-hd-stat-note="{{metric.note}}" title="{{metric.label}}">
                        <button type="button" data-hd-unset-stat="{{metric.key}}" title="Unset {{metric.label}}"><i class="fa-solid fa-xmark"></i></button>
                      </div>
                    </section>
                  {{else}}
                    {{#if metric.hasValue}}
                      <section>
                        <span>{{metric.label}}</span>
                        <strong>{{metric.value}}</strong>
                      </section>
                    {{/if}}
                  {{/if}}
                {{/each}}
              </div>
              <p class="hd-muted">Track cruise speed, maximum speed, and thrust.</p>
            </article>
          </section>
        {{/if}}

        {{#if isCapacity}}
          <section class="hd-page hd-stat-detail-page">
            <article class="hd-stat-detail">
              <i class="fa-solid fa-users"></i>
              <p class="hd-kicker">Capacity</p>
              {{#if canEdit}}
                <section class="hd-stat-primary-field {{#unless selectedProfile.dashboard.capacity.hasValue}}is-empty{{/unless}}">
                  <span>Capacity</span>
                  <div class="hd-stat-input-row">
                    <input type="text" value="{{selectedProfile.dashboard.capacity.inputValue}}" placeholder="{{selectedProfile.dashboard.capacity.value}}" data-hd-stat-key="{{selectedProfile.dashboard.capacity.key}}" data-hd-stat-value="{{selectedProfile.dashboard.capacity.statId}}" data-hd-stat-label="{{selectedProfile.dashboard.capacity.editLabel}}" data-hd-stat-note="{{selectedProfile.dashboard.capacity.note}}" title="Capacity">
                    <button type="button" data-hd-unset-stat="{{selectedProfile.dashboard.capacity.key}}" title="Unset capacity"><i class="fa-solid fa-xmark"></i></button>
                  </div>
                </section>
              {{else}}
                {{#if selectedProfile.dashboard.capacity.hasValue}}
                  <section class="hd-stat-primary-field">
                    <span>Capacity</span>
                    <strong>{{selectedProfile.dashboard.capacity.value}}</strong>
                  </section>
                {{/if}}
              {{/if}}
              <div class="hd-stat-detail-grid">
                {{#each selectedProfile.dashboard.capacity.metrics as |metric|}}
                  {{#if ../canEdit}}
                    <section class="{{#unless metric.hasValue}}is-empty{{/unless}}">
                      <span>{{metric.label}}</span>
                      <div class="hd-stat-input-row">
                        <input type="text" value="{{metric.inputValue}}" placeholder="{{metric.value}}" data-hd-stat-key="{{metric.key}}" data-hd-stat-value="{{metric.statId}}" data-hd-stat-label="{{metric.editLabel}}" data-hd-stat-note="{{metric.note}}" title="{{metric.label}}">
                        <button type="button" data-hd-unset-stat="{{metric.key}}" title="Unset {{metric.label}}"><i class="fa-solid fa-xmark"></i></button>
                      </div>
                    </section>
                  {{else}}
                    {{#if metric.hasValue}}
                      <section>
                        <span>{{metric.label}}</span>
                        <strong>{{metric.value}}</strong>
                      </section>
                    {{/if}}
                  {{/if}}
                {{/each}}
              </div>
              <p class="hd-muted">Track crew, berths, cargo capacity, and life support.</p>
            </article>
          </section>
        {{/if}}

      </main>

      <aside class="hd-equipment-sidebar" aria-label="Equipment management">
        <div class="hd-equipment-sidebar-header">
          <div>
            <p class="hd-kicker">Equipment</p>
            <strong>{{selectedProfile.dashboard.equippedSlots}} installed</strong>
          </div>
          {{#if canEdit}}
            <button type="button" data-hd-action="create-slot" title="Add slot"><i class="fa-solid fa-plus"></i></button>
          {{/if}}
        </div>

        <div class="hd-equipment-category-list hd-slot-rail">
          {{#each selectedProfile.equipmentCategories as |group|}}
            <details class="hd-equipment-category" open>
              <summary>
                <span>{{group.category}}</span>
                <strong>{{group.equippedCount}} / {{group.count}}</strong>
              </summary>
              <div>
                {{#each group.slots as |slot|}}
                  <article class="hd-equipment-entry {{slot.statusClass}} {{#if slot.isSelectedEquipment}}is-selected{{/if}} {{#if slot.item}}is-filled{{else}}is-empty{{/if}}" data-hd-slot-id="{{slot.id}}" data-hd-slot-card="{{slot.id}}" title="{{slot.statusLabel}}">
                    <button type="button" data-hd-select-equipment="{{slot.id}}">
                      {{#if slot.item}}
                        <img src="{{slot.item.img}}" alt="">
                      {{else}}
                        <i class="fa-solid fa-plus"></i>
                      {{/if}}
                      <span>
                        <strong>{{#if slot.item}}{{slot.item.name}}{{else}}{{slot.label}}{{/if}}</strong>
                        {{#if slot.item}}
                          {{#if slot.item.status}}<small>{{slot.item.status}}</small>{{/if}}
                        {{else}}
                          <small>Empty slot</small>
                        {{/if}}
                      </span>
                    </button>
                    {{#if ../../canEdit}}
                      <details class="hd-entry-menu">
                        <summary title="More actions"><i class="fa-solid fa-ellipsis"></i></summary>
                        <div>
                          <button type="button" data-hd-browse-equipment="{{slot.id}}"><i class="fa-solid fa-list-check"></i> Choose</button>
                          <button type="button" data-hd-link-slot="{{slot.id}}"><i class="fa-solid fa-location-dot"></i> Link</button>
                          {{#if slot.hasAnchor}}<button type="button" data-hd-clear-link="{{slot.id}}"><i class="fa-solid fa-link-slash"></i> Clear Link</button>{{/if}}
                          <button type="button" data-hd-edit-slot="{{slot.id}}"><i class="fa-solid fa-pen-to-square"></i> Edit Slot</button>
                          <button type="button" data-hd-delete-slot="{{slot.id}}"><i class="fa-solid fa-trash"></i> Delete Slot</button>
                        </div>
                      </details>
                    {{/if}}
                  </article>
                {{/each}}
              </div>
            </details>
          {{/each}}
        </div>
      </aside>
    </div>

  {{else}}
    <div class="hd-empty">
      <i class="fas fa-rocket"></i>
      {{#if canEdit}}
        <p>Create a ship profile to start assigning equipment.</p>
      {{else}}
        <p>No ship loadouts are available yet.</p>
      {{/if}}
    </div>
  {{/if}}
  </div>
  <div class="hs-effects" aria-hidden="true"></div>
</section>
