<?xml version="1.0"?>
<t name="Events list" t-name="website_event.events_list">
    <!-- Options -->
    <t t-set="opt_index_sidebar" t-value="is_view_active('website_event.opt_index_sidebar')"/>
    <t t-set="opt_events_event_location" t-value="is_view_active('website_event.event_location')"/>
    <t t-if="opt_events_list_columns" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-md-6' or 'col-md-6 col-lg-4 col-xl-3'"/>
    <t t-else="" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-12' or 'col-xl-12'"/>
    <!-- No events -->
    <div t-if="not event_ids" class="col-12 text-center">
        <div t-call="website_event.event_empty_events_svg" class="my-4"/>
        <h3>No events scheduled yet</h3>
        <p t-if="searches['search']">We couldn't find any event matching your search for: <strong t-out="searches['search']"/>.</p>
        <p t-elif="searches['tags']">No event matching your search criteria could be found.</p>
        <p t-else="">We couldn't find any event scheduled at this moment.</p>
        <div class="o_not_editable my-3" groups="event.group_event_user">
            <a class="o_wevent_cta btn" target="_blank" href="/odoo/action-event.action_event_view?view_type=form">
                <span class="fa fa-plus me-1"/> Create an Event
            </a>
        </div>
    </div>
    <!-- Fuzzy search -->
    <div t-if="event_ids and original_search" class="col-12 alert alert-warning mt8">
        No results found for '<span t-out="original_search"/>'. Showing results for '<span t-out="searches['search']"/>'.
    </div>
    <!-- List -->
    <div t-foreach="event_ids" t-as="event" t-attf-class=" #{opt_event_size}">
        <a t-cache="event if not editable and event.website_published else None" t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="text-decoration-none text-reset " t-att-data-publish="event.website_published and 'on' or 'off'">
            <article t-attf-class="h-100 #{opt_events_list_cards and 'card'}" itemscope="itemscope" itemtype="http://schema.org/Event">
                <div t-attf-class="h-100 #{opt_events_list_columns and 'd-flex flex-wrap flex-column' or 'row mx-0'}">
                    <!-- Header -->
                    <header t-attf-class="card-header overflow-hidden bg-secondary p-0 border-0 rounded-0 #{opt_events_list_columns and 'col-12' or 'col-4 col-lg-3'} #{(not opt_events_list_cards) and 'shadow-sm'}">
                        <!-- Image + Link -->
                        <div class="d-block h-100 w-100">
                            <t t-call="website.record_cover">
                                <t t-set="_record" t-value="event"/>
                                <meta itemprop="startDate" t-att-content="event.date_begin.isoformat()"/>
                                <!-- Short date + (optional) Country Flag -->
                                <div t-if="opt_events_event_location" t-attf-class="o_wevent_date_with_flag o_wevent_event_date position-absolute shadow-sm o_not_editable #{(not opt_events_list_columns) and 'left'} ">
                                    <div t-if="not event.is_multi_slots" class="o_wevent_event_date_text">
                                        <span t-out="event.date_begin" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'LLL'}" class="o_wevent_event_month"/>
                                        <span t-out="event.date_begin" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'dd'}" class="o_wevent_event_day oe_hide_on_date_edit"/>
                                    </div>
                                    <div class="o_wevent_event_country_flag">
                                        <img t-if="event.country_id and event.country_id.image_url" class="h-100 align-baseline" t-att-src="event.country_id.image_url" t-att-alt="event.country_id.name"/>
                                        <i t-elif="not event.country_id" class="fa fa-video-camera h-100"/>
                                    </div>
                                </div>
                                <div t-elif="not event.is_multi_slots" t-attf-class="o_wevent_event_date position-absolute shadow-sm o_not_editable #{(not opt_events_list_columns) and 'left'} ">
                                    <span t-out="event.date_begin" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'LLL'}" class="o_wevent_event_month"/>
                                    <span t-out="event.date_begin" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'dd'}" class="o_wevent_event_day oe_hide_on_date_edit"/>
                                </div>
                                <!-- Not open -->
                                <span t-if="not event.event_registrations_open and (not opt_events_list_cards or not opt_events_list_columns)" class="position-absolute bottom-0 px-3 py-2 w-100 text-bg-light">
                                    <t t-if="not event.event_registrations_started">
                                        Registrations not yet open
                                    </t>
                                    <t t-elif="event.event_registrations_sold_out">
                                        Sold Out
                                    </t>
                                    <t t-else="">
                                        Registrations Closed
                                    </t>
                                </span>
                                <!-- Participating -->
                                <small t-if="event.is_participating" class="o_wevent_participating position-absolute bottom-0 px-3 py-2 w-100 text-bg-success">
                                    <i class="fa fa-check me-2"/>Registered
                                </small>
                                <!-- Unpublished -->
                                <small t-if="not event.website_published" class="o_wevent_unpublished position-absolute bottom-0 px-3 py-2 w-100 text-bg-danger">
                                    <i class="fa fa-ban me-2"/>Unpublished
                                </small>
                            </t>
                        </div>
                    </header>
                    
                    <!-- Body -->
                    <main t-attf-class="card-body position-relative d-flex flex-column justify-content-between gap-2 #{opt_events_list_columns and 'col-12 py-3' or 'col-8 col-lg-9 px-4'} #{not opt_events_list_cards and opt_events_list_columns and 'bg-transparent px-0'} #{not opt_events_list_cards and not opt_events_list_columns and 'bg-transparent py-0'}">
                        <div id="event_details">
                            <div class="d-flex flex-wrap gap-1 small">
                                <t t-foreach="event.tag_ids.filtered(lambda tag: tag.category_id.website_id == website or not tag.category_id.website_id)" t-as="tag">
                                    <span t-if="tag.color" t-attf-class="badge #{'o_color_%s' % tag.color if tag.color else 'text-bg-light'}">
                                        <t t-out="tag.name"/>
                                    </span>
                                </t>
                            </div>
                            <!-- Title -->
                            <h5 t-attf-class="card-title my-2 #{(not event.website_published) and 'text-danger'}">
                                <span t-field="event.name" itemprop="name"/>
                            </h5>
                            <!-- Start Date & Time -->
                            <!-- TODO remove t-out one in master -->
                            <small t-if="False" class="o_not_editable opacity-75" itemprop="description" t-out="event.subtitle">
                            </small>
                            <small class="opacity-75" itemprop="description" t-field="event.subtitle"/>
                        </div>
                        <!-- Location -->
                        <small class="o_not_editable fw-bold" itemprop="location" t-out="event.address_id" t-options="{'widget': 'contact', 'fields': ['city', 'country_id'], 'null_text': 'Online event'}"/>
                    </main>
                    
                    <!-- Footer -->
                    <footer t-if="not event.event_registrations_open and opt_events_list_columns and opt_events_list_cards" t-att-class="'small align-self-end w-100 %s %s' % (                             opt_events_list_cards and 'card-footer' or (not opt_events_list_columns and 'py-2 mt-2') or 'py-2',                             opt_events_list_cards and 'border-top' or 'px-2',                         )">
                        <span t-if="not event.event_registrations_open">
                            <t t-if="not event.event_registrations_started">
                                Registrations not yet open
                            </t>
                            <t t-elif="event.event_registrations_sold_out">
                                Sold Out
                            </t>
                            <t t-else="">
                                Registrations Closed
                            </t>
                        </span>
                    </footer>
                </div>
            </article>
        </a>
    </div>
    <!-- Pager -->
    <div class="d-flex justify-content-center my-3">
        <t t-call="website.pager"/>
    </div>
</t>

