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

{% block content %}
<form>
  <div class="container-fluid p-0">
    <div class="container pt-5">
      <div class="row">
        <div class="col-lg-3 col-responsive">
          {% include 'shared/menu.html.twig' %}
        </div>
        <div class="col-lg-9">
          <div class="py-3">
            <h5 class="card-header-title">Liste des chapitres</h5>
          </div>
          <div class="row ps-2">
            {% for message in app.flashes('success-chapter') %}
                <div class="flash-notice text-start p-0">
                  <p class=" alert alert-success text-success">{{ message }}</p>
                </div>
              {% endfor %}
                <div class="col pt-0 px-0 ">
                  {% include 'courses/filtrechapter.html.twig' %}
                </div>
                <div class="col-auto float-end px-0">
                <a class="nav-link text-dark p-0"
                  href="{{ path('admin_add_chapter',{ 'id': courses.id})}}">
                  <button type="button"class="btn btn-primary">
                    <svg width="25" height="20" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                    </svg>
                      Ajouter un chapitre
                  </button>
                </a>
                </div>
          </div>
          <div class="row ps-2">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Titre</th>
                  <th scope="col">Ordre</th>
                  <th scope="col">Blogs</th>
                  <th scope="col">Publication</th>
                  <th scope="col">Statut</th>
                  <th scope="col">
                    <div class="float-end me-3">Action</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                {% for chapter in pagination %}
                <tr>
                  <td>{{chapter.title}}</td>
                  <td>{{chapter.orderChapter}}</td>
                  <td>{{chapter.blogs| length}}</td>
                  <td>{{chapter.publicationDate |date('Y-m-d')}}</td>
                  <td>{% if chapter.active %}
                    <small class="badge bg-success rounded-pill">Active</small>
                    {% else %}
                    <small class="badge bg-danger rounded-pill">Inactive</small>
                    {% endif %}
                  </td>
                  <td>
                    <div class="float-end">
                      <a href="{{ path('admin_edit_chapter', {'id': chapter.id }) }}" class="text-decoration-none"
                        title="Modifier chapitre">
                        <svg width="20" height="20" fill="#8c98a4" class="bi bi-pencil-square me-2 mb-1"
                          viewBox="0 0 16 16">
                          <path
                            d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                          <path fill-rule="evenodd"
                            d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                        </svg>
                      </a>
                      {% if (chapter.active== false) %}
                      <a href="{{ path('admin_validate_chapter', {'id': chapter.id }) }}" class="text-decoration-none"
                        title="Activer chapitre">
                        <svg width="20" height="20" fill="#8c98a4" class="bi bi-check-square me-2 mb-1"
                          viewBox="0 0 16 16">
                          <path
                            d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                          <path
                            d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z" />
                        </svg>
                      </a>
                      {% else %}
                      <a href="{{ path('admin_disable_chapter', {'id': chapter.id }) }}" class="text-decoration-none"
                        title="Désactiver chapitre">
                        <svg width="20" height="20" fill="#8c98a4" class="bi bi-slash-circle me-2 mb-1"
                          viewBox="0 0 16 16">
                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                          <path d="M11.354 4.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708z">
                          </path>
                        </svg>
                      </a>
                      {% endif %}
                      <a href="{{ path('admin_list_blog', {'id': chapter.id }) }}" class="text-decoration-none"
                        title="Gérer blogs">
                        <svg width="20" height="20" fill="#8c98a4" class="bi bi-folder me-2 mb-1" viewBox="0 0 16 16">
                          <path
                            d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z">
                          </path>
                        </svg>
                      </a>
                    </div>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <div class="d-flex bd-highlight mb-3">
              <div class="me-auto pt-3">
                <a type="button" class="btn btn-primary" href="{{ path('admin_listes_courses') }}">
                        <svg width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-left" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4z"/>
                        </svg>
                        Retour</a>
              </div>
              <div class="d-flex flex-row-reverse ">
                <div class="navigation my-3">
                  {% do pagination.setPageRange(2) %} 
                {{ knp_pagination_render(pagination,'pagination.html.twig') }}
                </div>
                <div class="my-3">
                  <select name="resultat" class="form-select nbr-course-page me-2 text-muted" id="resultat" onchange="this.form.submit()">
                  {% for key, resultat in resultats %}
                    <option {{ app.request.get('resultat')==key ~ '' ? 'selected' : '' }} value="{{ key }}">{{ resultat }}</option>
                  {% endfor %}
                </select>
                </div>          
              </div>
            </div>
      </div>
    </div>
  </div>
</form>
{% endblock %}