{% extends "jinja/types/page.html" %}

{% set title %}{{ page.get_title() }}{% endset %}

{% block content %}
    <div class="row text-center">
        <h1 class="text-primary display-1">
            {{ page.get_title() }}
        </h1>
    </div>

    {%  for row in page.get_content() %}
        <div class="row pb-3">
            <div class="col-sm-8 text-center {{ loop.cycle('order-first','order-last') }}">
                <p class="text-secondary lead">
                    {{ page.get_content()[row]['content'] }}
                </p>
            </div>
            
            <div class="col-sm-4 {{ loop.cycle('order-last','order-first') }}"> 
                <picture>
                    {% for img in page.get_content()[row]['images'] %}
                        {% if not loop.last %}
                            <source srcset="{{ url_for('static', filename=img) }}"
                                    media="(max-width: {{ config.IMG_BREAKPOINTS[loop.index] }})" />
                        {% else %}
                            <source srcset="{{ url_for('static', filename=img) }}"
                                    media="(min-width: {{ config.IMG_BREAKPOINTS[loop.index] }})" />
                        {% endif %}
                    {% endfor %}

                    <img class="img-fluid"
                            src="{{ url_for('static', filename=page.get_content()[row]['images'][1]) }}">
                </picture>
            </div>
        </div>
    {% endfor %}
{% endblock %}