@if (loading()) {
  <div class="card card-pad"><div class="skeleton" style="height: 220px"></div></div>
} @else if (loadFailed() || flight() === null) {
  <div class="card empty">
    <h3>Flight not available</h3>
    <p>It may have been withdrawn from your agency's inventory.</p>
    <p style="margin-top: 14px">
      <a routerLink="/search" class="btn btn-primary btn-sm">Back to search</a>
    </p>
  </div>
} @else {
  @let f = flight()!;

  <div class="page-head">
    <div>
      <h1>Complete booking</h1>
      <p class="subtitle">Enter traveller details, then confirm.</p>
    </div>
    <a routerLink="/search" class="btn btn-ghost btn-sm">← Back to search</a>
  </div>

  @if (error()) {
    <div class="alert alert-error" role="alert">{{ error() }}</div>
  }

  <div class="checkout">
    <!-- Left: traveller and contact details -->
    <form [formGroup]="form" (ngSubmit)="submit()" class="stack" novalidate>
      <section class="card">
        <div class="card-head">
          <h2>Travellers</h2>
          <button
            type="button"
            class="btn btn-ghost btn-sm"
            (click)="addPassenger()"
            [disabled]="passengers.length >= 9"
          >
            + Add traveller
          </button>
        </div>

        <div class="card-pad stack" formArrayName="passengers">
          @for (group of passengers.controls; track $index) {
            <fieldset class="pax" [formGroupName]="$index">
              <legend>
                Traveller {{ $index + 1 }}
                @if (passengers.length > 1) {
                  <button type="button" class="link-remove" (click)="removePassenger($index)">
                    Remove
                  </button>
                }
              </legend>

              <div class="pax-grid">
                <div class="field">
                  <label [attr.for]="'first-' + $index">First name</label>
                  <input
                    [id]="'first-' + $index"
                    type="text"
                    formControlName="firstName"
                    autocomplete="given-name"
                    [class.invalid]="showError($index, 'firstName')"
                  />
                  @if (showError($index, 'firstName')) {
                    <span class="error">Required.</span>
                  }
                </div>

                <div class="field">
                  <label [attr.for]="'last-' + $index">Last name</label>
                  <input
                    [id]="'last-' + $index"
                    type="text"
                    formControlName="lastName"
                    autocomplete="family-name"
                    [class.invalid]="showError($index, 'lastName')"
                  />
                  @if (showError($index, 'lastName')) {
                    <span class="error">Required.</span>
                  }
                </div>

                <div class="field">
                  <label [attr.for]="'dob-' + $index">Date of birth</label>
                  <input [id]="'dob-' + $index" type="date" formControlName="dateOfBirth" />
                  <span class="hint">Optional</span>
                </div>

                <div class="field">
                  <label [attr.for]="'passport-' + $index">Passport number</label>
                  <input [id]="'passport-' + $index" type="text" formControlName="passportNumber" />
                  <span class="hint">Optional</span>
                </div>
              </div>
            </fieldset>
          }
        </div>
      </section>

      <section class="card">
        <div class="card-head"><h2>Contact details</h2></div>
        <div class="card-pad">
          <div class="pax-grid">
            <div class="field">
              <label for="contactEmail">Email</label>
              <input id="contactEmail" type="email" formControlName="contactEmail" />
              @if (form.controls.contactEmail.touched && form.controls.contactEmail.invalid) {
                <span class="error">Enter a valid email address.</span>
              }
            </div>
            <div class="field">
              <label for="contactPhone">Phone</label>
              <input id="contactPhone" type="tel" formControlName="contactPhone" />
              <span class="hint">Optional</span>
            </div>
          </div>
        </div>
      </section>

      <button
        type="submit"
        class="btn btn-primary btn-confirm"
        [disabled]="submitting() || seatsShort()"
      >
        {{ submitting() ? 'Confirming…' : 'Confirm booking' }}
      </button>
    </form>

    <!-- Right: itinerary and fare summary -->
    <aside class="summary">
      <div class="card">
        <div class="card-head"><h2>Your flight</h2></div>
        <div class="card-pad stack">
          <div class="sum-carrier">
            <span class="carrier-code">{{ f.airline.iataCode }}</span>
            <span>
              <span class="sum-airline">{{ f.airline.name }}</span>
              <span class="sum-meta">{{ f.flightNumber }} · {{ f.aircraft }}</span>
            </span>
          </div>

          <div class="sum-route">
            <div class="sum-point">
              <span class="sum-time tabular">{{ f.departureTime | date: 'HH:mm' }}</span>
              <span class="sum-iata">{{ f.origin.iataCode }}</span>
              <span class="sum-city">{{ f.origin.city }}</span>
            </div>
            <span class="sum-arrow" aria-hidden="true">→</span>
            <div class="sum-point">
              <span class="sum-time tabular">{{ f.arrivalTime | date: 'HH:mm' }}</span>
              <span class="sum-iata">{{ f.destination.iataCode }}</span>
              <span class="sum-city">{{ f.destination.city }}</span>
            </div>
          </div>

          <dl class="sum-list">
            <div><dt>Date</dt><dd>{{ f.departureTime | date: 'EEE d MMM y' }}</dd></div>
            <div><dt>Duration</dt><dd>{{ f.durationMinutes | duration }}</dd></div>
            <div><dt>Cabin</dt><dd class="cap">{{ cabinLabel(f.cabinClass) }}</dd></div>
            <div><dt>Seats left</dt><dd>{{ f.seatsAvailable }}</dd></div>
          </dl>
        </div>

        <div class="card-pad fare-total">
          <div class="fare-row muted">
            <span>
              {{ f.basePrice | currency: f.currency : 'symbol' : '1.2-2' }} ×
              {{ passengerCount() }}
              {{ passengerCount() === 1 ? 'traveller' : 'travellers' }}
            </span>
          </div>
          <div class="fare-row total">
            <span>Total</span>
            <strong class="tabular">{{ total() | currency: f.currency : 'symbol' : '1.2-2' }}</strong>
          </div>

          @if (seatsShort()) {
            <div class="alert alert-error" style="margin-top: 12px">
              Only {{ f.seatsAvailable }} seat(s) remain. Remove travellers to continue.
            </div>
          }
        </div>
      </div>
    </aside>
  </div>
}