<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>PDP Dashbord</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <style>
              th {
                    cursor: pointer;
                    padding-right: 20px; /* Pour espacer la flèche du texte */
                  }

              .sort-arrow {
                font-size: 1.2em;
                margin-left: 5px;
              }

              .sort-arrow:empty {
                display: none;
              }
              tr.clickable-row {
              cursor: pointer;
              }

              .table-container {
                max-height: 1000px; /* Définit la hauteur de la zone défilable */
                overflow-y: auto; /* Permet le défilement vertical */
              }

              table {
                width: 100%;
                border-collapse: collapse;
              }

              th, td {
                padding: 8px;
               
              }

              th {
                background-color: #f2f2f2;
                position: sticky;
                top: 0; /* Positionne l'en-tête en haut */
                z-index: 1; /* Assure que l'en-tête reste au-dessus du contenu */
              }
              button {
            padding: 5px 10px;
            color: white;
            background-color: red;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background-color: darkred;
        }
        </style>
    </head>
    <body>
        {% include 'navbar.html' %}
        

        <div class="container">
            {% block content %}

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



    {% include 'js.html' %}

</html>