{% 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>

    <div class="d-grid gap-3">
    {%  for section in page.get_content() %}
        <div class="card border-0 d-flex rounded-1 bg-dark">
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-8 {{ loop.cycle('order-first','order-last') }}">
                        <div class="card-text text-light text-center lead">
                            {{ section['content']|safe }}
                        </div>
                    </div>
                
                    <div class="col-sm-4 {{ loop.cycle('order-last','order-first') }}"> 
                        <div class="card-img"> 
                            <picture>
                                {% for img in section['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 rounded-1"
                                        src="{{ url_for('static', filename=section['images'][1]) }}">
                            </picture>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
{% endblock %}