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

{% block head_content %}
    {% include 'includes/optional-introduction.html' with value=self %}
{% endblock %}

{% block content %}
    <div class="bg-white">
        <div class="container">
            <ul class="row py-4 mb-0 list-unstyled">
                {% for promoted_event in self.promoted_events.all %}
                    <li class="card mb-2 border-0 col-12 col-lg-6 row flex-md-row g-0 align-items-stretch">
                        {% with promoted_event.promoted_event as event %}
                            <div class="col-md-4 h-md-auto">
                                {% image event.main_image height-245 as event_image %}
                                <img class="event_listing_page__promoted-image w-100 h-100 u-obj-cover" src="{{ event_image.url }}" alt="{{ event.main_image.title }}">
                            </div>
                            <div class="col-md-8 position-static">
                                <div class="card-body">
                            <h2 class="card-title h4"><a class="stretched-link" href="{{ event.url }}">{{ event.title }}<i class="bi bi-chevron-right ps-2"></i></a></h2>
                                    <p class="card-text">{{  event.introduction|truncatewords:30 }}</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small>
                                            {% if event.date %}
                                                <span>{{ event.date }}</span>
                                            {% endif %}
                                            <span>{{ event.listing_location }}</span>
                                            {% if event.host %}
                                                <span>{{ event.host.title }}</span>
                                            {% endif %}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        {% endwith %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    {% if self.upcoming_events %}
        <div class="border-primary border-top py-4 mt-0">
            <div class="container">
                    <h2 class="h4 mb-4">Upcoming events</h2>
                    <ul class="row list-unstyled">
                        {% for event in self.upcoming_events %}
                            <li class="col-12 col-md-6 col-lg-4">
                                <div class="bg-white p-4 position-relative">
                                    <h3 class="h5"><a class="stretched-link" href="{{ event.url }}">{{ event.title }}</a></h3>
                                    <small>
                                        {% if event.date %}
                                            <span>{{ event.date }}</span>
                                        {% endif %}
                                            <span>{{ event.listing_location }}</span>
                                        {% if event.host %}
                                            <span>{{ event.host.title }}</span>
                                        {% endif %}
                                    </small>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    {% endif %}

    {% if self.past_events %}
        <div class="border-primary border-top py-4 mt-0">
            <div class="container">
                <h2 class="h4 mb-4">Past events</h2>
                    <ul class="row list-unstyled">
                        {% for event in self.past_events|slice:":18" %}
                            <li class="col-12 col-md-6 col-lg-4 mb-4">
                                <div class="bg-white p-4 position-relative">
                                    <h3 class="h5"><a class="stretched-link" href="{{ event.url }}">{{ event.title }}</a></h3>
                                    <small>
                                        {% if event.date %}
                                            <span>{{ event.date }}</span>
                                        {% endif %}
                                            <span class="u-text-xs">{{ event.listing_location }}</span>
                                        {% if event.host %}
                                            <span>{{ event.host.title }}</span>
                                        {% endif %}
                                    </small>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}