{% extends 'base.html.twig' %}

{% block title %} {{ 'menu.chequecadeauxabonnment'|trans }} {% endblock %}
{% block description %} {{ 'cadeaux.metadescription'|trans }} {% endblock %}

{% block body %}

    {% include "front/inc/breadcrumb.html.twig" with 
        {
            'content_title': 'menu.chequecadeauxabonnment'|trans ,
            'current_page' : 'menu.chequecadeauxabonnment'|trans ,
            'image'        : ''
        } 
    %}
     
     <div class="cadeuxabonnement">
     
        {% if abonnements|length > 0 %}
        <section id="abonnement">
            <h1 class="text-3xl">{{ 'subscription.table.subscription'|trans }}</h1>
            <div class="grid-container">
                {% for item in abonnements %}
                    <a href="javascript:void()" data-id="{{item.id}}" class="subscription-card">
                        <div class="card-image-container">
                            {% if app.request.locale == 'fr' %}
                                <img src="{{ (item.image) ? sonata_path(item.image, 'images') : asset('front/images/spa-therapist-applying-massage-oil1.jpg') }}" alt="{{ item.name }}" height="289" width="424">
                            {% else %}
                                <img src="{{ (item.imageEn) ? sonata_path(item.imageEn, 'images') : asset('front/images/spa-therapist-applying-massage-oil1.jpg') }}" alt="{{ item.name }}" height="289" width="424">
                            {% endif %}
                        </div>
                        <div class="card-content">
                            <div class="card-header">
                                <p class="card-title">{{ item.name }}</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span class="card-price">{{ item.prix }} DH</span>
                            <span class="card-button reserver-btn button--ujarak">{{ 'index.acheter3'|trans }}</span>
                        </div> 
                    </a>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        <section id="cheque-cadeaux">
            <h1 class="text-3xl">{{ 'menu.chequecadeaux'|trans }}</h1>
            <div class="grid-container">
                <a href="{{ path('cheque-cadeaux_' ~ app.request.locale ,{'_locale' : app.request.locale , 'montant': 250}) }}" class="subscription-card">
                    <div class="card-image-container">
                        <img src="{{ asset('front/images/cheque_cadeau_250_' ~ app.request.locale ~ '.jpg') }}" alt="Massage relaxant" height="289" width="424">
                    </div>
                    <div class="card-content">
                        <div class="card-header">
                            <p class="card-title">{{ 'menu.chequecadeaux'|trans }}</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <span class="card-price">250DH</span>
                        <span class="card-button reserver-btn button--ujarak">{{ 'index.acheter3'|trans }}</span>
                    </div>
                </a>

                <a href="{{ path('cheque-cadeaux_' ~ app.request.locale ,{'_locale' : app.request.locale , 'montant': 500 }) }}" class="subscription-card">
                    <div class="card-image-container">
                      <img src="{{ asset('front/images/cheque_cadeau_500_' ~ app.request.locale ~ '.jpg') }}" alt="Massage relaxant" height="289" width="424">
                    </div>
                    <div class="card-content">
                        <div class="card-header">
                            <p class="card-title">{{ 'menu.chequecadeaux'|trans }}</p>
                        
                        </div>
                    </div>
                    <div class="card-footer">
                        <span class="card-price">500DH</span>
                        <span class="card-button reserver-btn button--ujarak">{{ 'index.acheter3'|trans }}</span>
                    </div>
                </a>

                <a href="{{ path('cheque-cadeaux_' ~ app.request.locale ,{'_locale' : app.request.locale , 'montant': 1000}) }}" class="subscription-card">
                    <div class="card-image-container">
                      <img src="{{ asset('front/images/cheque_cadeau_1000_' ~ app.request.locale ~ '.jpg') }}" alt="Massage relaxant" height="289" width="424">
                    </div>
                    <div class="card-content">
                        <div class="card-header">
                            <h3 class="card-title">{{ 'menu.chequecadeaux'|trans }}</h3>
                           
                        </div>
                    </div>
                    <div class="card-footer">
                        <span class="card-price">1000DH</span>
                        <span class="card-button reserver-btn button--ujarak">{{ 'index.acheter3'|trans }}</span>
                    </div>
                </a>

                <a href="{{ path('cheque-cadeaux_' ~ app.request.locale ,{'_locale' : app.request.locale , 'montant': 2000}) }}" class="subscription-card">
                    <div class="card-image-container">
                      <img src="{{ asset('front/images/cheque_cadeau_2000_' ~ app.request.locale ~ '.jpg') }}" alt="Massage relaxant" height="289" width="424">
                    </div>
                    <div class="card-content">
                        <div class="card-header">
                            <h3 class="card-title">{{ 'menu.chequecadeaux'|trans }}</h3>
                           
                        </div>
                    </div>
                    <div class="card-footer">
                        <span class="card-price">2000DH</span>
                        <span class="card-button reserver-btn button--ujarak">{{ 'index.acheter3'|trans }}</span>
                    </div>
                </a>

                <a href="{{ path('cheque-cadeaux_' ~ app.request.locale ,{'_locale' : app.request.locale , 'montant': 'custom'}) }}" class="subscription-card">
                    <div class="card-image-container">
                      <img src="{{ asset('front/images/cheque_cadeau_custom_' ~ app.request.locale ~ '.jpg') }}" alt="Massage relaxant" height="289" width="424">
                    </div>
                    <div class="card-content">
                        <div class="card-header">
                            <h3 class="card-title">{{ 'menu.chequecadeaux'|trans }}</h3>
                           
                        </div>
                    </div>
                    <div class="card-footer">
                        <span class="card-price">{{ 'abonnement.custommontant'|trans }}</span>
                        <span class="card-button reserver-btn button--ujarak">{{ 'index.acheter3'|trans }}</span>
                    </div>
                </a>

            </div>
        </section>
     </div>

{% endblock %}