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

<div class="row text-center">
    <h2 class="text-secondary display-3">
        Primary Services
    </h2>
</div>

<div class="row pt-2 pb-4">
{% for service in page.get_primary_service_cards() %}
    <div class="col-sm-4">
        <div class="card">
            <picture>
                {% for img in service.get_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.get_default_image()) }}">
            </picture>
            <div class="card-body">
                <h1 class="card-title text-center text-primary">{{ service.get_title() }}</h1>

                <hr>

                <h2 class="text-success text-center">
                    {{ service.get_price() }}
                </h2>

                <hr class="invisible">

                <p class="text-secondary">
                    Service includes:
                    <ul>
                        {% for included in service.get_included() %}
                            <li>{{ included }}</li>    
                        {% endfor %}
                    </ul>
                </p>
            </div>
        </div>
    </div>
{% endfor %}

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