<!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>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;
                line-height: 1.6;
                margin: 0;
                padding: 0;
                color: #333;
                background-color: #f9f9f9;
            }
            .container {
                width: 100%;
                padding: 20px;
                background-color: #fff;
                border-radius: 10px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            }
            .header {
                text-align: center;
                margin-bottom: 30px;
                border-bottom: 3px solid #4CAF50;
                padding-bottom: 15px;
                position: relative;
            }
            .title {
                font-size: 20pt;
                font-weight: bold;
                color: #4CAF50;
                margin: 0;
            }
            .photo {
                position: absolute;
                top: 0;
                right: 0;
                width: 100px;
                height: 100px;
                object-fit: cover;
                border: 2px solid #4CAF50;
                border-radius: 10px;
            }
            .section {
                margin-bottom: 20px;
                padding: 15px;
                border: 1px solid #ddd;
                border-radius: 8px;
                background-color: #fefefe;
            }
            .section-title {
                font-size: 18pt;
                font-weight: bold;
                color: #4CAF50;
                margin-bottom: 10px;
                text-align: left;
                border-bottom: 2px solid #4CAF50;
                padding-bottom: 5px;
            }
            table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 10px;
            }
            td {
                padding: 8px;
                vertical-align: top;
            }
            .label-cell {
                font-weight: bold;
                color: #555;
                width: 35%;
                text-align: right;
                padding-right: 10px;
            }
            .value-cell {
                color: #333;
                width: 65%;
                text-align: left;
            }
            .phone {
                white-space: nowrap;
            }
            .signature {
                margin-top: 30px;
                text-align: right;
                font-style: italic;
                color: #555;
            }
            .signature-text {
                font-weight: bold;
                color: #333;
            }
        </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>

            <!-- Student Section -->
            <div class="section">
                <h2 class="section-title">ÉLÈVE</h2>
                <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 colspan="3" class="value-cell">{{ 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 colspan="3" class="value-cell">{{ student.birth_place }} ({{ student.birth_postal_code }})</td>
                    </tr>
                    <tr>
                        <td class="label-cell">Nationalité :</td>
                        <td class="value-cell">{{ student.nationality }}</td>
                        <td class="label-cell">Niveau :</td>
                        <td class="value-cell">{{ student|getStudentLevel }}</td>
                    </tr>
                </table>
            </div>

            <!-- Guardians Section -->
            <div class="section">
                <h2 class="section-title">RESPONSABLES</h2>
                {% for guardian in student.getGuardians %}
                <div class="subsection">
                    <h3 class="subsection-title">Responsable {{ forloop.counter }}</h3>
                    <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 colspan="3" class="value-cell">{{ guardian.address }}</td>
                        </tr>
                        <tr>
                            <td class="label-cell">Né(e) le :</td>
                            <td class="value-cell">{{ guardian.birth_date }}</td>
                            <td class="label-cell">Email :</td>
                            <td class="value-cell">{{ guardian.email }}</td>
                        </tr>
                        <tr>
                            <td class="label-cell">Téléphone :</td>
                            <td class="value-cell phone">{{ guardian.phone|phone_format }}</td>
                            <td class="label-cell">Profession :</td>
                            <td class="value-cell">{{ guardian.profession }}</td>
                        </tr>
                    </table>
                </div>
                {% endfor %}
            </div>

            <!-- Siblings Section -->
            <div class="section">
                <h2 class="section-title">FRATRIE</h2>
                {% for sibling in student.getSiblings %}
                <div class="subsection">
                    <h3 class="subsection-title">Frère/Soeur {{ forloop.counter }}</h3>
                    <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 colspan="3" class="value-cell">{{ sibling.birth_date }}</td>
                        </tr>
                    </table>
                </div>
                {% endfor %}
            </div>

            <!-- Payment Section -->
            <div class="section">
                <h2 class="section-title">MODALITÉS DE PAIEMENT</h2>
                <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 Section -->
            <div class="signature">
                Fait le <span class="signature-text">{{ signatureDate }}</span> à <span class="signature-text">{{ signatureTime }}</span>
            </div>
        </div>
    </body>
</html>