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

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

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

<hr>

{% for section in page.get_content() %}
    <div class="row text-center">
        <h2 class="text-secondary display-3">
            {{ section }}
        </h2>
    </div>

    <div class="row pt-2 pb-4">
        {% for service in page.get_content()[section] %}
            <div class="col-4">
                <div class="card">
                    <picture>
                        {% for img in service['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 card-img-top"
                             src="{{ url_for('static', filename=service['images'][1]) }}">
                    </picture>
                    <div class="card-body">
                        <h1 class="card-title text-center text-primary">{{ service['title'] }}</h1>

                        <hr>

                        <h2 class="text-success text-center">
                            {{ service['price'] }}
                        </h2>

                        <hr class="invisible">

                        <p class="text-secondary">
                            Service includes:
                            <ul>
                                {% for included in service['included'] %}
                                    <li>{{ included }}</li>    
                                {% endfor %}
                            </ul>
                        </p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endfor %}

<div class="row">
    <div class="btn btn-primary">
        <a class="link-light" href="{{ url_for('forms.meet_and_greet') }}">
            Request meet & greet
        </a>
    </div>
</div>
{% endblock %}