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

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

{% block mainContent %}
    <h1>Liste des recettes</h1>
    <div class="d-flex">
        <div class="table-responsive mnw-25">
            <table class="table table-sm table-striped table-hover table-bordered table-datatable2 align-middle">
                <thead>
                    <tr>
                        <th scope="col" data-sort-onLoad="1" class="align-middle">Matériaux produits</th>
                        <th scope="col" class="align-middle">Machine</th>
                        <th scope="col" class="align-middle">Matériaux consommés</th>
                        <th scope="col" data-sort="false" class="fit-content align-middle">
                            <a href="{{ path('config_recipe_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 recipe in recipes %}
                        {% set machine = recipe.machine %}
                        {% set firstExtraInfo = true %}
                        <tr>
                            <td>
                                {% for producedMaterial in recipe.producedMaterials %}
                                    {% if not loop.first %}<br>{% endif %}{{ producedMaterial }}
                                {% endfor %}
                            </td>
                            <td
                                {% if machine.labelExtraInfo1 is not null or machine.labelExtraInfo2 is not null %}
                                    data-bs-toggle="tooltip"
                                    data-bs-html="true"
                                    data-bs-title="
                                    {% for extraInfo in 1..2 %}
                                        {% if machine.('labelExtraInfo' ~ extraInfo) is not null %}
                                            {% if firstExtraInfo %}
                                                {% set firstExtraInfo = false %}
                                            {% else %}
                                                <br>
                                            {% endif %}
                                            {{ machine.('labelExtraInfo' ~ extraInfo) }} = {{ recipe.('machineExtraInfo' ~ extraInfo) }}
                                        {% endif %}
                                    {% endfor %}
                                    "
                                {% endif %}
                            >
                                {{ machine }}
                            </td>
                            <td>
                                {% for consumedMaterial in recipe.consumedMaterials %}
                                    {% if not loop.first %}<br>{% endif %}{{ consumedMaterial }}
                                {% endfor %}
                            </td>
                            <td class="fit-content">
                                <a href="{{ path('config_recipe_edit', {id: recipe.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_recipe_delete', {id: recipe.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 %}