{% extends "patterns/base_page.html" %}
{% load wagtailcore_tags wagtailimages_tags navigation_tags static %}

{% block theme_class %}theme--dark--transparent{% endblock %}

{% block header %}
    {% include "patterns/atoms/skip-link/skip-link.html" %}
    {% include "patterns/organisms/header/header.html" %}
    {% include "patterns/atoms/menu-button/menu-button.html" %}
    {% include "patterns/molecules/navigation/mobile-nav.html" %}
{% endblock %}

{% block content %}
    <div class="home">
        {# Hero #}
        <div class="home__hero">
            <div class="home__contents home__contents--top">
                <div class="home__content-align">
                    {# Heading desktop #}
                    {% if page.hero_intro_primary or page.hero_intro_secondary %}
                        <h1 class="home__heading home__heading--desktop"><span>{{ page.hero_intro_primary }}</span> {{ page.hero_intro_secondary }}</h1>
                    {% endif %}
                </div>

                {# Shards SVG window + images #}
                <div class="shards" data-shards-hero data-imagetotal="{{ hero_images|length }}">
                    <div class="shards__wrapper">
                        <svg class="shards__window" aria-hidden="true">
                            <use class="shards__window--desktop" xlink:href="#shards-window-desktop"/>
                            <use class="shards__window--mobile" xlink:href="#shards-window-mobile"/>
                        </svg>
                        {% comment %} The FE implemenetation optimises image loading by ensuring that only the required image is loaded by the browser {% endcomment %}
                        {% for hero_image in hero_images %}
                            {% image hero_image.image fill-1022x576 as hero_image %}
                            <div data-shards-image class="shards__image" style="background-image:url({{ hero_image.url }})"></div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            {# Heading tablet + mobile #}
            {% if page.hero_intro_primary or page.hero_intro_secondary %}
                <div class="home__content-align">
                    <h1 class="home__heading home__heading--mobile"><span>{{ page.hero_intro_primary }}</span> {{ page.hero_intro_secondary }}</h1>
                </div>
            {% endif %}

            <div class="home__contents">
                <nav class="primary-nav primary-nav--home" aria-label="Main navigation">
                    <ul class="primary-nav__list">
                        {% primarynav is_home=True is_desktop=True %}
                    </ul>
                </nav>
            </div>
        </div>

        {# 3 posts/case studies #}
        <div class="home__contents">
            {% if page.featured_posts.all %}
                <div class="home__content-align">
                    <ul class="posts-grid">
                        {% for featured_post in page.featured_posts.all %}
                            {% with post=featured_post.featured_post.specific %}
                                <li class="post">
                                    <h2 class="post__title">
                                        <a class="post__link" href="{% pageurl post %}">{{ post.title }}</a>
                                    </h2>
                                    <p class="post__author">{{ post.first_author }}</p>
                                    <p class="post__meta">{{ post.type }}</p>
                                </li>
                            {% endwith %}
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}