{% 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

        {% block wrapper_sizing_classes %}xl:pt-48 xl:pb-24{% endblock %}

        {% block extra_classes %}{% endblock %}

        {% if background_image %}
          {% if not show_transparent_header %}bg-[#00000088]{% endif %}
          
          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">
      {% block content_container %}
        <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>
      {% endblock %}
    </div>
  </div>

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