{% load wagtailcore_tags wagtailimages_tags static %}

{% if page.hero_image %}
    {% image page.hero_image fill-571x700 as hero_image %}
{% endif %}
<div class="report-hero" {% if page.hero_image %}style="background-image:url({{ hero_image.url }})"{% endif %}>
    <div class="report-hero__container">
        <div class="report-hero__content">
            <h1 class="report-hero__title">{{ title|richtext }}</h1>
        </div>
        <nav class="report-in-page-nav report-in-page-nav--report" aria-label="In page navigation" data-in-page-nav>
            <div class="report-in-page-nav__inner">
                <div class="report-in-page-nav__header">
                    <a href="#" title="Back to top" class="report-in-page-nav__back-to-top">
                        <svg viewBox="0 0 130.37 156.35" aria-hidden="true" fill="var(--color--header-icon-color, #fd5765)" class="report-in-page-nav__logo"><path d="M129.64 82.82c-.2-1.59-2.3-1.96-3.08-.57-4.72 8.4-11.32 15.63-15.95 17.77l.03-.94C109.85 40.98 67.87 9.53 53.1.26c-1.39-.87-3.08.63-2.36 2.11 9.67 20.07 6.11 39.15-10.19 57.56-3.05 3.45-6.46 7.82-9.36 12.24v-.01s-3.48 5.06-6.84 12.09l-.16-.19c-6.73-10.16-8.2-22.44-8.47-29.08-.06-1.59-2.07-2.25-3-.95C8.53 59.86 1.31 71.61.24 84.57c-2.58 31.23 15.9 63.11 47.72 71.64 1.46.39 2.56-1.25 1.75-2.52-2.81-4.41-4.49-10.59-4.49-18.62 0-18.53 19.97-46.64 19.97-46.64s19.97 28.11 19.97 46.64c0 8.09-1.71 14.29-4.55 18.71-.81 1.26.27 2.9 1.73 2.52 30.86-7.96 45.44-36.5 47.64-53.99.78-7.79.24-14.95-.34-19.49z"></path></svg>
                        <span class="report-in-page-nav__title">
                            {{ title|richtext }}
                        </span>
                    </a>
                </div>
                <ul class="report-in-page-nav__container">
                    {% for heading in page.headings %}
                        <li class="report-in-page-nav__item">
                            <a class="report-in-page-nav__link" href="#{{ heading.slug }}">{{ heading.short_heading }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </nav>
    </div>
    <div class="sentinel" data-sticky-nav aria-hidden="true"></div>
</div>