<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Bilan de compétences</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 1.2em; color: #111827; }
        h1, h2 { color: #059669; }
        .top-header { width: 100%; border-bottom: 2px solid #d1fae5; border-collapse: collapse; margin-bottom: 14px; }
        .top-header td { vertical-align: top; border: none; padding: 0; }
        .school-logo { width: 54px; height: 54px; object-fit: contain; margin-right: 8px; }
        .product-logo { width: 58px; }
        .title-row { margin: 8px 0 10px 0; }
        .student-info {
            margin-bottom: 1em;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 8px 12px;
            background: #f8fafc;
        }
        .student-info table { width: 100%; border-collapse: collapse; font-size: 0.98em; }
        .student-info td { border: none; padding: 1px 0; }
        .domain-table { width: 100%; border-collapse: collapse; margin-bottom: 2em; }
        .domain-header th {
            background: #d1fae5;
            color: #065f46;
            font-size: 1.1em;
            padding: 0.7em;
            text-align: left;
        }
        .category-row td {
            background: #f0fdf4;
            color: #059669;
            font-weight: bold;
            font-size: 1em;
            padding: 0.6em;
        }
        th, td { border: 1px solid #e5e7eb; padding: 0.5em; }
        th.competence-header { background: #d1fae5; }
        td.competence-nom { word-break: break-word; max-width: 320px; }
        .footer-note { margin-top: 32px; }
        .comment-space {
            min-height: 180px;
            margin-top: 18px;
            margin-bottom: 78px;
        }
        .footer-grid { width: 100%; border-collapse: collapse; }
        .footer-grid td {
            border: none;
            padding: 0;
            vertical-align: top;
        }
        .field-line { border-bottom: 1px solid #9ca3af; height: 24px; margin-top: 6px; }
        .signature-line { border-bottom: 2px solid #059669; height: 30px; margin-top: 6px; }
    </style>
</head>
<body>
    <table class="top-header">
        <tr>
            <td style="width: 68%; padding-bottom: 8px;">
                <table style="border-collapse: collapse; width: 100%;">
                    <tr>
                        {% if establishment.logo_path %}
                        <td style="width: 64px; border: none; vertical-align: top;">
                            <img src="{{ establishment.logo_path }}" alt="Logo établissement" class="school-logo">
                        </td>
                        {% endif %}
                        <td style="border: none; vertical-align: top;">
                            <div style="font-size: 1.25em; font-weight: 700; color: #065f46; margin-top: 2px;">{{ establishment.name }}</div>
                            {% if establishment.address %}
                            <div style="font-size: 0.9em; color: #4b5563; margin-top: 4px;">{{ establishment.address }}</div>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </td>
            <td style="width: 32%; text-align: right; padding-bottom: 8px;">
                <table style="border-collapse: collapse; width: 100%; margin-left: auto;">
                    <tr>
                        <td style="border: none; text-align: right;">
                            <div style="font-size: 0.86em; color: #6b7280; margin-bottom: 4px;">Généré avec</div>
                            {% if product.logo_path %}
                            <div style="margin-bottom: 4px;"><img src="{{ product.logo_path }}" alt="Logo n3wt" class="product-logo"></div>
                            {% endif %}
                            <div style="font-size: 0.95em; font-weight: 700; color: #059669;">{{ product.name }}</div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <div class="title-row">
        <h1>Bilan de compétences</h1>
    </div>

    <div class="student-info">
        <table>
            <tr>
                <td><strong>Élève :</strong> {{ student.last_name }} {{ student.first_name }}</td>
                <td style="text-align: right;"><strong>Date :</strong> {{ date }}</td>
            </tr>
            <tr>
                <td><strong>Niveau :</strong> {{ student.level }}</td>
                <td style="text-align: right;"><strong>Période :</strong> {{ period }}</td>
            </tr>
            <tr>
                <td><strong>Classe :</strong> {{ student.class_name }}</td>
                <td></td>
            </tr>
        </table>
    </div>

    {% for domaine in domaines %}
    <table class="domain-table" {% if not forloop.first %}style="page-break-before: always;"{% endif %}>
        <thead>
            <tr class="domain-header">
                <th colspan="4" style="text-align:center">{{ domaine.nom }}</th>
            </tr>
            <tr>
                <th class="competence-header" style="min-width: 120px;">Compétences</th>
                <th class="competence-header" style="width: 28px; text-align:center;">1</th>
                <th class="competence-header" style="width: 28px; text-align:center;">2</th>
                <th class="competence-header" style="width: 28px; text-align:center;">3</th>
            </tr>
        </thead>
        <tbody>
            {% for categorie in domaine.categories %}
            <tr class="category-row">
                <td colspan="4">{{ categorie.nom }}</td>
            </tr>
                {% for competence in categorie.competences %}
                <tr>
                    <td class="competence-nom">{{ competence.nom }}</td>
                    {% for note in "123" %}
                    <td style="text-align:center; width:28px;">
                        {% if competence.score|stringformat:"s" == note %}
                            <span style="color:#059669; font-weight:bold; font-size:1.1em;">&#10003;</span>
                        {% endif %}
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
            {% endfor %}
        </tbody>
    </table>
    {% endfor %}

    <div class="footer-note">
        <div style="font-weight: 700; color: #059669; font-size: 1.1em;">
            Appréciation générale / Commentaire
        </div>
        <div class="comment-space"></div>

        <table class="footer-grid">
            <tr>
                <td style="width: 45%;">
                    <table style="width: 100%; border-collapse: collapse;">
                        <tr>
                            <td style="width: 70px; border: none; font-weight: 700; color: #059669;">Date :</td>
                            <td style="border: none;"><div class="field-line"></div></td>
                        </tr>
                    </table>
                </td>
                <td style="width: 10%;"></td>
                <td style="width: 45%;">
                    <table style="width: 100%; border-collapse: collapse;">
                        <tr>
                            <td style="width: 90px; border: none; font-weight: 700; color: #059669;">Signature :</td>
                            <td style="border: none;"><div class="signature-line"></div></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>