{% extends 'sites/template-' ~ site.template.id ~ '/base.html.twig' %}

{% block title %}{{site.name}} | {{ site.pricing.seoTitle }}{% endblock %}
{% block description %}{{ site.pricing.seoDescription }}{% endblock %}

{% block pricingActive %}active{% endblock %}

{% block body %}

    {% if site.home.mainPicture is defined and site.home.mainPicture is not null %}
        <section class="page-header parallax page-header-text-light page-header-crumbs-light-2 overlay overlay-color-dark overlay-show overlay-op-3 py-0" data-plugin-parallax data-plugin-options="{'speed': 1.5}" data-image-src="{{ vich_uploader_asset(site.home, 'mainPictureFile') | imagine_filter('main_picture') }}">
    {% else %}
        <section class="page-header parallax page-header-text-light page-header-crumbs-light-2 overlay overlay-color-dark overlay-show overlay-op-3 py-0" data-plugin-parallax data-plugin-options="{'speed': 1.5}" data-image-src="{{ asset('templates/template-1/assets/img/slider/sample.jpg') }}">
    {% endif %}
        <div class="container py-9">
            <div class="row text-left">
                <div class="col-lg-12">
                    <p class="v-smash-text-large-2x">Tarif</p>
                </div>
            </div>
        </div>
    </section>

    <div class="v-page-wrap no-top-spacing no-bottom-spacing">
        <div class="container">
            <div class="col-md-12">
                {% if categories|length > 0 and products|length > 0 %}
                    {% for category in categories %}
                        <h3 class="v-heading v-text-heading"><span>{{ category.name }}</span></h3>
                        <p>
                            {{ category.description }}
                        </p>
                        <ul>
                            {% for product in products %}
                            {% if product.category.id is defined and product.category.id == category.id %}
                                <li>
                                    <div class="row">
                                        <div class="col-md-10 text-left">{{ product.name }}</div>
                                        <div class="col-md-2 text-right">{{ product.price }} {{ product.currency }}</div>
                                    </div>
                                </li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
        <div class="container">
            {{ site.pricing.content|raw }}
        </div>
    </div>
{% endblock %}