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

{% block title %}Liste des exercices{% endblock %}

{% block titre_page %}Liste des exercices{% endblock %}
{% block resume_page %}Liste des exercices qu'on a fait, qu'on veut faire, qu'on va faire !{% endblock %}
{% block description_page %}
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="m-0">Filtres</h5>
                </div>
                <div class="card-body">
                <form class="row">
                    <div class="col-md-6">
                        <input type="text" id="description" name="description" maxlength="31"
                               class="form-control form-control-lg" placeholder="Nom, description, ...">
                    </div>
                    <div class="col-md-3">
                        <input type="text" id="temps" name="temps" maxlength="31" class="form-control form-control-lg"
                               placeholder="Durée">
                    </div>
                    <div class="col-md-3">
                        <input type="text" id="nombre" name="nombre" maxlength="31" class="form-control form-control-lg"
                               placeholder="Nombre à jouer">
                    </div>
                </form></div>
            </div>
        </div>
    </div>
    <div class="row">
        {% for exercise in exercises %}
            <div class="col-md-3 col-sm-4 mb-3 d-grid">
                <div class="card exercise-card">
                    <div class="card-header toolbar">
                        <div class="toolbar-start">
                            <h5 class="m-0">
                                {% set icon = constant('App\\Constants\\ExerciseType::' ~ exercise.type) %}
                                {% if icon.type == constant('App\\Constants\\IconType::IONICON') %}
                                    <ion-icon class="md hydrated" name="{{ icon.icon }}" role="img" aria-label="{{ icon.icon }}"
                                              data-bs-toggle="tooltip" data-bs-placement="top"
                                              data-bs-original-title="{{ icon.label }}"
                                    ></ion-icon>
                                {% endif %}
                                {% if icon.type == constant('App\\Constants\\IconType::THEMIFY') %}
                                    tests
                                {% endif %}
                                {{ exercise.name }}
                            </h5>
                        </div>
                        <div class="toolbar-end">
                            {% if exercise.nbJoueursMin != exercise.nbJoueursMax %}
                                <span class="badge bg-success">{{ exercise.nbJoueursMin ~ '-' ~ exercise.nbJoueursMax }} joueurs</span>
                            {% else %}
                                <span class="badge bg-success">{{ exercise.nbJoueursMin }} joueurs</span>
                            {% endif %}
                            {% if exercise.duration > 0 %}
                                <span class="badge bg-danger rounded-pill">{{ exercise.duration }} min.</span>
                            {% else %}
                                <span class="badge bg-danger rounded-pill">Pas de durée</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <p>{{ exercise.description | nl2br }}</p>
                        {% if exercise.variants | length > 0 %}
                            <p><span class="fw-bold">Variantes :</span>
                            <ul>
                                {% for variant in exercise.variants %}
                                    <li>{{ variant.name }}
                                        {% if variant.description %}
                                            &nbsp;:&nbsp; {{ variant.description }}
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                            </p>
                        {% endif %}
                    </div>
                    <div class="card-footer text-end">
                        <a href="#medias"
                           class="btn btn-icon btn-sm btn-link text-head px-2 py-0 like-button"
                           data-media-id="{{ exercise.id }}">
                            {% if app.user and exercise | like(app.user.id) %}
                                <i class="text-danger demo-psi-heart-2 fs-5 me-2 "></i>
                            {% else %}
                                <i class="text-muted demo-pli-heart-2 fs-5 me-2"></i>
                            {% endif %}
                            <span id="media{{ exercise.id }}_likes">{{ exercise.likes|length }}</span>
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}