<!DOCTYPE html>
{# academics/templates/report_cards/francophone_primary.html #}
{# Matches doc 11 — DOMAINES > SOUS-ACTIVITÉS, MARKS /20, scale NA/ECA/A/A+ #}
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
  @page { size: A4 portrait; margin: 7mm; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: Arial, sans-serif; font-size: 7.5pt; color: #000; }

  .school-header { text-align: center; margin-bottom: 2mm; }
  .school-header h1 { font-size: 11pt; font-weight: bold; text-transform: uppercase; }
  .logo-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2mm; }
  .logo-row img { height: 20mm; }
  .title-block { flex: 1; }

  .meta-row { display: flex; gap: 5mm; margin-bottom: 1.5mm; }
  .meta-cell { flex: 1; }
  .meta-cell label { font-weight: bold; }
  .meta-cell span  { border-bottom: 0.8pt dotted #000; display: inline-block; min-width: 28mm; }

  table.marks-table { width: 100%; border-collapse: collapse; }
  table.marks-table th, table.marks-table td {
    border: 0.5pt solid #000;
    padding: 0.7mm 0.8mm;
    text-align: center;
    vertical-align: middle;
  }
  table.marks-table td.label { text-align: left; }

  .th-dark { background: #2e4a8a; color: #fff; font-weight: bold; font-size: 7pt; }
  .th-mid  { background: #c5cfe8; font-weight: bold; font-size: 6.5pt; }

  td.domain-cell {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-weight: bold;
    font-size: 6.5pt;
    text-align: center;
    width: 8mm;
    background: #e2e8f5;
  }

  tr.totals-row td { font-weight: bold; background: #f0f3fc; }

  /* Appreciation scale legend box */
  .scale-box { border: 1pt solid #2e4a8a; padding: 2mm; margin-top: 2mm; font-size: 6.5pt; }
  .scale-box h4 { font-size: 7pt; font-weight: bold; text-align: center; color: #fff;
                  background: #2e4a8a; margin: -2mm -2mm 1.5mm -2mm; padding: 1mm; }
  .scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm; }
  .scale-item { border: 0.5pt solid #aaa; padding: 1mm; font-size: 6pt; text-align: center; }

  /* Annual results box */
  .annual-box { border: 1pt solid #000; padding: 2mm; }
  .annual-box h3 { font-size: 7.5pt; font-weight: bold; text-align: center;
                   background: #2e4a8a; color: #fff; margin: -2mm -2mm 2mm -2mm; padding: 1mm; }
  .annual-row { display: flex; justify-content: space-between; margin-bottom: 1.5mm; font-size: 7pt; }
  .annual-row span { border-bottom: 0.8pt dotted #000; min-width: 20mm; display: inline-block; }

  /* Conduct observation */
  .conduct-obs { border: 1pt solid #2e4a8a; padding: 2mm; margin-top: 2mm; font-size: 6.5pt; }
  .conduct-obs h4 { font-size: 7pt; font-weight: bold; text-align: center; color: #fff;
                    background: #2e4a8a; margin: -2mm -2mm 1.5mm -2mm; padding: 1mm; }

  /* Visa / signature boxes */
  .visa-section { border: 1pt solid #2e4a8a; padding: 2mm; margin-top: 2mm; min-height: 12mm; }
  .visa-section h4 { font-size: 6.5pt; font-weight: bold; text-align: center; color: #fff;
                     background: #2e4a8a; margin: -2mm -2mm 1.5mm -2mm; padding: 0.8mm; }

  .sig-row { display: flex; justify-content: space-between; margin-top: 3mm; border-top: 1pt solid #000; padding-top: 1.5mm; }
  .sig-cell { text-align: center; }
  .sig-cell .line { border-top: 1pt solid #000; margin-top: 5mm; font-size: 6.5pt; }

  .side-by-side { display: flex; gap: 3mm; margin-top: 3mm; }

  .page-break { page-break-before: always; }
</style>
</head>
<body>

{% for term_data in terms %}
{% if not forloop.first %}<div class="page-break"></div>{% endif %}

<!-- En-tête école -->
<div class="school-header">
  <div class="logo-row">
    {% if school.logo %}<img src="{{ school.logo.url }}" alt="">{% else %}<div style="width:20mm"></div>{% endif %}
    <div class="title-block">
      <h1>{{ school.name }}</h1>
      <div style="font-size:8.5pt;font-weight:bold">BULLETIN DE NOTES — SECTION FRANCOPHONE PRIMAIRE</div>
      <div style="font-size:7.5pt">{{ school.address }} | Tél : {{ school.phone }}</div>
    </div>
    {% if school.logo %}<img src="{{ school.logo.url }}" alt="">{% else %}<div style="width:20mm"></div>{% endif %}
  </div>
</div>

<!-- Informations élève -->
<div class="meta-row">
  <div class="meta-cell"><label>Nom et Prénom(s) : </label><span>{{ student.get_full_name }}</span></div>
  <div class="meta-cell"><label>CLASSE : </label><span>{{ report_card.school_class }}</span></div>
  <div class="meta-cell" style="flex:0 0 auto">
    <label>TRIM. </label>
    <span style="border:1pt solid #000;padding:0 3mm;font-weight:bold">{{ term_data.term.term }}</span>
  </div>
  <div class="meta-cell"><label>Année : </label><span>{{ term_data.term.academic_year }}</span></div>
</div>
<div class="meta-row">
  <div class="meta-cell"><label>Enseignant(e) : </label><span>{{ report_card.school_class.class_teacher.get_display_name }}</span></div>
  <div class="meta-cell"><label>Date de naissance : </label><span>{{ student.date_of_birth|date:"d/m/Y" }}</span></div>
</div>

<!-- Tableau des notes -->
<table class="marks-table">
  <thead>
    <tr>
      <th class="th-dark" rowspan="2" style="width:9mm">DOMAINES</th>
      <th class="th-dark" rowspan="2" style="width:45mm">SOUS ACTIVITÉS</th>
      <th class="th-dark" colspan="3">PÉRIODE</th>
      <th class="th-dark" rowspan="2" style="width:13mm">Synthèse Notes</th>
      <th class="th-dark" rowspan="2" style="width:15mm">APPRÉCIATION</th>
    </tr>
    <tr>
      {% for m in term_data.month_labels %}
      <th class="th-mid" style="width:10mm">{{ m }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for row in term_data.rows %}
    <tr>
      {% if row.show_domain %}
      <td class="domain-cell" rowspan="{{ row.domain_rowspan }}">{{ row.domain }}</td>
      {% endif %}
      <td class="label">{{ row.sub_activity }}</td>
      {% for score in row.month_scores %}
      <td>{{ score|default:'' }}</td>
      {% endfor %}
      <td style="font-weight:bold">{{ row.synthese|default:'' }}</td>
      <td>{{ row.appreciation|default:'' }}</td>
    </tr>
    {% endfor %}

    <!-- TOTAL -->
    <tr class="totals-row">
      <td colspan="2" style="text-align:right">TOTAL</td>
      {% for t in term_data.month_totals %}<td>{{ t|default:'' }}</td>{% endfor %}
      <td>{{ term_data.total_synthese|default:'' }}</td>
      <td></td>
    </tr>
    <tr class="totals-row">
      <td colspan="2" style="text-align:right">MOY. MENSUELLE</td>
      {% for a in term_data.month_averages %}<td>{{ a|default:'' }}</td>{% endfor %}
      <td>{{ term_data.average|default:'' }}</td>
      <td></td>
    </tr>
    <tr class="totals-row">
      <td colspan="2" style="text-align:right">RANG MENSUEL</td>
      {% for _ in term_data.month_labels %}<td></td>{% endfor %}
      <td>{{ report_card.position|default:'' }}/{{ term_data.class_size }}</td>
      <td></td>
    </tr>
  </tbody>
</table>

<!-- Visa row under term table -->
<div class="sig-row">
  <div class="sig-cell"><div class="line">Visa Enseignant(e)</div></div>
  <div class="sig-cell"><div class="line">Visa Directeur</div></div>
  <div class="sig-cell"><div class="line">Visa Parent</div></div>
</div>

{# ── Annual results (page 2 content — shown on Term 3) ── #}
{% if term_data.term.term == 3 %}
<div class="page-break"></div>

<!-- Repeat header on annual page -->
<div class="meta-row" style="border-bottom:1.5pt solid #000;padding-bottom:2mm;margin-bottom:2mm">
  <div class="meta-cell"><label>Nom : </label><span>{{ student.get_full_name }}</span></div>
  <div class="meta-cell"><label>CLASSE : </label><span>{{ report_card.school_class }}</span></div>
  <div class="meta-cell"><label>Enseignant(e) : </label><span>{{ report_card.school_class.class_teacher.get_display_name }}</span></div>
</div>

<div class="side-by-side">
  <!-- Left: annual subject summary (synthèse notes for each domain) -->
  <div style="flex:1">
    <table class="marks-table" style="width:100%">
      <thead>
        <tr>
          <th class="th-dark" style="width:9mm">DOMAINES</th>
          <th class="th-dark">SOUS ACTIVITÉS</th>
          <th class="th-dark" colspan="3">PÉRIODE</th>
          <th class="th-dark" style="width:13mm">Synthèse Notes</th>
          <th class="th-dark" style="width:15mm">APPRÉCIATION</th>
        </tr>
        <tr>
          <th class="th-mid" colspan="2"></th>
          <th class="th-mid">7e Mois</th>
          <th class="th-mid">8e Mois</th>
          <th class="th-mid">9e Mois</th>
          <th class="th-mid"></th>
          <th class="th-mid"></th>
        </tr>
      </thead>
      <tbody>
        {% for row in term_data.rows %}
        <tr>
          {% if row.show_domain %}
          <td class="domain-cell" rowspan="{{ row.domain_rowspan }}">{{ row.domain }}</td>
          {% endif %}
          <td class="label" style="font-size:6.5pt">{{ row.sub_activity }}</td>
          {% for score in row.month_scores %}<td>{{ score|default:'' }}</td>{% endfor %}
          <td style="font-weight:bold">{{ row.synthese|default:'' }}</td>
          <td>{{ row.appreciation|default:'' }}</td>
        </tr>
        {% endfor %}
        <tr class="totals-row">
          <td colspan="2" style="text-align:right">TOTAL</td>
          {% for t in term_data.month_totals %}<td>{{ t|default:'' }}</td>{% endfor %}
          <td>{{ term_data.total_synthese|default:'' }}</td><td></td>
        </tr>
        <tr class="totals-row">
          <td colspan="2" style="text-align:right">MOY. MENSUELLE</td>
          {% for a in term_data.month_averages %}<td>{{ a|default:'' }}</td>{% endfor %}
          <td>{{ term_data.average|default:'' }}</td><td></td>
        </tr>
        <tr class="totals-row">
          <td colspan="2" style="text-align:right">RANG MENSUEL</td>
          {% for _ in term_data.month_labels %}<td></td>{% endfor %}
          <td>{{ report_card.position|default:'' }}/{{ term_data.class_size }}</td><td></td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Right: Annual results + conduct + scale -->
  <div style="flex:0 0 58mm; display:flex; flex-direction:column; gap:2mm;">

    <div class="annual-box">
      <h3>RÉSULTATS ANNUELS</h3>
      <div class="annual-row"><strong>MOY. 1 TRIM</strong> <span>{{ report_card.term1_average|default:'…………' }}</span></div>
      <div class="annual-row"><strong>MOY. 2 TRIM</strong> <span>{{ report_card.term2_average|default:'…………' }}</span></div>
      <div class="annual-row"><strong>MOY. 3 TRIM</strong> <span>{{ report_card.term3_average|default:'…………' }}</span></div>
      <div style="border-top:0.8pt solid #000;padding-top:1mm;margin-top:1mm">
        <div class="annual-row"><strong>MOY. GEN. DE LA CLASSE</strong> <span></span></div>
        <div class="annual-row"><strong>MOY. ANNUELLE</strong>
          <span style="font-weight:bold">{{ report_card.annual_average|default:'…………' }}</span>
        </div>
      </div>
      <div class="annual-row"><strong>RANG ANNUEL</strong>
        <span>{{ report_card.annual_position|default:'…' }}/{{ term_data.class_size }}</span>
      </div>
      <div style="margin-top:1.5mm">
        <div class="annual-row"><strong>PROMU(E) EN</strong>
          <span>{% if report_card.promotion_status == 'promoted' %}{{ report_card.promoted_to_class }}{% endif %}</span>
        </div>
        <div class="annual-row"><strong>REDOUBLE</strong>
          <span>{% if report_card.promotion_status == 'repeat' %}✓{% endif %}</span>
        </div>
        <div class="annual-row"><strong>EXCLU(E)</strong>
          <span>{% if report_card.promotion_status == 'dismissed' %}✓{% endif %}</span>
        </div>
      </div>
    </div>

    <!-- Conduct observation (from doc 11 page 2) -->
    <div class="conduct-obs">
      <h4>OBSERVATION SUR LA CONDUITE</h4>
      <div style="font-size:6.5pt;line-height:1.6">
        Discipline &nbsp;
        Non<span style="border:0.5pt solid #000;width:3mm;height:3mm;display:inline-block;vertical-align:middle;text-align:center">
          {% if not report_card.discipline_brutal %}✓{% endif %}</span>
        &nbsp;Oui<span style="border:0.5pt solid #000;width:3mm;height:3mm;display:inline-block;vertical-align:middle;text-align:center">
          {% if report_card.discipline_brutal %}✓{% endif %}</span>
        &nbsp;Brutal(e) Non&nbsp;Oui<br>
        Absentéisme &nbsp;
        Non<span style="border:0.5pt solid #000;width:3mm;height:3mm;display:inline-block;vertical-align:middle;text-align:center">
          {% if not report_card.absenteisme %}✓{% endif %}</span>
        &nbsp;Oui<span style="border:0.5pt solid #000;width:3mm;height:3mm;display:inline-block;vertical-align:middle;text-align:center">
          {% if report_card.absenteisme %}✓{% endif %}</span>
        &nbsp;Barvade(e) Non Oui
      </div>
    </div>

    <!-- Scale legend -->
    <div class="scale-box">
      <h4>APPRÉCIATIONS GÉNÉRALES</h4>
      <div class="scale-grid">
        <div class="scale-item" style="background:#ffeaea"><strong>De 10 à 10/20 = NA</strong><br>Compétences non acquises</div>
        <div class="scale-item" style="background:#fff7e0"><strong>De 11 à 14/20 = ECA</strong><br>Compétences en cours d'acquisition</div>
        <div class="scale-item" style="background:#e8f4e8"><strong>De 15 à 17/20 = A</strong><br>Compétences acquises</div>
        <div class="scale-item" style="background:#e0eeff"><strong>De 18à 20/20 = A+</strong><br>Expert</div>
      </div>
    </div>

    <!-- Visa blocks -->
    <div class="visa-section">
      <h4>OBS. ET VISA L'ENSEIGNANT(E)</h4>
      <div style="min-height:10mm">{{ report_card.class_teacher_remark|default:'' }}</div>
    </div>
    <div class="visa-section">
      <h4>OBS. ET VISA DIRECTION</h4>
      <div style="min-height:10mm">{{ report_card.head_teacher_remark|default:'' }}</div>
    </div>
    <div class="visa-section">
      <h4>VISA PARENTS</h4>
      <div style="min-height:10mm"></div>
    </div>
  </div>
</div>
{% endif %}

{% endfor %}
</body>
</html>
