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

{% set title %}Services{% endset %}

{% block content %}
<div class="row text-center pb-2">
    <h1 class="text-primary display-1">
        Services & Pricing
    </h1>
</div>

<div class="row">
    <h2 class="text-secondary display-2">
        Primary services:
    </h2>
</div>

<div class="row pt-2 pb-4">
    {% for service in config.SERVICES.items() %}
        <div class="col-4">
            <div class="card">
                <picture>
                    {% for img in service[1][0] %}
                        {% if not loop.last %}
                            <source srcset="{{ img }}"
                                    media="(max-width: {{ config.IMG_BREAKPOINTS[loop.index] }})" />
                        {% else %}
                            <source srcset="{{ img }}"
                                    media="(min-width: {{ config.IMG_BREAKPOINTS[loop.index] }})" />
                        {% endif %}
                    {% endfor %}

                    <img class="img-fluid card-img-top"
                         src="{{ service[1][0][1] }}">
                </picture>
                <div class="card-body">
                    <h1 class="card-title text-center text-primary">{{ service[0] }}</h1>

                    <hr>

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

                    <hr class="invisible">

                    <p class="text-secondary">
                        {{ service[1][2] }}

                        <ul>
                            {% for included in service[1][3] %}
                                <li>{{ included }}</li>    
                            {% endfor %}
                        </ul>
                    </p>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<div class="row">
    <h2 class="text-secondary">
        Add-on services:
    </h2>
</div>

<div class="row pt-2 pb-4">
    {% for service in config.SERVICES.items() %}
        <div class="col-4">
            <div class="card">
                <picture>
                    {% for img in service[1][0] %}
                        {% if not loop.last %}
                            <source srcset="{{ img }}"
                                    media="(max-width: {{ config.IMG_BREAKPOINTS[loop.index] }})" />
                        {% else %}
                            <source srcset="{{ img }}"
                                    media="(min-width: {{ config.IMG_BREAKPOINTS[loop.index] }})" />
                        {% endif %}
                    {% endfor %}

                    <img class="img-fluid" class="card-img-top"
                            src="{{ service[1][0][1] }}"
                            alt="Woman walking dog">
                </picture>
                <div class="card-body">
                    <h1 class="card-title text-center text-primary">{{ service[0] }}</h1>

                    <hr>

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

                    <hr class="invisible">

                    <p class="text-secondary">
                        {{ service[1][2] }}

                        <ul>
                            {% for included in service[1][3] %}
                                <li>{{ included }}</li>    
                            {% endfor %}
                        </ul>
                    </p>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

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