{% extends "../frames/__account.html" %}
{% load static %}

{% block headLinks %}
  <!-- DataTables -->
  <link rel="stylesheet" href="{% static "plugins/datatables-bs4/css/dataTables.bootstrap4.min.css" %}">
  <link rel="stylesheet" href="{% static "plugins/datatables-responsive/css/responsive.bootstrap4.min.css" %}">
  <link rel="stylesheet" href="{% static "plugins/datatables-buttons/css/buttons.bootstrap4.min.css" %}">  
{% endblock headLinks %}

{% block docTitle %}Gestion des types de statut membre{% endblock docTitle %}
{% block navTitle %}Gestion des types de statut membre{% endblock navTitle %}


{% block contents %}
    <div class="row">
        <div class="col-12 mt-3">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <a class="btn btn-outline-success">
                        <i class="fas fa-plus"></i> Ajouter
                    </a>
                </div>
                <div class="body">
                    <div class="col-12">
                        <table id="statut-table" class="table table-bordered table-striped dataTable dtr-inline">
                            <thead>
                                <tr>
                                    <th>Ordre</th>
                                    <th>Intitule</th>
                                    <th>Frais d'adhesion</th>
                                    <th>Cotisation/mois</th>
                                    <th>Derniere modification</th>
                                    <th>Date d'ajout</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock contents %}

{% block scripts %}
    
    <!-- DataTables  & Plugins -->
    <script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "plugins/datatables-bs4/js/dataTables.bootstrap4.min.js" %}"></script>
    <script src="{% static "plugins/datatables-responsive/js/dataTables.responsive.min.js" %}"></script>
    <script src="{% static "plugins/datatables-responsive/js/responsive.bootstrap4.min.js" %}"></script>

    <script>

        $(function () {

            $('#statut-table').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
              });
        });
    </script>
{% endblock scripts %}