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

{% block title %}Vos récompenses{% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block body %}
    
    {{ include("base/ban-customer.html.twig", {name_page: "Vos récompenses"}) }}

    {% if listRewards|length > 0 %}

        <div class="row col-12">

            {% for reward in listRewards %}

                <div class="col-lg-3 mb-5" >
                    <div class="card ">
                        {% if reward.id in rewardsUser %}
                            <center>
                                <img class="card-img-top" src="{{ reward.image }}" alt="{{ reward.title }}" />
                            </center>
                            <div class="card-body">
                                <hr />
                                <h5 class="card-title">{{ reward.title }}</h5>
                                <p class="card-text">{{ reward.description }}</p>
                            </div>
                        {% else %}
                            <center>
                                <img class="card-img-top" src="{{ reward.defaultImage }}" alt="{{ reward.title }}" style="" />
                            </center>
                            <div class="card-body">
                                <hr />
                                <h5 class="card-title" style="color:gray;">{{ reward.title }}</h5>
                                <p class="card-text" style="color:gray;font-style:italic;">{{ reward.description }}</p>
                            </div>
                        {% endif %}
                        
                    </div>
                </div>

            {% endfor %}

        </div>

    {% else %}

        <div class="text-center pb-2">
            <p>
                Les récompenses ne sont pas encore disponibles.<br />
            </p>
        </div>

    {% endif %}

{% endblock %}