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

{% block content %}
<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="">
          <h5 class="card-header-title mt-4 mb-4">Liste des catégories</h5>
          <div class="row">
            {% for message in app.flashes('success-add-category') %}
              <div class="flash-notice text-start p-0">
                <p class=" alert alert-success text-success">{{ message }}</p>
              </div>
            {% endfor %}
            <div class="col pt-3">
              <p>Vous avez {{ categories|length }} catégories sur notre plateforme.</p>
            </div>
            <div class="col-auto float-end"><a class="nav-link text-dark" href="{{ path('add_categorie') }}">
                <button class="btn btn-ioacademy">
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" 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 une catégorie</button>
              </a></div>
          </div>
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Id</th>
                <th scope="col">Icon</th>
                <th scope="col">Nom</th>
                <th scope="col">Alias</th>
                <th scope="col">Etat</th>
                <th scope="col">
                  <div class="float-end me-3">Action</div>
                </th>
              </tr>
            </thead>
            <tbody>
              {% for categorie in categories %}
              <tr>
                <th scope="row"> {{categorie.id}} </th>
                <td>{{categorie.icon|raw}}</td>
                <td>{{categorie.name}}</td>
                <td>{{categorie.alias}}</td>
                <td>{% if (categorie.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_category', {'id': categorie.id }) }}" title="Modifier"><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 (categorie.active == false ) %}
                    <a href="{{ path('admin_validate_category', {'id': categorie.id }) }}" title="Activer"><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_invalidate_category', {'id': categorie.id }) }}" title="Désactiver"><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 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" />
                      </svg></a>
                    {% endif %}

                    <a href="{{ path('admin_delete_category', {'id': categorie.id }) }}" title="Supprimer">
                      <svg width="20" height="20" fill="#8c98a4" class="bi bi-trash me-2 mb-1" viewBox="0 0 16 16">
                        <path
                          d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                        <path fill-rule="evenodd"
                          d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                      </svg></a>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}