<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="event_exhibitors" name="Event Exhibitors">
    <t t-call="website_event.layout">
        <div class="o_wevent_online o_wesponsor_index container">
            <!-- Topbar -->
            <t t-call="website_event_exhibitor.exhibitors_topbar"/>
            <!-- Drag/Drop Area -->
            <div id="oe_structure_wesponsor_index_1" class="oe_structure"/>
            <!-- Content -->
            <div class="o_wesponsor_container">
                <div class="row">
                    <t t-call="website_event_exhibitor.exhibitors_search"/>
                </div>
                <div class="row">
                    <t t-call="website_event_exhibitor.exhibitors_main"/>
                </div>
            </div>
            <!-- Drag/Drop Area -->
            <div id="oe_structure_wesponsor_index_2" class="oe_structure mb-5"/>
        </div>
    </t>
</template>

<!-- ============================================================ -->
<!-- TOPBAR: BASE NAVIGATION -->
<!-- ============================================================ -->

<!-- TOPBAR: BASE NAVIGATION -->

<!-- Main topbar -->
<template id="exhibitors_topbar" name="Exhibitor Tools">
    <div class="d-flex d-print-none justify-content-end flex-wrap gap-2 w-100 mt-3">
        <h1 class="my-0 me-auto pe-sm-4 h3-fs">Exhibitors</h1>
        <form class="o_wevent_event_tags_form d-none d-lg-block" action="#" method="POST">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
            <div class="o_wesponsor_topbar_filters o_wevent_index_topbar_filters d-flex gap-2"/>
        </form>
        <div class="d-flex w-100 w-lg-auto">
            <t t-call="website.website_search_box_input">
                <t t-set="_classes" t-valuef="o_wevent_event_sponsor_searchbar_form flex-grow-1"/>
                <t t-set="search_type" t-translation="off">sponsor</t>
                <t t-set="action" t-value="'/event/%s/exhibitors' % (slug(event))"/>
                <t t-set="display_detail" t-valuef="false"/>
                <t t-set="search" t-value="search or searches and searches['search']"/>
                <t t-set="placeholder">Search an exhibitor ...</t>
                <t t-foreach="searches" t-as="item">
                    <input t-if="item != 'search' and item_value != 'all'" type="hidden"
                        t-att-name="item" t-att-value="item_value"/>
                </t>
            </t>
            <button class="btn btn-light position-relative ms-2 d-lg-none"
                data-bs-toggle="offcanvas"
                data-bs-target="#o_wevent_exhibitors_offcanvas">
                <i class="fa fa-sliders"/>
            </button>
        </div>
    </div>
    <!-- Off canvas filters on mobile-->
    <div id="o_wevent_exhibitors_offcanvas" class="o_website_offcanvas offcanvas offcanvas-end d-lg-none p-0 overflow-visible mw-75">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Filters</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
        </div>
        <div class="offcanvas-body p-0">
            <form class="o_wevent_event_tags_mobile_form" action="#" method="POST">
                <div class="o_wesponsor_topbar_filters_mobile accordion accordion-flush"/>
            </form>
        </div>
    </div>
</template>

<!-- Topbar: optional country filters -->
<template id="exhibitors_topbar_country"
    inherit_id="website_event_exhibitor.exhibitors_topbar"
    name="Filter by Country"
    active="True">
    <xpath expr="//div[hasclass('o_wesponsor_topbar_filters')]" position="inside">
        <div class="dropdown flex-grow-1">
            <a href="#" role="button" class="btn btn-light dropdown-toggle w-100" data-bs-toggle="dropdown">
                By Country
            </a>
            <div class="dropdown-menu">
                <span t-att-data-post="'/event/%s/exhibitors?%s' % (slug(event), keep_query('*', countries=''))"
                     t-attf-class="post_link cursor-pointer dropdown-item d-flex align-items-center justify-content-between #{'active' if not search_countries else ''}">
                    All Countries
                </span>
                <t t-foreach="sponsor_countries" t-as="sponsor_country">
                    <span t-out="sponsor_country.name"
                         t-att-data-post="'/event/%s/exhibitors?%s' % (
                             slug(event),
                             keep_query('*', countries=str((search_countries - sponsor_country).ids if sponsor_country in search_countries else (sponsor_country | search_countries).ids))
                         )"
                         t-attf-class="post_link cursor-pointer dropdown-item d-flex align-items-center justify-content-between #{'active' if sponsor_country in search_countries else ''}"/>
                </t>
            </div>
        </div>
    </xpath>
    <xpath expr="//div[hasclass('o_wesponsor_topbar_filters_mobile')]" position="inside">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target=".o_wevent_offcanvas_country"
                    aria-expanded="false"
                    aria-controls="o_wevent_offcanvas_country">
                    By Country
                </button>
            </h2>
            <div class="o_wevent_offcanvas_country accordion-collapse collapse">
                <div class="accordion-body pt-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <span t-att-data-post="'/event/%s/exhibitors?%s' % (slug(event), keep_query('*', countries=''))"
                                 t-attf-class="post_link cursor-pointer">
                                All Countries
                            </span>
                        </li>
                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                        <t t-foreach="sponsor_countries" t-as="sponsor_country">
                            <li class="list-group-item border-bottom-0 py-1">
                                <span t-out="sponsor_country.name"
                                    t-att-data-post="'/event/%s/exhibitors?%s' % (
                                        slug(event),
                                        keep_query('*', countries=str((search_countries - sponsor_country).ids if sponsor_country in search_countries else (sponsor_country | search_countries).ids))
                                    )"
                                    t-attf-class="post_link cursor-pointer dropdown-item #{'active' if sponsor_country in search_countries else ''}"/>
                            </li>
                        </t>
                    </ul>
                </div>
            </div>
        </div>
    </xpath>
</template>

<!-- Topbar: optional sponsorship filters -->
<template id="exhibitors_topbar_sponsorship"
    inherit_id="website_event_exhibitor.exhibitors_topbar"
    name="Filter by Sponsorship"
    active="True">
    <xpath expr="//div[hasclass('o_wesponsor_topbar_filters')]" position="inside">
        <div class="dropdown flex-grow-1">
            <a href="#" role="button" class="btn btn-light dropdown-toggle w-100" data-bs-toggle="dropdown">
                By Level
            </a>
            <div class="dropdown-menu">
                <span t-att-data-post="'/event/%s/exhibitors?%s' % (slug(event), keep_query('*', sponsorships=''))"
                     t-attf-class="post_link cursor-pointer dropdown-item d-flex align-items-center justify-content-between #{'active' if not search_sponsorships else ''}">
                    All Levels
                </span>
                <t t-foreach="sponsor_types" t-as="sponsor_type">
                    <span t-out="sponsor_type.name"
                         t-att-data-post="'/event/%s/exhibitors?%s' % (
                            slug(event),
                            keep_query('*', sponsorships=str((search_sponsorships - sponsor_type).ids if sponsor_type in search_sponsorships else (sponsor_type | search_sponsorships).ids))
                         )"
                         t-attf-class="post_link cursor-pointer dropdown-item d-flex align-items-center justify-content-between #{'active' if sponsor_type in search_sponsorships else ''}"/>
                </t>
            </div>
        </div>
    </xpath>
    <xpath expr="//div[hasclass('o_wesponsor_topbar_filters_mobile')]" position="inside">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target=".o_wevent_offcanvas_country"
                    aria-expanded="false"
                    aria-controls="o_wevent_offcanvas_country">
                    By Level
                </button>
            </h2>
            <div class="o_wevent_offcanvas_country accordion-collapse collapse">
                <div class="accordion-body pt-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <span t-att-data-post="'/event/%s/exhibitors?%s' % (slug(event), keep_query('*', sponsorships=''))"
                                 t-attf-class="post_link cursor-pointer dropdown-item d-flex align-items-center justify-content-between #{'active' if not search_sponsorships else ''}">
                                All Levels
                            </span>
                        </li>
                        <t t-foreach="sponsor_types" t-as="sponsor_type">
                            <li class="list-group-item border-bottom-0 py-1">
                                <span t-out="sponsor_type.name"
                                    t-att-data-post="'/event/%s/exhibitors?%s' % (
                                        slug(event),
                                        keep_query('*', sponsorships=str((search_sponsorships - sponsor_type).ids if sponsor_type in search_sponsorships else (sponsor_type | search_sponsorships).ids))
                                    )"
                                    t-attf-class="post_link cursor-pointer dropdown-item d-flex align-items-center justify-content-between #{'active' if sponsor_type in search_sponsorships else ''}"/>
                            </li>
                        </t>
                    </ul>
                </div>
            </div>
        </div>
    </xpath>
</template>

<!-- ============================================================ -->
<!-- CONTENT: MAIN TEMPLATES -->
<!-- ============================================================ -->

<!-- Exhibitors Main Display -->
<template id="exhibitors_main" name="Exhibitors: Main Display">
    <!-- No exhibitors -->
    <div t-if="not sponsor_categories" class="col-12 text-center">
        <div class="my-4"><t t-call="website_event.event_empty_events_svg"/></div>
        <h2>No exhibitor found.</h2>
        <p t-if="search_key">We could not find any exhibitor matching your search for: <strong t-out="search_key"/>.</p>
        <p t-else="">We could not find any exhibitor at this moment.</p>
        <div class="o_not_editable my-3" groups="event.group_event_user">
            <a class="btn o_wevent_cta" target="_blank" t-att-href="'/odoo/%s/action-website_event_exhibitor.event_sponsor_action_from_event' % event.id">
                <span class="fa fa-plus me-1"/> Add Exhibitors
            </a>
        </div>
    </div>
    <!-- Cards -->
    <div class="col-12"><t t-call="website_event_exhibitor.exhibitors_display_cards"/></div>
</template>

<!-- Exhibitors: Cards-based display -->
<template id="exhibitors_display_cards" name="Exhibitors Cards">
    <div t-foreach="sponsor_categories" t-as="sponsor_category" class="row mb-3">
        <div class="col-12 mt-3 mb-2">
            <h4 class="h5 m-0" t-out="sponsor_category['sponsorship'].name"/>
        </div>
        <div t-foreach="sponsor_category['sponsors']" t-as="sponsor" class="col-md-6 col-lg-3 mb-4">
            <t t-call="website_event_exhibitor.exhibitor_card"/>
        </div>
    </div>
</template>

<!-- ============================================================ -->
<!-- TOOL TEMPLATES -->
<!-- ============================================================ -->

<template id="exhibitor_card" name="Exhibitor Card">
    <article class="o_wesponsor_card card h-100">
        <div class="row g-0 h-100" t-att-data-publish="sponsor.website_published and 'on' or 'off'">
            <t t-set="sponsor_image_url" t-value="sponsor.website_image_url"/>
            <header t-att-class="'overflow-hidden col-12 %s' % ('bg-secondary' if not sponsor_image_url else '')">
                <div class="d-block h-100 w-100">
                    <div t-if="sponsor_image_url" class="card-img-top position-static o_wesponsor_bg_image"
                        t-attf-style="padding-top: 50%; background-image: url(#{sponsor_image_url});">
                        <small t-if="not sponsor.is_published" class="o_wesponsor_card_header_badge bg-danger">
                            <i class="fa fa-ban me-2"/>Unpublished
                        </small>
                        <img class="position-absolute me-3 mt-3"
                            style="right: 0; top: 0; max-height: 20px;"
                            t-if="sponsor.partner_id.country_id"
                            t-att-src="sponsor.partner_id.country_id.image_url"
                            t-att-alt="sponsor.partner_id.country_id.name"/>
                    </div>
                    <div t-else="" class="o_wesponsor_gradient card-img-top"
                        style="padding-top: 50%">
                        <small t-if="not sponsor.is_published" class="o_wesponsor_card_header_badge bg-danger">
                            <i class="fa fa-ban me-2"/>Unpublished
                        </small>
                    </div>
                </div>
            </header>
            <div class="col-12 h-100 border-top">
                <main class="card-body">
                    <!-- Title -->
                    <h5 class="card-title d-flex align-items-start justify-content-between mt-0 mb-0">
                        <span t-field="sponsor.name" class="text-break fs-6 mb-2"/>
                        <span t-if="sponsor.is_in_opening_hours" class="alert alert-danger mb-2 px-2 py-1 smaller lh-1">
                            Live
                        </span>
                    </h5>
                    <!-- Catchy sentence -->
                    <span class="text-muted" t-out="sponsor.subtitle"/>
                </main>
            </div>
        </div>
        <div class="o_wesponsor_connect_button"
            t-att-data-sponsor-url="sponsor.website_url"
            t-att-data-is-participating="event.is_participating"
            t-att-data-sponsor-id="sponsor.id"
            t-att-data-event-is-ongoing="sponsor.event_id.is_ongoing"
            t-att-data-sponsor-is-ongoing="sponsor.is_in_opening_hours"
            t-att-data-user-event-manager="is_event_user">
            <a href="#" class="btn btn-primary h3">
                <t t-if="sponsor.exhibitor_type != 'online'">
                    More info
                </t>
                <t t-else="">Connect</t>
            </a>
        </div>
    </article>
</template>

<!-- Searched terms -->
<template id="exhibitors_search" name="Exhibitors: search terms">
    <div class="d-flex flex-wrap align-items-center mb-3">
        <t t-foreach="search_countries" t-as="country">
            <span class="o_search_tag d-flex align-items-baseline ps-2 my-2 me-2 border rounded bg-white">
                <i class="fa fa-tag me-2 text-muted"/>
                <t t-esc="country.display_name"/>
                <span t-att-data-post="'/event/%s/exhibitors?%s' % (
                    slug(event),
                    keep_query('*', countries=str((search_countries - country).ids)))"
                    class="post_link cursor-pointer btn border-0 py-1 px-2">&#215;</span>
            </span>
        </t>
        <t t-foreach="search_sponsorships" t-as="sponsorship">
            <span class="o_search_tag d-flex align-items-baseline ps-2 my-2 me-2 border rounded bg-white">
                <i class="fa fa-tag me-2 text-muted"/>
                <t t-esc="sponsorship.display_name"/>
                <span t-att-data-post="'/event/%s/exhibitors?%s' % (
                    slug(event),
                    keep_query('*', sponsorships=str((search_sponsorships - sponsorship).ids)))"
                    class="post_link cursor-pointer btn border-0 py-1 px-2">&#215;</span>
            </span>
        </t>
    </div>
</template>

</odoo>
