{% extends "base.html" %}

{% load wagtailmetadata_tags wagtailcore_tags %}

{% block body_class %}{{ page.body_class }}{% endblock %}

{% block title %}{{ page.html_title_tag }}{% endblock %}

{% block extra_head %}
  {% meta_tags %}
{% endblock %}

{% block main_content %}
  {% if page.hero_image_url %}
    <picture>
      {% for width, image_url in page.hero_image_urls.items reversed %}<source srcset="{{ image_url }}" media="(max-width: {{ width }}px)" />{% endfor %}

      <img class="hero" src="{{ page.hero_image_url }}" decoding="async" alt="" />
    </picture>
  {% endif %}

  {% if page.get_view_restrictions.exists %}
    <section class="notification is-danger" id="view-restriction-banner">
      <strong>Note</strong>: This page has a view restriction. Please do not share its content until the page is public or this message is removed.
    </section>
  {% endif %}

  <section class="hero">
    <div class="container">
      <div class="hero-body">
        <div class="columns">
          <div class="column">
            {% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
            <h1 class="title is-spaced">{{ page.hero_title }}</h1>
            {% if page.subtitle %}<h2 class="subtitle is-size-4">{{ page.subtitle|richtext }}</h2>{% endif %}

            {% include "common/content-details.html" %}
          </div>
          <div class="column is-narrow dropdown-wrapper hero-buttons is-grouped">
            {% block hero_buttons %}
              {% if page.show_table_of_contents %}
                <div class="dropdown is-hoverable is-right" id="table-of-contents">
                  <div class="dropdown-trigger">
                    <button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu">
                      <span>Table of Contents</span>
                      <span class="icon is-small">
                        <i class="fas fa-angle-down" aria-hidden="true"></i>
                      </span>
                    </button>
                  </div>
                  <div class="dropdown-menu" id="toc-menu" role="menu">
                    <div class="dropdown-content menu">
                      <ul class="menu-list">
                        {% for toc_item in page.table_of_contents %}
                          {% include "common/toc-item.html" %}
                        {% endfor %}
                      </ul>
                    </div>
                  </div>
                </div>
              {% endif %}

              <button class="button is-radiusless scroll-top">
                Top <i class="fas fa-angle-up ml-2" aria-hidden="true"></i>
              </button>
            {% endblock %}
          </div>
        </div>
      </div>
    </div>

    <div class="scroll-indicator-container">
      <div id="scroll-indicator"></div>
    </div>
  </section>

  {% block pre_content %}{% endblock %}
  {% block content %}{% endblock %}
  {% block post_content %}{% endblock %}
{% endblock %}