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

{% block main_content %}

    <main id="content">
        <div class="bg-white border-bottom">
            <div class="container pb-1">
                {% include 'includes/breadcrumbs.html' %}
                {% include 'includes/optional-introduction.html' with value=self %}
            </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 pt-3 pt-lg-3 pe-lg-3">
                    <div class="u-max-text-width pb-4">
                        <div class="mb-4">
                        {% for key in glossary_items.keys %}
                        <a class="text-dark" href="#{{key|upper}}">{{key|upper}}</a>&nbsp;&nbsp;
                        {% endfor %}
                    </div>
                        <div class="row mb-4">
                            <div class="col-md-8 col-lg-6">
                                <form class="input-group" action="{{ self.url }}" method="get" name="glossary-search">
                                    <input id="glossary-search" class="form-control" type="text"
                                        placeholder="Find a glossary entry" aria-label="Glossary search" name="query" {% if search_query %}
                                        value="{{ search_query }}" {% endif %} />
                                    <button class="btn btn-primary" type="submit" aria-label="Submit glossary search">Go</button>
                                </form>
                            </div>
                        </div>

                        <h2 class="visually-hidden">Glossary items{% if search_query %} matching "{{ search_query }}"{% endif %}</h2>
                        {% for key, items in glossary_items.items %}
                            <h2 class="pt-3" id="{{key|upper}}">{{key|upper}}</h4>
                            <hr class="mt-0 mb-4"/>
                            {% for glossary_item in items %}
                                <div class="mb-4">
                                    {% if glossary_item.link %}<a href="{{ glossary_item.link }}">{% endif %}
                                        <h3 class="h5 mb-2">{{ glossary_item.title }}</h3>
                                        {% if glossary_item.link %}</a>{% endif %}
                                    {{ glossary_item.body|richtext }}
                                </div>
                                {% empty %}
                                <p>No results found for <strong>{{ search_query }}</strong></p>
                            {% endfor %}
                        {% endfor %}

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

        </div>
    </main>

{% endblock %}