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

{% block title %}Chevaux de l'élevage{% endblock %}
{% block navlink %}{{ navlink }}{% endblock %}

{% block body %}
    <h1 class="wrap text-light font-h text-center">{{ titre }}</h1>

    {% if is_granted('IS_AUTHENTICATED_FULLY') %}
    <div class="wrap text-right mh-4 ">
        <a class="button button-success" href="{{ path('app_horse_new') }}">
            <i class="fa-solid fa-circle-plus mr-1"></i> Enregistrer un nouveau cheval
        </a>
    </div>
    {% endif %}

    <div class="wrap d-grid">
        <button type="button" class="collapsible font-h">Filtres de recherche</button>
        <div class="collapsible-content">
            <form action="/cheval/recherche" class="pw-4 ph-3" method="post">
                <div class="search-form mb-3">
                    <div class="input-4">
                        <label for="idn">
                            Identifiant
                        </label></br>
                        <input 
                            id="nid" 
                            name="numeroid"
                            type="text"
                            class="ph-1" 
                            placeholder="NIN, UELN, etc." 
                        >
                    </div>

                    <div class="input-4">
                        <label for="nmch">
                            Nom
                        </label></br>
                        <input 
                            id="nmch" 
                            name="nomcheval"
                            type="text"
                            class="ph-1" 
                            placeholder="Nom complet ou partiel du cheval" 
                        >
                    </div>

                    <div class="input-4">
                        <label for="elv">
                            Éleveur
                        </label></br>
                        <input 
                            id="elv" 
                            name="eleveur"
                            type="text"
                            class="ph-1" 
                            placeholder="Nom ou initiales de l'éleveur"
                        >
                    </div>

                    <div class="input-3">
                        <label for="sex">
                            Sexe
                        </label></br>
                        <select id="sex" name="sexe" class="ph-1 select-input">
                            <option class="select-item" value=""></option>
                            <option class="select-item" value="M">Mâle</option>
                            <option class="select-item" value="F">Femelle</option>
                        </select>
                    </div>

                    <div class="input-3">
                        <label for="clr">
                            Couleur
                        </label></br>
                        <select id="clr" name="couleur" class="ph-1 select-input">
                            <option class="select-item" value="0"></option>
                            <option class="select-item" value="1">Alezan</option>
                            <option class="select-item" value="2">Bai</option>
                            <option class="select-item" value="3">Crème</option>
                            <option class="select-item" value="4">Dun</option>
                            <option class="select-item" value="5">Gris</option>
                            <option class="select-item" value="6">Isabelle</option>
                            <option class="select-item" value="7">Noir</option>
                            <option class="select-item" value="8">Palomino</option>
                            <option class="select-item" value="9">Rouan</option>
                        </select>
                    </div>

                    <div class="input-3">
                        <label for="age">
                            Âge
                        </label></br>
                        <div id="age" class="range-input">
                            <input id="agemin" name="ageminimum" type="number" min="0" step="1" placeholder="0" class="ph-1">
                            <span class="ph-1">à</span>
                            <input id="agemax" name="agemaximum" type="number" min="0" step="1" placeholder="100" class="ph-1">
                        </div>
                    </div>

                    <div class="input-3">
                        <label for="pts">
                            Ponctuation
                        </label></br>
                        <div id="pts" class="range-input">
                            <input id="ptsmin" name="pointsminimum" type="number" min="0.0" step="0.1" placeholder="0.0" class="ph-1">
                            <span class="ph-1">à</span>
                            <input id="ptsmax" name="pointsmaximum" type="number" min="0.0" step="0.1" placeholder="100.0" class="ph-1">
                        </div>
                    </div>

                    <div class="input-6">
                        <label for="opt-1">
                            Options de recherche
                        </label></br>
                        <div id="opt-1" class="ph-1">
                            <input id="vvnt" name="voirventes" type="checkbox" class="font-lg">
                            <span class="ml-1">Afficher uniqement les chevaux à la vente</span>
                        </div>
                    </div>
                </div>

                <input type="submit" value="Rechercher" class="button center"/>
            </form>
        </div>
    </div>

    {% for section, chevaux in sections %}
        <section class="mh-4 wrap">
            <h2 class="wrap text-light font-h text-center">{{ section }}</h2>

            <div class="preview-gallery mb-4">
                {% for cheval in chevaux %}
                    {% include 'component/horse_card.html.twig' with {
                        'cheval': cheval,
                        'col': 0,
                    } %}
                {% else %}
                    <div class="bg-black-40 text-primary p-3 span-3 text-center">
                        Aucun cheval trouvé
                    </div>
                {% endfor %}
            </div>
        </section>
    {% endfor %}

    {% if is_granted('IS_AUTHENTICATED_FULLY') %}
        {% for section, chevaux in sections_privees %}
            <section class="mh-4 wrap">
                <h2 class="wrap text-light font-h text-center">{{ section }}</h2>

                <div class="preview-gallery mb-4">
                    {% for cheval in chevaux %}
                        {% include 'component/horse_card.html.twig' with {
                            'cheval': cheval,
                            'col': 0,
                        } %}
                    {% else %}
                        <div class="bg-black-40 text-primary p-3 span-3 text-center">
                            Aucun cheval trouvé
                        </div>
                    {% endfor %}
                </div>
            </section>
        {% endfor %}
    {% endif %}
{% endblock %}