@if (facade.selected(); as customer) {
<main class="customer-detail">
  <header class="toolbar">
    <app-button variant="secondary" size="sm" (click)="back()">{{ 'adminCustomers.back' | translate }}</app-button>
    <h1>{{ customer.name }}</h1>
    @if (customer.orderCount > 1) {
      <app-badge variant="success">{{ 'adminCustomers.returning' | translate }}</app-badge>
    }
  </header>

  <section class="grid two">
    <div class="card">
      <h3>{{ 'adminCustomers.profile' | translate }}</h3>
      <p>{{ customer.email }}</p>
      <p>{{ customer.phone }}</p>
    </div>
    <div class="card">
      <h3>{{ 'adminCustomers.statistics' | translate }}</h3>
      <p>{{ 'adminCustomers.orderCount' | translate }}: {{ customer.orderCount }}</p>
      <p>{{ 'adminCustomers.lifetimeValue' | translate }}: {{ customer.totalSpent }} {{ customer.currency }}</p>
      <p>{{ 'adminCustomers.firstOrder' | translate }}: {{ customer.firstOrderAt | date:'short' }}</p>
      <p>{{ 'adminCustomers.lastOrder' | translate }}: {{ customer.lastOrderAt | date:'short' }}</p>
    </div>
    <div class="card">
      <h3>{{ 'adminCustomers.addresses' | translate }}</h3>
      @for (address of customer.addresses; track address) { <p>{{ address }}</p> }
    </div>
    <div class="card">
      <h3>{{ 'adminCustomers.notes' | translate }}</h3>
      <p class="muted">{{ 'adminCustomers.notesUnavailable' | translate }}</p>
    </div>
  </section>

  <section class="card">
    <h3>{{ 'adminCustomers.orders' | translate }}</h3>
    @for (order of customer.orders; track order.id) {
      <div class="order-row">
        <button type="button" class="link-button" (click)="viewOrder(order.id)">{{ order.orderNumber }}</button>
        <app-badge variant="neutral">{{ ('adminOrders.status.' + order.status) | translate }}</app-badge>
        <span>{{ order.total }} {{ order.currency }}</span>
        <span class="muted">{{ order.createdAt | date:'short' }}</span>
      </div>
    }
  </section>

  <section class="card">
    <h3>{{ 'adminCustomers.activity' | translate }}</h3>
    <app-order-timeline [entries]="activity()" [showOrderNumber]="true" />
  </section>
</main>
} @else if (facade.selectedError()) {
  <div class="customer-detail-error" role="alert">
    <p>{{ 'common.errorTitle' | translate }}</p>
    <p>{{ 'common.errorDescription' | translate }}</p>
    <app-button variant="secondary" size="sm" (click)="back()">{{ 'adminCustomers.back' | translate }}</app-button>
  </div>
} @else {
  <p>{{ 'common.loading' | translate }}</p>
}