<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fiche élève de {{ student.last_name }} {{ student.first_name }}</title>
    <style>
        @page {
            size: A4;
            margin: 2cm;
        }
        body {
            font-family: 'Arial', sans-serif;
            font-size: 12pt;
            color: #222;
            background: #fff;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            padding: 0;
            background: #fff;
        }
        .header {
            text-align: center;
            margin-bottom: 24px;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 12px;
            position: relative;
        }
        .title {
            font-size: 22pt;
            font-weight: bold;
            color: #4CAF50;
            margin: 0;
        }
        .photo {
            position: absolute;
            top: 0;
            right: 0;
            width: 90px;
            height: 90px;
            object-fit: cover;
            border: 1px solid #4CAF50;
            border-radius: 8px;
        }
        .section {
            margin-bottom: 32px; /* Espacement augmenté entre les sections */
        }
        .section-title {
            font-size: 15pt;
            font-weight: bold;
            color: #4CAF50;
            margin-bottom: 18px; /* Espacement sous le titre de section */
            border-bottom: 1px solid #4CAF50;
            padding-bottom: 2px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 8px;
        }
        th, td {
            border: 1px solid #bbb;
            padding: 6px 8px;
            text-align: left;
        }
        th {
            background: #f3f3f3;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background: #fafafa;
        }
        .label-cell {
            font-weight: bold;
            width: 30%;
            background: #f3f3f3;
        }
        .value-cell {
            width: 70%;
        }
        .signature {
            margin-top: 30px;
            text-align: right;
            font-style: italic;
            color: #555;
        }
        .signature-text {
            font-weight: bold;
            color: #333;
        }
        .subsection-title {
            font-size: 12pt;
            color: #333;
            margin: 8px 0 4px 0;
            font-weight: bold;
        }
    </style>
</head>
<body>
    {% load myTemplateTag %}
    <div class="container">
        <!-- Header Section -->
        <div class="header">
            <h1 class="title">Fiche élève de {{ student.last_name }} {{ student.first_name }}</h1>
            {% if student.photo %}
            <img src="{{ student.get_photo_url }}" alt="Photo de l'élève" class="photo" />
            {% else %}
            <img src="/static/img/default-photo.jpg" alt="Photo par défaut" class="photo" />
            {% endif %}
        </div>

        <!-- Élève -->
        <div class="section">
            <div class="section-title">ÉLÈVE</div>
            <table>
                <tr>
                    <td class="label-cell">Nom</td>
                    <td class="value-cell">{{ student.last_name }}</td>
                    <td class="label-cell">Prénom</td>
                    <td class="value-cell">{{ student.first_name }}</td>
                </tr>
                <tr>
                    <td class="label-cell">Adresse</td>
                    <td class="value-cell" colspan="3">{{ student.address }}</td>
                </tr>
                <tr>
                    <td class="label-cell">Genre</td>
                    <td class="value-cell">{{ student|getStudentGender }}</td>
                    <td class="label-cell">Né(e) le</td>
                    <td class="value-cell">{{ student.birth_date }}</td>
                </tr>
                <tr>
                    <td class="label-cell">À</td>
                    <td class="value-cell">{{ student.birth_place }} ({{ student.birth_postal_code }})</td>
                    <td class="label-cell">Nationalité</td>
                    <td class="value-cell">{{ student.nationality }}</td>
                </tr>
                <tr>
                    <td class="label-cell">Niveau</td>
                    <td class="value-cell">{{ student|getStudentLevel }}</td>
                    <td class="label-cell"></td>
                    <td class="value-cell"></td>
                </tr>
            </table>
        </div>

        <!-- Responsables -->
        <div class="section">
            <div class="section-title">RESPONSABLES</div>
            {% for guardian in student.getGuardians %}
            <div>
                <div class="subsection-title">Responsable {{ forloop.counter }}</div>
                <table>
                    <tr>
                        <td class="label-cell">Nom</td>
                        <td class="value-cell">{{ guardian.last_name }}</td>
                        <td class="label-cell">Prénom</td>
                        <td class="value-cell">{{ guardian.first_name }}</td>
                    </tr>
                    <tr>
                        <td class="label-cell">Adresse</td>
                        <td class="value-cell" colspan="3">{{ guardian.address }}</td>
                    </tr>
                    <tr>
                        <td class="label-cell">Email</td>
                        <td class="value-cell" colspan="3">{{ guardian.email }}</td>
                    </tr>
                    <tr>
                        <td class="label-cell">Né(e) le</td>
                        <td class="value-cell">{{ guardian.birth_date }}</td>
                        <td class="label-cell">Téléphone</td>
                        <td class="value-cell">{{ guardian.phone|phone_format }}</td>
                    </tr>
                    <tr>
                        <td class="label-cell">Profession</td>
                        <td class="value-cell" colspan="3">{{ guardian.profession }}</td>
                    </tr>
                </table>
            </div>
            {% endfor %}
        </div>

        <!-- Fratrie -->
        <div class="section">
            <div class="section-title">FRATRIE</div>
            {% for sibling in student.getSiblings %}
            <div>
                <div class="subsection-title">Frère/Soeur {{ forloop.counter }}</div>
                <table>
                    <tr>
                        <td class="label-cell">Nom</td>
                        <td class="value-cell">{{ sibling.last_name }}</td>
                        <td class="label-cell">Prénom</td>
                        <td class="value-cell">{{ sibling.first_name }}</td>
                    </tr>
                    <tr>
                        <td class="label-cell">Né(e) le</td>
                        <td class="value-cell" colspan="3">{{ sibling.birth_date }}</td>
                    </tr>
                </table>
            </div>
            {% endfor %}
        </div>

        <!-- Paiement -->
        <div class="section">
            <div class="section-title">MODALITÉS DE PAIEMENT</div>
            <table>
                <tr>
                    <td class="label-cell">Frais d'inscription</td>
                    <td class="value-cell">{{ student|getRegistrationPaymentMethod }} en {{ student|getRegistrationPaymentPlan }}</td>
                </tr>
                <tr>
                    <td class="label-cell">Frais de scolarité</td>
                    <td class="value-cell">{{ student|getTuitionPaymentMethod }} en {{ student|getTuitionPaymentPlan }}</td>
                </tr>
            </table>
        </div>

        <!-- Signature -->
        <div class="signature">
            Fait le <span class="signature-text">{{ signatureDate }}</span> à <span class="signature-text">{{ signatureTime }}</span>
        </div>
    </div>
</body>
</html>