<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title>{{ pdf_title }}</title>
        <style>
            @page {
                size: A4;
                margin: 2cm;
            }
            body {
                font-family: Helvetica, Arial, sans-serif;
                font-size: 11pt;
                line-height: 1.3;
                margin: 0;
                padding: 0;
                color:#333;
            }
            .container {
                width: 100%;
            }
            .header {
                text-align: center;
                margin-bottom: 30px;
                border-bottom: 2px solid #333;
                padding-bottom: 10px;
            }
            .title {
                font-size: 18pt;
                font-weight: bold;
                margin: 0;
                padding: 0;
            }
            .section {
                margin-bottom: 15px; /* Réduit de 25px à 15px */
                padding: 10px;       /* Réduit de 15px à 10px */
                page-break-inside: avoid;
            }
            .section-title {
                font-size: 16pt;
                font-weight: bold;
                margin: 0 0 10px 0;  /* Réduit de 15px à 10px */
                padding-bottom: 3px; /* Réduit de 5px à 3px */
                border-bottom: 1px solid #333;
                text-align: center;
            }
            table {
                width: 100%;
                border-collapse: collapse;
                margin-bottom: 10px;
            }
            td {
                padding: 4px;
                vertical-align: top;
            }
            .label-cell {
                font-weight: bold;
                width: 150px;
            }
            .value-cell {
                width: auto;
            }
            .half-row td {
                width: 50%;
            }
            .subsection-title {
                font-size: 12pt;
                font-weight: bold;
                margin-bottom: 5px;  /* Réduit de 10px à 5px */
            }
            .signature {
                margin-top: 30px;
                text-align: right;
                font-style: italic;
            }
            .signature-text {
                font-weight: bold;
            }
            .clearfix::after {
                content: "";
                clear: both;
                display: table;
            }
            p {
                margin: 0;          /* Ajout de margin 0 pour les paragraphes */
                padding: 0;         /* Ajout de padding 0 pour les paragraphes */
            }
        </style>
    </head>
    <body>
        {% load myTemplateTag %}
        <div class="container">
            <div class="header">
                <div style="position: relative;">
                    <h1 class="title">{{ pdf_title }}</h1>
                    {% if student.photo %}
                    <img
                        src="{{ student.photo }}"
                        alt="Photo de l'élève"
                        style="
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 100px;
                            height: 100px;
                            object-fit: cover;
                            border: 2px solid #333;
                            border-radius: 10px;
                        "
                    />
                    {% endif %}
                </div>
            </div>

            <div class="section">
                <h2 class="section-title">ÉLÈVE</h2>
                {% with level=student|getStudentLevel %}
                {% with gender=student|getStudentGender %}
                <table>
                    <tr class="half-row">
                        <td class="label-cell">NOM :</td>
                        <td>{{ student.last_name }}</td>
                        <td class="label-cell">PRÉNOM :</td>
                        <td>{{ student.first_name }}</td>
                    </tr>
                    <tr>
                        <td class="label-cell">ADRESSE :</td>
                        <td colspan="3">{{ student.address }}</td>
                    </tr>
                    <tr class="half-row">
                        <td class="label-cell">GENRE :</td>
                        <td>{{ gender }}</td>
                        <td class="label-cell">NÉ(E) LE :</td>
                        <td>{{ student.birth_date }}</td>
                    </tr>
                    <tr>
                        <td class="label-cell">À :</td>
                        <td colspan="3">{{ student.birth_place }} ({{ student.birth_postal_code }})</td>
                    </tr>
                    <tr class="half-row">
                        <td class="label-cell">NATIONALITÉ :</td>
                        <td>{{ student.nationality }}</td>
                        <td class="label-cell">NIVEAU :</td>
                        <td>{{ level }}</td>
                    </tr>
                    <tr>
                        <td class="label-cell">MÉDECIN TRAITANT :</td>
                        <td colspan="3">{{ student.attending_physician }}</td>
                    </tr>
                </table>
                {% endwith %}
                {% endwith %}
            </div>

            <div class="section">
                <h2 class="section-title">RESPONSABLES</h2>
                {% with guardians=student.getGuardians %}
                {% for guardian in guardians%}
                <div class="subsection">
                    <h3 class="subsection-title">Responsable {{ forloop.counter }}</h3>
                    <table>
                        <tr class="half-row">
                            <td class="label-cell">NOM :</td>
                            <td>{{ guardian.last_name }}</td>
                            <td class="label-cell">PRÉNOM :</td>
                            <td>{{ guardian.first_name }}</td>
                        </tr>
                        <tr>
                            <td class="label-cell">ADRESSE :</td>
                            <td colspan="3">{{ guardian.address }}</td>
                        </tr>
                        <tr class="half-row">
                            <td class="label-cell">NÉ(E) LE :</td>
                            <td>{{ guardian.birth_date }}</td>
                            <td class="label-cell">EMAIL :</td>
                            <td>{{ guardian.email }}</td>
                        </tr>
                        <tr class="half-row">
                            <td class="label-cell">TÉLÉPHONE :</td>
                            <td>{{ guardian.phone }}</td>
                            <td class="label-cell">PROFESSION :</td>
                            <td>{{ guardian.profession }}</td>
                        </tr>
                    </table>
                </div>
                {% endfor %}
                {% endwith %}
            </div>

            <div class="section">
                <h2 class="section-title">FRATRIE</h2>
                {% with siblings=student.getGuardians %}
                {% for sibling in siblings%}
                <div class="subsection">
                    <h3 class="subsection-title">Frère/Sœur {{ forloop.counter }}</h3>
                    <table>
                        <tr class="half-row">
                            <td class="label-cell">NOM :</td>
                            <td>{{ sibling.last_name }}</td>
                            <td class="label-cell">PRÉNOM :</td>
                            <td>{{ sibling.first_name }}</td>
                        </tr>
                        <tr>
                            <td class="label-cell">NÉ(E) LE :</td>
                            <td colspan="3">{{ sibling.birth_date }}</td>
                        </tr>
                    </table>
                </div>
                {% endfor %}
                {% endwith %}
            </div>

            <div class="section">
                <h2 class="section-title">MODALITÉS DE PAIEMENT</h2>
                <h3 class="subsection-title">Frais d'inscription</h3>
                {% with registrationPayment=student|getRegistrationPaymentMethod %}
                <p>{{ registrationPayment }}</p>
                {% endwith %}
                <h3 class="subsection-title">Frais de scolarité</h3>
                {% with tuitionPayment=student|getTuitionPaymentMethod %}
                <p>{{ tuitionPayment }}</p>
                {% endwith %}
            </div>

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