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

{% block title %}Aliment · VetRation{% endblock %}

{% block body %}
<div class="h1"> 
    Liste des aliments
    <a href="{{ path('aliment_edit') }}" class="btn btn-secondary">
        <i class="bi bi-plus-lg"></i>
    </a>
</div>
<form id="search-form" hx-trigger="keyup from:input[name='recherche'] delay:500ms, change from:select[name='categorie']" hx-post="{{ path('aliment_search') }}" hx-target="#search-results" hx-indicator=".htmx-indicator">
    <div class="row mb-2">
        <div class="col-xl-3 col-md-6 col-12">    
            <select class="form-control" name="categorie" >
                <option value="">Sélectionnez une catégorie...</option>
                {% for type, categorieListe in categories %}
                    <optgroup label="{{ type }}">
                        {% for categorie in categorieListe %}
                            <option value="{{ categorie }}">{{ categorie }}</option>
                        {% endfor %}
                    </optgroup>
                {% endfor %}
            </select>
        </div>
        <div class="col-xl-3 col-md-6 col-12">
            <input class="form-control" type="search" name="recherche" placeholder="Rechercher un aliment..." >
        </div>
        <div class="col-auto">
            <span class="htmx-indicator fs-3"> 
                <i class="bi bi-arrow-repeat"></i>
            </span>
        </div>
    </div>
</form>
<div class="row bg-dark-subtle fw-bold">
    <div class="col-1">
        Code Inra
    </div>
    <div class="col-2">
        Type
    </div>
    <div class="col-2">
        Catégorie
    </div>
    <div class="col-4">
        Nom
    </div>
    <div class="col-1">
        MS
    </div>
    <div class="col-1">
        UFL
    </div>
    <div class="col-1">
        PDI
    </div>
</div>
<div id="search-results">
    {% for aliment in aliments %}
        <a href="{{ path('aliment_edit', {'id': aliment.id}) }}" class="text-decoration-none text-dark">
            <div class="row cursor-pointer {{ loop.index0 is odd ? 'bg-secondary-subtle' : 'bg-light' }}">
                <div class="col-1">
                    {{ aliment.codeINRA }}
                </div>
                <div class="col-2">
                    {{ aliment.type }}
                </div>
                <div class="col-2">
                    {{ aliment.libelle0 }}
                </div>
                <div class="col-4">
                    {{ aliment.libelle1 }}
                </div>
                <div class="col-1">
                    {{ aliment.ms|round(2) }}
                </div>
                <div class="col-1">
                    {{ aliment.ufl|round(2) }}
                </div>
                <div class="col-1">
                    {{ aliment.pdi|round(0) }}
                </div>
            </div>
        </a>
    {% else %}
        <div class="row">
            <div class="col-12">
                aucune donnée trouvée
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}