<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Récapitulatif Congés & RTT</title>

    <style>
        @page { size: A4 portrait; margin: 4mm; }

        html, body {
            margin: 0;
            padding: 2mm;
            font-family: Helvetica, sans-serif;
            font-size: 10px;
        }

        .title-bar {
            position: relative;
            margin: 0 0 6mm 0;
        }

        h1 {
            text-align: center;
            font-size: 18px;
            margin: 0;
        }

        .date-box {
            position: absolute;
            top: 0;
            left: 0;
            border: 2px solid #000;
            padding: 4px 12px;
            font-size: 14px;
            font-weight: 700;
        }

        .export-date {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 10px;
            color: #333;
            padding-top: 6px;
        }

        table.recap {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
            border: 4px solid #0a0a0a;
        }

        th, td {
            border: 2px solid #0a0a0a;
            padding: 3px 5px;
            vertical-align: middle;
            overflow: hidden;
            white-space: nowrap;
        }

        .site-header td {
            font-weight: 700;
            font-size: 12px;
            text-align: center;
        }

        thead th {
            text-align: center;
            font-weight: 700;
            font-size: 10px;
            white-space: normal;
        }

        td.name {
            text-align: left;
            font-weight: bold;
        }
        td.base { text-align: center; }
        td.num  { text-align: center; }
        td.obs  { min-width: 40mm; }

        tbody td { font-size: 10px; }
    </style>
</head>
<body>

<div class="title-bar">
    <div class="date-box">{{ today|date('d/m/Y') }}</div>
    <h1>RECAPITULATIF CONGES & RTT</h1>
    <div class="export-date">Exporté le {{ "now"|date('d/m/Y') }} à {{ "now"|date('H:i:s') }}</div>
</div>

<table class="recap">
    <thead>
        <tr>
            <th style="text-align: left;">Nom</th>
            <th>Contrat</th>
            <th>CP N-1<br>restant</th>
            <th>Samedi<br>restant</th>
            <th>CP<br>N</th>
            <th>RTT</th>
            <th style="width: 40mm;">Observations</th>
        </tr>
    </thead>
    <tbody>
    {% for siteId, group in siteGroups %}
        {% set siteColor = group.color ?? '#B3E5FC' %}
        <tr class="site-header">
            <td style="background: {{ siteColor }}; text-align: left;" colspan="7">
                {{ group.name }}
            </td>
        </tr>
        {% for row in group.employees %}
            <tr>
                <td class="name">{{ row.lastName }} {{ row.firstName }}</td>
                <td class="base">{{ row.contractName ?? '' }}</td>
                <td class="num">{{ row.cpN1Remaining }}</td>
                <td class="num">{{ row.acquiredSaturdays }}</td>
                <td class="num">{{ row.cpN }}</td>
                <td class="num">{{ row.rtt }}</td>
                <td class="obs"></td>
            </tr>
        {% else %}
            <tr>
                <td colspan="7">Aucun employé.</td>
            </tr>
        {% endfor %}
    {% endfor %}
    </tbody>
</table>

</body>
</html>
