<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Heures - {{ dateLabel }}</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 3mm 0; }
        h1 { text-align: center; font-size: 15px; margin: 0; }
        .export-date { position: absolute; top: 0; right: 0; font-size: 9px; color: #333; padding-top: 4px; }
        table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 2px solid #0a0a0a; }
        th, td { border: 1px solid #0a0a0a; padding: 4px 2px; vertical-align: middle; text-align: center; overflow: hidden; }
        th { font-weight: 700; background: #f0f0f0; white-space: normal; }
        td { white-space: nowrap; }
        td.name { text-align: left; }
        tr.site-title td { font-weight: bold; font-size: 11px; text-transform: uppercase; text-align: left; padding: 2px 6px; white-space: nowrap; }
        tr.weekend td { background: #c0c0c0; }
        td.total { font-weight: bold; }
        table.legend { width: auto; table-layout: auto; margin-top: 4mm; font-size: 10px; border: 0; border-collapse: collapse; }
        table.legend td { border: 0; padding: 2px 0; vertical-align: middle; overflow: visible; white-space: nowrap; }
        table.legend .legend-title { font-weight: bold; padding-right: 8px; }
        table.legend .legend-box-cell { padding-left: 12px; }
        table.legend .legend-box { display: inline-block; box-sizing: content-box; width: 14px; height: 14px; padding: 3px; line-height: 14px; text-align: center; font-weight: bold; font-size: 9px; }
        table.legend .legend-label { padding-left: 4px; }
    </style>
</head>
<body>
    <div class="title-bar">
        <h1>Heures du {{ dateLabel }}</h1>
        <div class="export-date">Édité le {{ exportedAt }}</div>
    </div>

    <table>
        <thead>
            <tr>
                <th style="width: 21%;">Nom</th>
                <th style="width: 13%;">Statut</th>
                <th style="width: 8%;">Début matin</th>
                <th style="width: 8%;">Fin matin</th>
                <th style="width: 8%;">Début après-midi</th>
                <th style="width: 8%;">Fin après-midi</th>
                <th style="width: 8%;">Début soir</th>
                <th style="width: 8%;">Fin soir</th>
                <th style="width: 6%;">Jour</th>
                <th style="width: 6%;">Nuit</th>
                <th style="width: 6%;">Total</th>
            </tr>
        </thead>
        <tbody>
            {% for group in groups %}
                <tr class="site-title">
                    <td colspan="11" style="background: {{ group.siteColor ?: '#e8e8e8' }};">{{ group.siteName }}</td>
                </tr>
                {% for row in group.rows %}
                    <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
                        <td class="name">{{ row.employeeName }}</td>
                        <td{% if row.statutColor %} style="background: {{ row.statutColor }};"{% endif %}>{{ row.statut }}</td>
                        <td>{{ row.morningFrom }}</td>
                        <td>{{ row.morningTo }}</td>
                        <td>{{ row.afternoonFrom }}</td>
                        <td>{{ row.afternoonTo }}</td>
                        <td>{{ row.eveningFrom }}</td>
                        <td>{{ row.eveningTo }}</td>
                        <td>{{ row.dayHours }}</td>
                        <td>{{ row.nightHours }}</td>
                        <td class="total">{{ row.total }}</td>
                    </tr>
                {% endfor %}
            {% endfor %}
        </tbody>
    </table>

    {% if legend is not empty %}
        <table class="legend">
            {% for chunk in legend|batch(6) %}
                <tr>
                    <td class="legend-title">{% if loop.first %}Légende :{% endif %}</td>
                    {% for item in chunk %}
                        <td class="legend-box-cell">
                            <span class="legend-box" style="background: {{ item.color ?: '#e8e8e8' }};">{{ item.code }}</span>
                        </td>
                        <td class="legend-label">{{ item.label }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </table>
    {% endif %}
</body>
</html>
