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


{% block body %}
    <div class="absolute">
        <div class="d-flex align-items-center">
            <h1>Listes des marques</h1>
            <div class="mx-3">
                <a href="{{ path('marque_new') }}" class="btn btn-success">Créer</a>

            </div>
        </div>

        <div class="search">
            <input class="form-control search " id="search" placeholder="Search"
                   value=""
                   autocomplete="off">
        </div>

        <table class="table table-striped text-center">
            <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>actions</th>
            </tr>
            </thead>
            <tbody id="tbody">
            {% for marque in marques %}
                <tr>
                    <td>{{ marque.id }}</td>
                    <td>{{ marque.name }}</td>
                    <td>
                        <div class="d-flex">
                            <a href="{{ path('marque_edit', {'id': marque.id}) }}" class="btn btn-info mx-3">Modifier</a>

                            {% if app.user.is('dev') %}
                                <a href="{{ path('marque_show', {'id': marque.id}) }}" class="btn btn-dark">show</a>
                                <form method="post" action="{{ path('marque_delete', {'id': marque.id}) }}"
                                      onsubmit="return confirm('Are you sure you want to delete this item?');">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ marque.id) }}">
                                    <button class="btn btn-danger">Delete</button>
                                </form>
                            {% endif %}


                        </div>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="3">no records found</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

    </div>


    <script>
        document.getElementById('search').addEventListener('keyup', (e) => {
            const searchString = e.target.value;
            let url = "{{ path('marque_find') }}";


            $.ajax({
                method: "POST",
                url: url,
                data: {
                    q: searchString
                },
                success: function (data) {
                    document.getElementById('tbody').innerHTML = data;

                }
            });
        });
    </script>
{% endblock %}