<odoo>
    <template id="appointment_type_list" name="Appointment Booking List">
        <t t-call="website.layout">
            <div id="wrap" class="oe_structure">
                <section class="container py-5">
                    <h1 class="mb-4">Book an Appointment</h1>
                    <div t-if="not appointment_types" class="alert alert-info">
                        No appointment types are available right now.
                    </div>
                    <div class="row g-3">
                        <t t-foreach="appointment_types" t-as="appointment_type">
                            <div class="col-12 col-md-6 col-lg-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h2 class="h5 card-title" t-esc="appointment_type.name"/>
                                        <div class="text-muted mb-3">
                                            <span t-esc="appointment_type.duration"/> hour appointment
                                        </div>
                                        <div t-if="appointment_type.description" class="mb-3">
                                            <t t-out="appointment_type.description"/>
                                        </div>
                                        <a class="btn btn-primary" t-att-href="'/appointments/%s' % appointment_type.id">View Times</a>
                                    </div>
                                </div>
                            </div>
                        </t>
                    </div>
                </section>
            </div>
        </t>
    </template>

    <template id="appointment_type_page" name="Appointment Booking Page">
        <t t-call="website.layout">
            <div id="wrap" class="oe_structure">
                <section class="container py-5">
                    <a href="/appointments" class="btn btn-link px-0 mb-3">Back to appointments</a>
                    <h1 class="mb-2" t-esc="appointment_type.name"/>
                    <p class="text-muted mb-4">
                        <span t-esc="appointment_type.duration"/> hour appointment
                    </p>

                    <div class="mb-4 d-flex flex-wrap gap-2">
                        <t t-foreach="day_options" t-as="day">
                            <a t-attf-class="btn #{'btn-primary' if day == selected_day else 'btn-outline-primary'}"
                               t-att-href="'/appointments/%s?date=%s' % (appointment_type.id, day.isoformat())">
                                <t t-esc="day.strftime('%a %d %b')"/>
                            </a>
                        </t>
                    </div>

                    <div t-if="not slots" class="alert alert-info">
                        No free slots are available on this day.
                    </div>

                    <div class="row g-3">
                        <t t-foreach="slots" t-as="slot">
                            <div class="col-12 col-lg-6">
                                <form t-att-action="'/appointments/%s/book' % appointment_type.id" method="post" class="card">
                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                    <input type="hidden" name="start" t-att-value="slot['start']"/>
                                    <input type="hidden" name="stop" t-att-value="slot['stop']"/>
                                    <div class="card-body">
                                        <h2 class="h5 mb-3" t-esc="slot['label']"/>
                                        <div class="row g-2">
                                            <div class="col-12">
                                                <label class="form-label">Name</label>
                                                <input class="form-control" name="customer_name" required="required"/>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <label class="form-label">Email</label>
                                                <input class="form-control" name="customer_email" type="email" required="required"/>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <label class="form-label">Phone</label>
                                                <input class="form-control" name="customer_phone"/>
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label">Notes</label>
                                                <textarea class="form-control" name="notes" rows="2"/>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary mt-3" type="submit">Book Appointment</button>
                                    </div>
                                </form>
                            </div>
                        </t>
                    </div>
                </section>
            </div>
        </t>
    </template>

    <template id="appointment_confirmed" name="Appointment Confirmed">
        <t t-call="website.layout">
            <div id="wrap" class="oe_structure">
                <section class="container py-5">
                    <div class="alert alert-success">
                        Your appointment has been booked.
                    </div>
                    <h1 class="mb-3" t-esc="booking.appointment_type_id.name"/>
                    <p>
                        <strong>Name:</strong>
                        <span t-esc="booking.customer_name"/>
                    </p>
                    <p>
                        <strong>Email:</strong>
                        <span t-esc="booking.customer_email"/>
                    </p>
                    <p>
                        <strong>Start:</strong>
                        <span t-field="booking.start"/>
                    </p>
                    <a href="/appointments" class="btn btn-primary">Book another appointment</a>
                </section>
            </div>
        </t>
    </template>
</odoo>
