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

{% block title %}Liste des exercices{% endblock %}

{% block titre_page %}Liste des exercices{% endblock %}
{% block resume_page %}Liste des exercices qu'on a fait, qu'on veut faire, qu'on va faire !{% endblock %}
{% block description_page %}
{% endblock %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <h5 class="card-title">Liste des exercices</h5>
                    </div>
                    <div class="col-6 text-end ">
                        <a href="{{ path('exercise_add') }}" class="btn btn-primary rounded-pill"><i
                                    class="ti-plus"></i> Ajouter</a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th class="text-center"></th>
                            <th class="text-start">Exercice</th>
                            <th class="text-start">Description</th>
                            <th class="text-center">Like</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for exercice in exercises %}
                            <tr>
                                <td></td>
                                <td>{{ exercice.name }}</td>
                                <td>{{ exercice.description | nl2br }}</td>
                                <td class="text-center">{{ exercice.likes | length }}</td>
                                <td class="text-center">
                                    <a class="action-link" href="{{ path('exercise_edit', {'idExercise':exercice.id}) }}"><i
                                                class="ti-pencil"></i></a>
                                    <a class="action-link" href="{{ path('exercise_delete', {'idExercise':exercice.id}) }}"><i
                                                class="ti-trash"></i></a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}
    <div class="modal" id="modal-delete-cours" aria-hidden="true"
         aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Supprimer le cours</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Tu veux vraiment supprimer le cours ?<br/>
                    <span class="fw-bold" id="info"></span>
                </div>
                <div class="modal-footer">
                    <a href="#"
                       class="btn btn-primary modal-submit"><i class="ti-trash"></i>
                        Supprimer</a>
                    <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script type="text/javascript">
        $('.deleteCours').on('click', function (element) {
            var url = "{{ path('exercise_delete', {'idExercise':'___'}) }}";
            url = url.replace('___', $(this).data('id'));

            $('#info').text($(this).data('info'));

            $('#modal-delete-cours .modal-submit').attr('href', url);
        });
    </script>
{% endblock %}