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

{% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}

{% block main_content %}
<main id="content">
    <h1 class="visually-hidden">Welcome to the <abbr title="Internet Engineering Task Force">IETF</abbr></h1>
    <!--  Jumbotron -->
    {% image self.main_image max-4000x4000 as bg_image %}
    <section class="jumbotron text-white home_page__jumbotron"
        style="background-image: url({% if bg_image.url %}{{ bg_image.url }}{% else %}{% static 'img/group-01.jpg' %}{% endif %});">
        <div class="container position-relative">
            <h2 class="h1">{{ self.heading }}</h2>
            <p class="lead">{{ self.introduction }}</p>
            {% if self.button_link %}
                <p>
                    <a href="{{ self.button_link.url }}"
                        class="btn btn-outline-primary text-white my-2">{{ self.button_text }}</a>
                </p>
            {% endif %}
        </div>
    </section>

    <!-- Events - What's new -->
    <div class="container">
        <div class="row">
            <section class="col-md-6 mb-5">
                <h2 class="mb-4">Upcoming events</h2>
                <ul class="list-unstyled">
                    {% with self.upcoming_events.0 as event %}
                        {% if event %}
                            {% include "includes/home_event.html" %}
                        {% endif %}
                    {% endwith %}
                    {% with self.upcoming_events.1 as event %}
                        {% if event %}
                            {% include "includes/home_event.html" %}
                        {% endif %}
                    {% endwith %}
                </ul>
                <a class="btn btn-outline-primary" href="{{ self.event_index.url }}">All events</a>
            </section>
            <section class="col-md-6">
                <h2 class="mb-4">What's new?</h2>
                <ul class="list-unstyled">
                    {% for blog in self.blogs %}
                        <li class="card mb-2">
                            <div class="card-body">
                                <h3 class="h5">
                                    <a class="stretched-link" href="{{ blog.url }}">
                                        {{ blog.title }}<i class="bi bi-chevron-right ms-2"></i>
                                    </a>
                                </h3>
                                <p class="card-text">{{ blog.get_social_text }}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="border-start border-secondary ps-2">
                                        <span>{{ blog.author.name }}</span>
                                        <span>{{ blog.author.title }}</span>
                                        <span>{{ blog.date|date:"DATE_FORMAT" }}</span>
                                    </small>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
                <a class="btn btn-outline-primary" href="{{ self.blog_index.url }}">All news</a>
            </section>
        </div>
    </div>
    <hr class="border-primary mb-4" />

    <!-- Search archives-->
    <div class="container mb-4">
        <div class="row">
            <div class="col-lg-7">
                <h2>Search the IETF email archive</h2>
                <p>
                    Much of the daily work of the IETF is conducted on electronic mailing
                    lists. A new mail archive tool
                    realizing the requirements developed in
                    <a href="https://datatracker.ietf.org/doc/rfc6778/">RFC 6778</a>
                    is now in use:
                </p>
                <form
                    class="input-group mt-3 mb-3"
                    action="https://mailarchive.ietf.org/arch/search/"
                    method="GET"
                    target="_blank"
                >
                    <input
                        id="search-email-box"
                        type="search"
                        class="form-control"
                        placeholder="Search the email archive"
                        aria-label="Search the email archive"
                        name="q"
                        required
                    />
                    <button type="submit" class="btn btn-primary" aria-label="Submit email archive search">Go</button>
                </form>
            </div>
            <div class="col-lg-5">
                <h2>Search IETF Datatracker</h2>
                <p>
                    The IETF Datatracker contains data about IETF documents, working groups, meetings, agendas, minutes,
                    presentations, and more:
                </p>
                <form
                    class="input-group mt-3 mb-3"
                    action="https://datatracker.ietf.org/doc/search/"
                    method="GET"
                    target="_blank"
                >
                    <input
                        id="search-datatracker-box"
                        type="search"
                        class="form-control"
                        placeholder="Search datatracker"
                        aria-label="Search IETF Datatracker"
                        name="name"
                        required
                    />
                    <button type="submit" class="btn btn-primary" aria-label="Submit IETF datatracker search">Go</button>
                    <input type="hidden" name="rfcs" value="on" />
                    <input type="hidden" name="activedrafts" value="on" />
                    <input type="hidden" name="by" value="group" />
                </form>
            </div>
        </div>
    </div>
    <hr class="border-primary mb-4" />

    <section class="bg-primary text-light">
        <div class="container py-5 home_page__cta-container">
            <div class="home_page__cta-container__background">
                <i class="bi bi-send"></i>
            </div>
            {{ self.call_to_action.render }}
        </div>
    </section>
</main>
{% endblock main_content %}