<!DOCTYPE html>
{# academics/templates/report_cards/francophone_nursery.html #}
{# Matches doc 12 — ACTIVITÉS > SOUS-ACTIVITÉS, MARKS /20 #}
<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;
    font-size: 7pt;
  }
  table.marks-table td.label { text-align: left; }

  .th-dark { background: #1f4e7a; color: #fff; font-weight: bold; font-size: 7pt; }
  .th-mid  { background: #c0d0e8; 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: #dde5f5;
  }

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

  .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; }

  .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 -->
<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 MATERNELLE</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>
<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>Classe Teacher : </label><span>{{ report_card.school_class.class_teacher.get_display_name }}</span></div>
  <div class="meta-cell"><label>Année : </label><span>{{ term_data.term.academic_year }}</span></div>
</div>

<!-- Tableau des notes -->
<table class="marks-table">
  <thead>
    <tr>
      <th class="th-dark" rowspan="2" style="width:9mm">ACTIVITÉS</th>
      <th class="th-dark" rowspan="2" style="width:50mm">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>

<!-- Visas -->
<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>

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