{% extends "traite/base.html" %}
{% load static %}
{% block content %}
<div class="p-3">
  <div class="d-flex justify-content-between bg-light my-3 p-3 rounded border ">
    <h4 >Parametres > Types d'infraction</h4>
  </div>
  <div class="text-end"><a href="{% url 'traiteapp:add_infraction' %}" class="btn btn-dark px-2" >Ajouter type d'infraction</a></div>
  <div class="">
    <div class="table-responsive mt-3 tbl-container bdr">
      {% csrf_token %}
      <table class="table table-striped table-sm ">
        <thead class="border bg-blue-dark px-2 text-center">
          <tr class=" ">
            <th scope="col" class="text-white fw-normal py-2 text-start">N° d'ordre</th>
            <th scope="col" class="text-white fw-normal py-2 text-start">Libelle</th>
            <th scope="col" class="text-white fw-normal py-2"></th>
            <th scope="col" class="text-white fw-normal py-2"></th>
          </tr>
        </thead>
        <tbody class="">
          {% for type_infraction in type_infractions %}
              <tr class=" text-center my-2 rounded" >
                <td class="text-start">{{ forloop.counter }}</td>
                <td class="text-start">{{ type_infraction.libelle }}</td>
                
                <td>
                  <button class="border-0 bg-transparent" href="#">
                    <i class="bi fs-6 bi-pencil-square text-dark-blue fs-6"></i>
                  </button>
                </td>
                <td>
                  
                  <button class="border-0 bg-transparent" onclick="delete({{ type_infraction.id }})">
                    <i class="bi fs-6 bi-trash3-fill text-dark-blue fs-6"></i>
                  </button>
                </td>
              </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
  </div>
</div>
{% endblock content %}