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

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

{% block body %}
    <div class="h1">
        {% if ration.id is not null %}
            {{ ration.nom }}
        {% else %}
            Nouvelle ration
        {% endif %}
        <a href="{{ path('ration2007_add_new_aliment', {id: ration.id}) }}"><i class="bi bi-plus-lg"></i> créer aliment</a>
    </div>
    {{ form_start(form) }}
        {{ form_row(form.aliment) }}
        <div class="col">
            <input type="submit" class="btn btn-outline-dark" value="Enregistrer" />
        </div>
    {{ form_end(form) }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // initialize tom-select
        var tomSelect = new TomSelect('#add_aliment_aliment', {
            sortField: {
                field: "text", // Trie les options par leur texte
                direction: "asc" // Dans un ordre ascendant
            },
            persist: false, // Les options créées ne seront pas ajoutées à la liste après rechargement de la page
            createOnBlur: true, // Crée l'option lorsque l'élément perd le focus
            createFilter: function(input) {
                var match, regex;
                regex = new RegExp('^[a-zA-Z0-9 ]+$'); // Exemple de filtre pour autoriser uniquement les caractères alphanumériques et les espaces
                match = input.match(regex);
                if (match) {
                    return !this.options.hasOwnProperty(match[0]);
                }
                return false; // Empêche la création si le filtre ne correspond pas
            },
            placeholder: "Sélectionnez ou tapez pour créer", // Texte d'indication pour l'utilisateur
        });
        tomSelect.on('initialize',function(){
            console.log('initialize');
            // remove form-select class from tom-select element whit ts-wrapper class
            document.querySelectorAll('.ts-wrapper').forEach(function (element) {
                element.classList.remove('form-select');
            });
        });
    </script>
{% endblock %}