{% load wagtailimages_tags %}

{% if show_scroll_progress %}
  <div class="__js-root">
    <ui-scroll-indicator></ui-scroll-indicator>
  </div>
{% endif %}

<header
  class="
    flex flex-col z-100 relative

    {% block header_margin_class %}
      mb-20
    {% endblock %}
  "
>
  <div
    class="
      __simple-header

      {% block classes %}
        flex items-center w-full pt-28 pb-8

        xl:pt-48 xl:pb-24

        {% block extra_classes %}{% endblock %}

        {% if background_image %}
          bg-[#00000088] bg-no-repeat bg-cover bg-center bg-blend-darken bg-[top_right_-7rem]
        {% else %}
          bg-black
        {% endif %}
      {% endblock %}
    "

    {% if background_image %}
      {% if not background_image.url %}
        {% image background_image fill-1920x1080 as background_image %}
      {% endif %}

      style="background-image:url('{{ background_image.url }}')"
    {% endif %}
  >
    <div class="flex justify-start w-full">
      <div class="container--wide w-full">
        {% block content %}
          <div class="text-white flex flex-col">
            {% block before_heading %}{% endblock %}

            {% block heading %}
              <h1
                class="
                  {% block heading_classes %}
                    mb-1

                    {% if is_short %}head-short{% endif %}

                    {% if description %}
                      {% if title|length <= 100 %}head-10xl{% else %}head-7xl{% endif %}
                    {% else %}
                      head-14xl
                    {% endif %}
                  {% endblock %}
                "
              >
                {{ title }}
              </h1>
            {% endblock %}

            {% block after_heading %}
              {% if sub_heading %}
                <h2
                  class="head-6xl"
                >{{ sub_heading }}</h2>
              {% endif %}
            {% endblock %}

            {% block description %}
              {% if description %}
                <p
                  class="
                    text-lg leading-7 pr-4 whitespace-pre-line

                    xl:pr-0

                    lg:max-w-screen-lg

                    {% block description_classes %}{% endblock %}
                  "
                >{{ description }}</p>
              {% endif %}
            {% endblock %}

            {% block after_description %}{% endblock %}
          </div>
        {% endblock %}
      </div>
    </div>
  </div>

  {% block after_header %}{% endblock %}
</header>