{# CODEX_DJANGO_CLI BLUEPRINT STATUS: MOVE_TO_CLI_BLUEPRINT. Reason: generated app-layer or scaffold-owned template for codex-django-cli blueprints. #}
<div class="cab-summary-card p-4">
  <div class="fw-semibold mb-3" style="font-size: .92rem;">Separate booking summary</div>

  <div class="py-2 mb-3" style="border-top: 1px solid #f1f5f9;">
    <div class="text-muted mb-1" style="font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;">Client</div>
    <div class="fw-semibold text-dark" x-text="selectedClient ? selectedClient.name : ((clientFName + ' ' + clientLName).trim() || 'Not selected')"></div>
    <div class="text-muted small" x-text="selectedClient ? selectedClient.phone : clientPhone"></div>
  </div>

  <div x-show="selectedServices.length === 0" x-cloak class="text-muted text-center py-3" style="font-size: .82rem;">
    <span class="bi bi-bag d-block mb-1" style="font-size: 1.5rem; opacity: .3;"></span>
    Select services
  </div>

  <div x-show="selectedServices.length > 0" x-cloak>
    <template x-for="row in summaryRows()" :key="row.id">
      <div class="mb-3 pb-3" style="border-bottom: 1px solid #f1f5f9;">
        <div class="fw-semibold text-dark mb-1" x-text="row.name"></div>
        <div class="d-flex justify-content-between">
          <span class="text-muted" style="font-size: .78rem;">Date</span>
          <span style="font-size: .8rem;" x-text="selectedDateText(row.date)"></span>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-muted" style="font-size: .78rem;">Time</span>
          <span style="font-size: .8rem;" x-text="row.time || 'Pick time'"></span>
        </div>
      </div>
    </template>

    <div class="d-flex justify-content-between mb-3">
      <span class="text-muted" style="font-size: .78rem;">Total</span>
      <span class="fw-semibold" style="font-size: .95rem; color: var(--cab-primary);" x-text="totalPrice() + ' $'"></span>
    </div>
  </div>

  <form method="POST" :action="confirmUrl">
    {% csrf_token %}
    <input type="hidden" name="data" :value="buildSubmitPayload()">
    <button type="submit"
            class="btn btn-primary w-100"
            :disabled="selectedServices.length === 0 || summaryRows().some((row) => !row.date || !row.time) || (!selectedClient && !clientFName)">
      <span class="bi bi-calendar2-plus me-1"></span>Create separate bookings
    </button>
  </form>
</div>