{% extends settings.utils.LayoutSettings.base_template %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block main_content %}
    <main class="no-overflow-x" id="content">
        {% image self.main_image max-4000x4000 as bg_image %}
        <div class="event_page__jumbotron" style="background-image: url({{ bg_image.url }});">
            <div class="container position-relative text-light pt-3 pb-4">
                {% include 'includes/breadcrumbs.html' with dark_bg=True %}

                <h1>{{ self.title }}</h1>

                {% if self.start_date %}
                    <p class="h4 fst-italic">{{ self.start_date }}{% if self.end_date %} - {{ self.end_date }}{% endif %}</p>
                {% endif %}

                <p class="lead fw-normal u-max-text-width">{{ self.introduction }}</p>
            </div>
        </div>

        <div class="container">
            <div class="row g-0 align-items-stretch justify-content-between">

                <div class="col-12 col-lg-8 col-xl-9">
                {% if self.body %}
                    <div class="border-bottom border-primary py-4 px-3">
                        <div class="u-max-text-width">
                            {{ self.body }}
                        </div>
                    </div>
                {% endif %}

                {% if self.key_details %}
                    <div class="border-bottom border-primary p-3">
                        <h2 class="h4">Key details</h2>
                        <div class="row">
                            <div class="col-12 col-lg-6">
                                {% for link_group in self.key_details %}
                                    {% if forloop.counter0|divisibleby:2 %}
                                        {% include "includes/key_detail_section.html" with link_group=link_group expanded=self.key_details_expanded %}
                                    {% endif %}
                                {% endfor %}
                            </div>

                            <div class="col-12 col-lg-6">
                                    {% for link_group in self.key_details %}
                                        {% if not forloop.counter0|divisibleby:2 %}
                                            {% include "includes/key_detail_section.html" with link_group=link_group expanded=self.key_details_expanded %}
                                        {% endif %}
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                {% endif %}


                {% if self.venue %}
                    <div class="border-bottom border-primary p-3">
                        {% if self.venue_section_title %}
                            <h2 class="h4">{{ self.venue_section_title }}</h2>
                        {% endif %}
                        <dl class="row">
                            {% if self.venue %}
                                <div class="col-12 col-lg-6">
                                    <dt class="h5 fw-bolder">Venue</dt>
                                    <dd>{{ self.venue }}</dd>
                                </div>
                            {% endif %}
                            {% if self.room_rates %}
                                <div class="col-12 col-lg-6">
                                    <dt class="h5 fw-bolder">Room rates</dt>
                                    <dd>{{ self.room_rates }}</dd>
                                </div>
                            {% endif %}
                            {% if self.extras %}
                                <div class="col-12 col-lg-6">
                                    <dt class="h5 fw-bolder">Extras</dt>
                                    <dd>{{ self.extras }}</dd>
                                </div>
                            {% endif %}
                            {% if self.reservations_open %}
                                <div class="col-12 col-lg-6">
                                    <dt class="h5 fw-bolder">Reservations open</dt>
                                    <dd>{{ self.reservations_open }}</dd>
                                </div>
                            {% endif %}
                            {% if self.reservation_name %}
                                <div class="col-12 col-lg-6">
                                    <dt class="h5 fw-bolder">Reservation name</dt>
                                    <dd>{{ self.reservation_name }}</dd>
                                </div>
                            {% endif %}
                            {% if self.contact_details %}
                                <div class="col-12 col-lg-6">
                                    <dt class="h5 fw-bolder">Contact details</dt>
                                    <dd>{{ self.contact_details }}</dd>
                                </div>
                            {% endif %}
                        </dl>
                    </div>
                {% endif %}

                {% if self.hosts.exists or self.sponsors %}
                    <div class="bg-white py-3">
                    <h2 class="h4 ps-3">Sponsors</h2>
                        {% if self.hosts.exists %}
                            <div class="ps-3 py-3">
                                <h3 class="h5 mb-3">Host{{ self.hosts.all|pluralize }}</h3>

                                <ul class="list-unstyled">
                                    {% for h in self.hosts.all %}
                                        {% with h.host as host %}
                                            <li class="d-inline-block me-3">
                                                {% if host.link %}<a href="{{ host.link }}">{% endif %}
                                                    {% image host.logo max-200x149 as host_image %}
                                                    <img src="{{ host_image.url }}" width="{{ host_image.width }}"
                                                        height="{{ host_image.height }}"  alt="{{ host.title }}">
                                                {% if host.link %}</a>{% endif %}
                                            </li>
                                        {% endwith %}
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}
                        {% for sponsor_category in self.sponsors %}
                            <div class="border-top ps-3 py-3">
                                <h3 class="h5 mb-3">{{ sponsor_category.value.category_title }}</h3>
                                <ul class="list-unstyled">
                                    {% for sponsor in sponsor_category.value.sponsor_group %}
                                        <li class="d-inline-block me-3">
                                            {% if sponsor.value.link %}<a href="{{ sponsor.value.link }}">{% endif %}

                                            {% image sponsor.value.logo max-120x74 as sponsor_image %}
                                            <img src="{{ sponsor_image.url }}" width="{{ sponsor_image.width }}"
                                                height="{{ sponsor_image.height }}" alt="{{ sponsor.value.title }}">
                                            {% if sponsor.value.link %}</a>{% endif %}

                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
                </div>

                {% include "includes/row_siblings_in_section.html" with page=self class="p-3 p-lg-5 mb-4" %}
            </div>

        </div>
    </main>

{% endblock %}