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

{% block title %}Liste des matériaux - {{ parent() }}{% endblock %}
{% block importmap %}{{ importmap(['app', 'datatables2']) }}{% endblock %}

{% block mainContent %}
    <h1>Liste des matériaux</h1>
    <div class="d-flex">
        <div class="table-responsive mnw-25">
            <table class="table table-sm table-striped table-hover table-bordered table-datatable2">
                <thead>
                    <tr>
                        <th scope="col" data-sort-onLoad="1" class="align-middle">Nom</th>
                        <th scope="col" class="align-middle">Type</th>
                        <th scope="col" data-sort="false" class="fit-content align-middle">
                            <a href="{{ path('config_material_create') }}" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Ajouter">
                                <i class="fa-solid fa-square-plus"></i>
                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for material in materials %}
                        <tr>
                            <td>{{ material.name }}</td>
                            <td>{{ material.type.name }}</td>
                            <td class="fit-content">
                                <a href="{{ path('config_material_edit', {id: material.id}) }}"
                                   class="text-primary me-2"
                                   data-bs-toggle="tooltip"
                                   data-bs-title="Éditer"
                                ><i class="fa-solid fa-pen"></i></a>
                                <a href="#" class="text-danger" id="btDelete" data-bs-toggle="tooltip" data-bs-title="Supprimer">
                                    <span data-bs-toggle="modal"
                                          data-bs-target="#deleteConfirmation"
                                          data-modal-dynamic-link-url="{{ path('config_material_delete', {id: material.id}) }}"
                                    ><i class="fa-solid fa-xmark"></i></span>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal modal-dynamic fade" id="deleteConfirmation" tabindex="-1" aria-label="btDelete" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Suppression</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Êtes-vous sûr de vouloir supprimer ce matériau ?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Non</button>
                    <a href="#" class="modal-confirm-link btn btn-danger">Oui</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}