<?xml version="1.0"?>
<t name="Event Description Dates" t-name="website_event.event_description_dates">
    <t t-set="is_one_day_without_slots" t-value="not event.is_multi_slots and event.is_one_day"/>
    <div t-attf-class="o_wevent_dates_block {{is_one_day_without_slots and 'd-flex flex-wrap justify-content-between align-items-center gap-2'}}">
        <div t-if="opt_event_dates_block" class="pb-3 flex-wrap gap-3 w-lg-100">
            <div t-if="event.is_multi_slots">
                <small class="fw-bold">Next Dates</small>
                <div class="card bg-transparent py-3 px-2 px-md-3">
                    <!-- Up to the next 3 closest dates -->
                    <t t-set="slots_to_preview" t-value="dict(list(slots.items())[:3])"/>
                    <t t-if="slots_to_preview">
                        <div class="row">
                            <div t-foreach="slots_to_preview" t-as="date" class="col d-flex flex-column align-items-start gap-1 pb-2">
                                <time t-out="date" class="text-nowrap" t-options="{'widget': 'date', 'format': 'full'}"/>
                                <div class="d-flex flex-wrap gap-2">
                                    <button t-foreach="slots_to_preview[date]" t-as="slot" t-attf-class="btn btn-sm text-nowrap pe-none                                         #{'bg-danger text-white' if slot.is_sold_out else 'btn-light'}">
                                        <span t-if="slot.is_sold_out" class="lh-1">Sold Out</span>
                                        <time t-else="" t-out="slot.start_datetime" t-att-datetime="slot.start_datetime" class="lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button t-if="event.event_registrations_open" type="button" data-bs-toggle="modal" data-bs-target="#modal_slot_registration" t-attf-class="btn btn-link text-decoration-none pb-0 {{cta_additional_classes}}">
                            View More
                        </button>
                    </t>
                    <t t-else="">
                        No Future Dates Available
                    </t>
                </div>
            </div>
            <div t-elif="event.is_one_day" class="card bg-transparent d-inline-flex align-items-end flex-row flex-grow-1 w-lg-100 gap-2 p-2 p-md-3">
                <time t-out="event.date_begin" t-att-datetime="event.date_begin" class="o_wevent_day_header_number lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'dd', 'date_only': 'true'}"/>
                <div class="small">
                    <time t-out="event.date_begin" t-att-datetime="event.date_begin" class="d-block lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'MMMM Y', 'date_only': 'true'}"/>
                    <time t-out="event.date_begin" t-att-datetime="event.date_begin" class="fw-bold lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
                    <i class="fa fa-long-arrow-right mx-1 text-muted" role="img"/>
                    <time t-out="event.date_end" t-att-datetime="event.date_end" class="fw-bold lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
                    <span t-if="website_visitor_timezone != event.date_tz" class="d-block lh-1" t-out="event.date_tz"/>
                </div>
            </div>

            <t t-else="">
                <div class="d-flex flex-lg-column flex-wrap gap-2 w-100">
                    <div class="flex-grow-1 w-lg-100">
                        <small class="fw-bold">Starts</small>
                        <div class="card bg-transparent d-flex align-items-end flex-row flex-grow-1 gap-2 py-3 px-2 px-md-3">
                            <time t-out="event.date_begin" t-att-datetime="event.date_begin" class="o_wevent_day_header_number lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'dd', 'date_only': 'true'}"/>
                            <div class="small">
                                <time t-out="event.date_begin" t-att-datetime="event.date_begin" class="d-block lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'MMMM Y', 'date_only': 'true'}"/>
                                <time t-out="event.date_begin" t-att-datetime="event.date_begin" class="fw-bold lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
                                <small t-if="website_visitor_timezone != event.date_tz" class="d-block lh-1" t-out="event.date_tz"/>
                            </div>
                        </div>
                    </div>
                    <div class="flex-grow-1 w-lg-100">
                        <small class="fw-bold">Ends</small>
                        <div class="card bg-transparent d-flex align-items-end flex-row flex-grow-1 gap-2 py-3 px-2 px-md-3">
                            <time t-out="event.date_end" t-att-datetime="event.date_end" class="o_wevent_day_header_number lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'dd', 'date_only': 'true'}"/>
                            <div class="small">
                                <time t-out="event.date_end" t-att-datetime="event.date_end" class="d-block lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'MMMM Y', 'date_only': 'true'}"/>
                                <time t-out="event.date_end" t-att-datetime="event.date_end" class="fw-bold lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
                                <small t-if="website_visitor_timezone != event.date_tz" class="d-block lh-1" t-out="event.date_tz"/>
                            </div>
                        </div>
                    </div>
                </div>
            </t>
        </div>

        <div t-if="opt_event_calendar_block" t-attf-class="d-flex align-items-center flex-wrap gap-2 {{'flex-basis-50 flex-basis-md-auto' if is_one_day_without_slots else ''}}">
            <small class="text-muted">Add to calendar:</small>
            <div t-attf-class="d-flex align-items-center flex-shrink-0 flex-grow-1 {{'gap-1 gap-md-2' if is_one_day_without_slots else 'gap-2'}}">
                <a t-att-href="iCal_url" class="btn btn-light o_wevent_add_to_ical" title="Add to iCal">
                    <img src="/event/static/src/img/apple-calendar.svg" alt="iCal" loading="lazy"/>
                </a>
                <a t-att-href="iCal_url" class="btn btn-light o_wevent_add_to_outlook" title="Add to Outlook">
                    <img src="/event/static/src/img/outlook-calendar.svg" alt="Outlook" loading="lazy"/>
                </a>
                <a t-att-href="google_url" class="btn btn-light o_wevent_add_to_google_calendar" title="Add to Google" target="_blank">
                    <img src="/event/static/src/img/google-calendar.svg" alt="Google Agenda" loading="lazy"/>
                </a>
            </div>
        </div>
    </div>
</t>


