{% set currentPath =
    path(
    app.request.attributes.get('_route'),
    app.request.attributes.get('_route_params')
    )
%}

{% if dataList %}
    <datalist id="ca">
        {% for ca in dataList %}
            <option data-value="{{ ca.id }}" value="{{ ca.codeAction }}"></option>
        {% endfor %}
    </datalist>

    <div class="filters-group">
        <div class="filters-group_title">
            <div>
                Accès rapide
            </div>
        </div>
        <div class="filters-group_search">
            <form id="query_form" onsubmit="urlGen(this)" method="post">
                <div>
                    <input type='text' id="query_bar" class='filter-input' oninput="this.value" list="ca"
                       autocomplete="off" name="codeAction" placeholder="Nom dossier" min="0" autofocus />
                </div>
                <div>
                    <button type='submit' class="btn btn-outline-warning" id="dossier-link">Accéder</button>
                </div>
            </form>
        </div>
    </div>
{% endif %}

<script>

    /* code pour aficher seulement le text sans les values dans la datalist*/
    /******************************************************/
    let input_query = document.getElementById('query_bar');
    let anchor_tag_dossier = document.getElementById('dossier-link');


    $(anchor_tag_dossier).on('click', (e) => {
        if ($(e.target).is(input_query)) {
            e.preventDefault();
        }
    });

    function urlGen(f) {
        let shownVal = document.getElementById("query_bar").value;
        let value2send = document.querySelector("#ca option[value='"+shownVal+"']").dataset.value;

        let start = document.location.pathname;
        start = start.replace(document.location.pathname, '/dossier/')
        f.action = start + value2send;
        console.log(f.action)
        return true;
    }
</script>