{% extends 'base.html.twig' %}
{% block title %}Carte cadeau{% endblock %}
{% block stylesheets %}
    <style>
        body.gift_check {
            height: 100%;
        }
        body.gift_check h1 {
            color: black;
            text-align: center;
        }

        body.gift_check .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            flex-direction: column;
            max-width: 60%;
            margin: 0 auto;
            padding: 60px 0;
            background-color: #f6f6f6;
            box-shadow: 0px 0px 33px 1px rgba(0,0,0,0.2);
        }



        body.gift_check header
        {
            height: unset;
            min-height: unset;
        }


        body.gift_check .gift-infos p {
            font-size: 1.3rem;
            text-align: center;
        }

        body.gift_check .gift-message {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        body.gift_check .gift-message p {
            font-weight: 400;
            font-size: 3rem;
        }

        body.gift_check form {
            width: 25%;
        }

        body.gift_check .gift-form {

            display: flex;
            justify-content: center;
            align-content: center;
            flex-wrap: nowrap;
            flex-direction: column;
        }

        body.gift_check .gift-form input {
            text-align: center;
        }

        body.gift_check .gift-form-label {
            font-size: 1.5rem;
            text-align: center;
        }

        body.gift_check .gift-send {
            text-align: center;
            margin: 0 auto;
            padding: 15px;
            border: 1px solid black;
            border-radius: 10px;
            cursor: pointer;
        }

        body.gift_check .gift-send:hover {
            background-color: black;
            color: white;
        }

        @media screen and (max-width: 600px)
        {
            body.gift_check .container {
                max-width: 90%;
            }
            body.gift_check form {
                width: 50%;
            }
            body.gift_check .gift-message p {
                margin: 0 20px;
                font-weight: 400;
                font-size: 2rem;
            }
        }

    </style>
{% endblock %}
{% block content %}
    <div class="container">
        {% if message is defined %}
            <div class="gift-message">
                <p>{{ message }}</p>
                {% if gift is defined and gift.usedAt is not null %}
                    <p>Cette carte a été validée le : {{ gift.usedAt|format_date(locale=app.request.locale) }}</p>
                {% endif %}
                {% if gift is defined and gift.usedAt is null and "now"|format_date(locale=app.request.locale) > gift.validUntilDate|format_date(locale=app.request.locale) %}
                    <p>Cette carte a expirée le : {{ gift.validUntilDate|format_date(locale=app.request.locale) }}</p>
                {% endif %}
            </div>
        {% endif %}
        {% if gift is defined %}
            <div class="gift-infos">
                <h1>{{ gift.cartItem.variant.product.name }}</h1>
                <p>Carte cadeau d'une valeur de {{ gift.cartItem.price/100 }}€</p>
                <p>Valide jusqu'au : {{ gift.validUntilDate|format_date(locale=app.request.locale) }}</p>
            </div>
        {% endif %}
        {% if form is defined %}
            {{ form_start(form) }}
            <div class="gift-form">
                {{ form_widget(form) }}
                {{ form_rest(form) }}
                <button class="gift-send" type="submit">Envoyer</button>
            </div>
            {{ form_end(form) }}
        {% endif %}
    </div>
{% endblock %}