<html>
    <head>
        <style>
            @page{
                size: A4 landscape;
                margin: 2cm;
            }
            * {
                font-size: 15px;
            }

            table {
                table-layout: fixed;
                width: 100%;
                border: 1px solid black;
            }

            table th {
                text-align: left;
                padding: 3px;
                padding-bottom: 0;
            }

            table td {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 3px;
                padding-bottom: 0;
            }
        </style>
    </head>

    <body>
        <h1>Liste des heures supplémentaire du {{start}} au {{end}}</h1>
        <table>
            <tr>
                <th>N°</th>
                <th>Date</th>
                <th>Heures</th>
                <th>Minutes</th>
                <th>Collaborateur</th>
                <th>Types</th>
                <th>Total du mois</th>
            </tr>
            {%for data in record%}
            <tr>
                <td style="width: 10%;"> {{forloop.counter}} </td>
                <td sttyle=""> {{data.dtDate}} </td>
                <td style=""> {{data.nHour}} </td>
                <td style=""> {{data.nMinutes}} </td>
                <td style=""> {{data.user}} ({{data.get_bases_name}}) </td>
                <td style=""> {{data.type}} </td>
                <td style=""> {{data.get_total_hour_by_user}} </td>
            </tr>
            {%endfor%}
        </table>
    </body>
</html>