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

{% block content %}

    {% image page.image fill-746x500 as hero_image %}

    {% include "patterns/molecules/hero/hero--proposition.html" with title=page.strapline desc=page.intro image=hero_image %}

    {# Service section #}
    <div class="proposition-section" id="{{ 'services' }}"data-service-section>

        <h2 class="proposition-section__anchor">Services</h2>

        {% if page.services_section_title %}
            <h3 class="proposition-section__title">
                {{ page.services_section_title }}
            </h3>
        {% endif %}

        {% if page.services_section_intro %}
            <div class="proposition-section__intro">
                {{ page.services_section_intro|richtext }}
            </div>
        {% endif %}

        {% include_block page.services_section_body %}
    </div>

    {# Our clients section #}
    <div class="proposition-section" id="{{ 'our-clients' }}" data-service-section>

        <h2 class="proposition-section__anchor">Our clients</h2>

        {% if page.clients_section_title %}
            <h3 class="proposition-section__title">
                {{ page.clients_section_title }}
            </h3>
        {% endif %}

        {% if page.clients_section_intro %}
            <div class="proposition-section__intro">
                {{ page.clients_section_intro|richtext }}
            </div>
        {% endif %}

        {% include_block page.clients_section_body %}
    </div>

    {# Team section #}
    {# add extra space below the team section if there is no body content added - common for the team section #}
    <div class="proposition-section {% if not page.team_section_body %}proposition-section--bottom-space{% endif %}" id="{{ 'our-team' }}" data-service-section>

        <h2 class="proposition-section__anchor">Our team</h2>

        {% if page.team_section_title %}
            <h3 class="proposition-section__title">
                {{ page.team_section_title|richtext }}
            </h3>
        {% endif %}

        {% if page.team_section_intro %}
            <div class="proposition-section__intro">
                {{ page.team_section_intro|richtext }}
            </div>
        {% endif %}

        {% include_block page.team_section_body %}
    </div>

    {# Our work section #}
    {% if page.our_work_section_body %}
        <div class="proposition-section" id="{{ 'work' }}" data-service-section>
            {# there is just one block allowed #}
            <h2 class="proposition-section__anchor">{{ page.our_work_section_body.0.value.title }}</h2>
        </div>
        {# work block sits outside the proposition-section wrapper as it is full-width #}
        {% include_block page.our_work_section_body with hide_title=True %}
    {% endif %}

    {# Our thinking section #}
    {% if page.our_thinking_section_body %}
        <div class="proposition-section" id="{{ 'thinking' }}" data-service-section>
            {# there is just one block allowed #}
            <h2 class="proposition-section__anchor">{{ page.our_thinking_section_body.0.value.title }}</h2>
        </div>
        {# our thinking block sits outside the proposition-secion wrapper as it has it's own left and right padding, and so the 'more' button aligns with the one under 'work' above #}
        {% include_block page.our_thinking_section_body with hide_title=True %}
    {% endif %}

{% endblock %}