{% extends "patterns/base_page.html" %}

{% load wagtailcore_tags wagtailimages_tags static %}
{% block theme_class %}theme--dark--transparent{% endblock %}

{% block content %}
    {% image page.hero_image width-1920 as hero_image %}

    <div class="careers">
        {# Hero #}
        <div class="careers__hero">
            {% include "patterns/molecules/hero/hero--full-screen.html" with background_url=hero_image.url classes="hero__full-screen--short hero__full-screen--image-overlay" %}
            {% include "patterns/molecules/title-block/title-block.html" with title=page.strapline classes="title-block--transparent title-block--careers" %}
        </div>

        <div class="careers__container careers__container--top">
            {# Intro #}
            {% if page.intro %}
                <div class="careers__rich-text">
                    {{ page.intro|richtext }}
                </div>
            {% endif %}

            {# Card links #}
            {% include "patterns/organisms/card-listing/card-listing.html" with card_items=page.links.all classes="card-listing--single" %}

            {# Sunday Times top 100 image #}
            <img src="{% static 'images/sunday-times-100-best-companies.jpg' %}" alt="Employees at the annual Torchfest event" loading="lazy">
        </div>

        {% if page.body %}
            {% include_block page.body %}
        {% endif %}

        {# Benefits list #}
        {% if page.benefits_section_title %}
            <div class="careers__container careers__container--middle">
                <h2 class="careers__title">{{ page.benefits_section_title }}</h2>
                <ul class="careers__benefits-list">
                    {% for item in page.key_benefits.all %}
                        {% include "patterns/molecules/list-item/list-item.html" with item=item %}
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        {# Standout list #}
        {% if standout_items %}
            {% include "patterns/organisms/related-content/related-content.html" with items=standout_items %}
        {% endif %}

        {% if page.blogs_section_title %}
            {% include "patterns/organisms/latest-posts/latest-posts.html" with classes="blog-listing--careers" blogs_section_heading=True filter_by=page.filter_by %}
        {% endif %}

        {# Card links #}
        <div class="careers__container careers__container--bottom">
            {% include "patterns/organisms/card-listing/card-listing.html" with card_items=page.links.all classes="card-listing--single" %}
        </div>

        {# Instagram gallery #}
        {% if page.instagram_posts %}
            <div class="instagram-gallery">
                {% for post in page.instagram_posts %}
                    {% include "patterns/atoms/instagram-post/instagram-post.html" %}
                {% endfor %}
            </div>
        {% endif %}

    </div>

{% endblock %}