@if (facade.selected(); as order) {
<main class="order-detail">
  <header class="toolbar no-print">
    <app-button variant="secondary" size="sm" (click)="back()">{{ 'adminOrders.back' | translate }}</app-button>
    <h1>{{ order.orderNumber }}</h1>
    <app-badge variant="neutral">{{ ('adminOrders.status.' + order.status) | translate }}</app-badge>
    <div class="spacer"></div>
    <app-button variant="secondary" (click)="printInvoice()">{{ 'adminOrders.printInvoice' | translate }}</app-button>
  </header>

  <section class="grid two">
    <div class="card">
      <h3>{{ 'adminOrders.customer' | translate }}</h3>
      <p>{{ order.customer.name }}</p>
      <p>{{ order.customer.email }}</p>
      <p>{{ order.customer.phone }}</p>
    </div>
    <div class="card">
      <h3>{{ 'adminOrders.payment' | translate }}</h3>
      <p>{{ order.payment.method }} — {{ ('adminOrders.paymentStatus.' + order.payment.status) | translate }}</p>
      <p>{{ order.payment.amount }} {{ order.payment.currency }}</p>
    </div>
    <div class="card">
      <h3>{{ 'adminOrders.shipping' | translate }}</h3>
      <p>{{ order.shipping.address }}</p>
      <p>{{ order.shipping.method }}</p>
      @if (order.shipping.trackingNumber) { <p>{{ order.shipping.trackingNumber }}</p> }
    </div>
    <div class="card no-print">
      <h3>{{ 'adminOrders.changeStatus' | translate }}</h3>
      <select [attr.aria-label]="'adminOrders.changeStatus' | translate" [ngModel]="order.status" (ngModelChange)="setStatus(order.id, $event)">
        @for (status of statuses; track status) {
          <option [value]="status">{{ ('adminOrders.status.' + status) | translate }}</option>
        }
      </select>
      <div class="actions">
        <app-button variant="secondary" size="sm" (click)="requestRefund(order.id)">{{ 'adminOrders.requestRefund' | translate }}</app-button>
        <app-button variant="danger" size="sm" (click)="cancel(order.id)">{{ 'adminOrders.cancelOrder' | translate }}</app-button>
      </div>
    </div>
  </section>

  <section class="card">
    <h3>{{ 'adminOrders.items' | translate }}</h3>
    @for (item of order.items; track item.productId) {
      <p>{{ item.name }} × {{ item.quantity }} — {{ item.price }} {{ order.currency }}</p>
    }
    <p class="total">{{ 'backoffice.price' | translate }}: {{ order.total }} {{ order.currency }}</p>
  </section>

  <section class="card">
    <h3>{{ 'adminOrders.timeline' | translate }}</h3>
    @for (entry of order.timeline; track $index) {
      <p>{{ entry.timestamp | date:'short' }} — {{ ('adminOrders.status.' + entry.status) | translate }} — {{ entry.note }}</p>
    }
  </section>

  <section class="grid two no-print">
    <div class="card">
      <h3>{{ 'adminOrders.notes' | translate }}</h3>
      @for (line of order.notes.split('\n'); track $index) { @if (line) { <p>{{ line }}</p> } }
      <textarea rows="2" [ngModel]="noteDraft()" (ngModelChange)="noteDraft.set($event)"></textarea>
      <app-button variant="secondary" size="sm" (click)="submitNote(order.id)">{{ 'adminOrders.addNote' | translate }}</app-button>
    </div>
    <div class="card">
      <h3>{{ 'adminOrders.internalNotes' | translate }}</h3>
      @for (line of order.internalNotes.split('\n'); track $index) { @if (line) { <p>{{ line }}</p> } }
      <textarea rows="2" [ngModel]="internalNoteDraft()" (ngModelChange)="internalNoteDraft.set($event)"></textarea>
      <app-button variant="secondary" size="sm" (click)="submitInternalNote(order.id)">{{ 'adminOrders.addNote' | translate }}</app-button>
    </div>
  </section>
</main>
} @else {
  <p>{{ 'common.loading' | translate }}</p>
}