{% extends "base.html" %}

{% block title %}Book{% endblock %}
{% block page_title %}Book{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/booking/assets/css/booking.css">
{% endblock %}

{% block content %}
<div data-plugin="booking" class="booking-book-page mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8"
      id="booking-book-page"
      data-currency="{{ currency_symbol | default(value='') }}"
      data-venues="{{ venues | json_encode }}"
      data-single-mode="{{ single_mode }}"
      data-single-venue-id="{{ single_venue_id }}"
      data-single-venue-name="{{ single_venue_name }}"
      data-venue-label="{{ venue_label | default(value='Venues') }}"
      data-venue-singular-label="{{ venue_singular_label | default(value='Venue') }}">
    <header class="booking-book-header mb-6 max-w-4xl space-y-2">
        <h1>{% if single_mode %}Book {{ single_venue_name }}{% else %}Book {{ venue_article | default(value='a') }} {{ venue_singular_label | default(value='venue') }}{% endif %}</h1>
        <p class="booking-muted">{% if single_mode %}Choose your dates, then pick a room, seat, or other available item and a time.{% else %}Choose your dates, compare {{ venue_label | default(value='venues') | lower }} with availability, then pick a room, seat, or other available item.{% endif %} You can select more than one date.</p>
    </header>

    <nav class="booking-steps my-6" aria-label="Booking progress">
        <ol class="m-0 flex list-none flex-wrap gap-3 p-0 sm:gap-6">
            <li class="booking-step is-active inline-flex items-center gap-2 font-semibold text-sm text-muted" data-step="1"><span class="num inline-grid size-8 place-items-center rounded-full border border-divider bg-surface">1</span><span class="label">Dates</span></li>
            {% if not single_mode %}<li class="booking-step inline-flex items-center gap-2 font-semibold text-sm text-muted" data-step="2"><span class="num inline-grid size-8 place-items-center rounded-full border border-divider bg-surface">2</span><span class="label">Venue</span></li>{% endif %}
            <li class="booking-step inline-flex items-center gap-2 font-semibold text-sm text-muted" data-step="{% if single_mode %}2{% else %}3{% endif %}"><span class="num inline-grid size-8 place-items-center rounded-full border border-divider bg-surface">{% if single_mode %}2{% else %}3{% endif %}</span><span class="label">Choose item</span></li>
            <li class="booking-step inline-flex items-center gap-2 font-semibold text-sm text-muted" data-step="{% if single_mode %}3{% else %}4{% endif %}"><span class="num inline-grid size-8 place-items-center rounded-full border border-divider bg-surface">{% if single_mode %}3{% else %}4{% endif %}</span><span class="label">Pay</span></li>
        </ol>
    </nav>

    <div class="booking-layout grid grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,1fr)_22.5rem]">
        <main class="booking-main min-w-0">
            <section class="booking-calendar-section booking-flow-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" data-flow-step="dates">
                <h2>{% if single_mode %}Pick dates{% else %}1. Pick dates{% endif %}</h2>
                <div class="booking-cal-nav flex items-center gap-3">
                    <button type="button" id="book-cal-prev" class="blocks-button blocks-button-secondary" aria-label="Previous month">&larr;</button>
                    <span id="book-cal-label"></span>
                    <button type="button" id="book-cal-next" class="blocks-button blocks-button-secondary" aria-label="Next month">&rarr;</button>
                </div>
                <div id="book-calendar" class="booking-calendar" aria-live="polite"></div>
                <p id="book-cal-hint" class="booking-muted">Choose one or more dates to check what is available.</p>
                <p id="book-selected-dates" class="booking-muted" aria-live="polite"></p>
            </section>

            <section class="booking-book-controls booking-flow-card mb-4 grid gap-3 rounded-xl border border-divider bg-surface p-4 sm:p-5" data-flow-step="venue">
                <label for="book-venue-search">{{ venue_singular_label | default(value='Venue') }}</label>
                <input type="text" id="book-venue-search" class="blocks-input" placeholder="Search {{ venue_singular_label | default(value='venue') | lower }}…">
                <button type="button" id="book-search-venues" class="blocks-button blocks-button-secondary">Find {{ venue_label | default(value='Venues') | lower }}</button>
            </section>

            <section class="booking-venues-section booking-flow-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" data-flow-step="venue-results">
                <h2>2. Choose {{ venue_singular_label | default(value='venue') | lower }}</h2>
                <div id="book-venues" class="booking-venues-grid"></div>
            </section>

            <section class="booking-resources-section booking-flow-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" data-flow-step="resources">
                <h2>{% if single_mode %}Choose what to book{% else %}3. Choose what to book{% endif %}</h2>
                <p class="booking-muted">Availability is checked for every date you selected. Where seat booking is available, choose seats on the seating layout and select a time for each one. You can book several seats for different times.</p>
                <div id="book-resources" class="booking-venues-grid"></div>
            </section>
        </main>

        <aside class="booking-summary rounded-xl border border-divider bg-surface p-4 shadow-lg lg:sticky lg:top-4">
            <section class="booking-tray-section">
                <h2>Your booking</h2>
                <p class="booking-muted">Your chosen items and times will appear here.</p>
                <div id="book-tray"></div>
                <p id="book-quote" class="booking-quote"></p>
                <button type="button" id="book-hold" class="blocks-button blocks-button-primary" disabled>Hold &amp; pay</button>
            </section>
        </aside>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/booking/assets/js/book.js"></script>
{% endblock %}