<!DOCTYPE html>
{# academics/templates/report_cards/anglophone_nursery.html #}
{# Matches doc 14 — DOMAINS > ACTIVITIES > SUB-ACTIVITIES, MARKS /20 #}
<html lang="en">
<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: 7pt; color: #000; }

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

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

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

  .th-dark { background: #1a3a5c; color: #fff; font-weight: bold; font-size: 6.5pt; }
  .th-mid  { background: #c5d3e8; font-weight: bold; font-size: 6pt; }
  .th-term { background: #e8edf5; font-weight: bold; font-size: 6pt; }

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

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

  .bottom-section { display: flex; gap: 3mm; margin-top: 2mm; }
  .conduct-box { border: 0.8pt solid #000; padding: 2mm; flex: 1; font-size: 7pt; }
  .conduct-box h4 { font-size: 7pt; font-weight: bold; margin-bottom: 1mm; }
  .conduct-row { display: flex; gap: 4mm; margin-top: 1mm; }

  .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; width: 28mm; }
  .sig-cell .line { border-top: 1pt solid #000; margin-top: 5mm; font-size: 6pt; }

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

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

<!-- Header -->
<div class="school-header">
  <div class="logo-row">
    {% if school.logo %}<img src="{{ school.logo.url }}" alt="Logo">{% else %}<div style="width:18mm"></div>{% endif %}
    <div class="title-block">
      <h1>{{ school.name }}</h1>
      <h2>PROGRESS REPORT CARD / ANGLOPHONE NURSERY</h2>
      <div style="font-size:7pt">{{ school.address }} | Tel: {{ school.phone }}</div>
    </div>
    {% if school.logo %}<img src="{{ school.logo.url }}" alt="Logo">{% else %}<div style="width:18mm"></div>{% endif %}
  </div>
</div>

<!-- Meta -->
<div class="meta-row">
  <div class="meta-cell"><label>Student: </label><span>{{ student.get_full_name }}</span></div>
  <div class="meta-cell"><label>CLASS: </label><span>{{ report_card.school_class }}</span></div>
  <div class="meta-cell"><label>TERM </label><span style="border:1pt solid #000;padding:0 3mm;font-weight:bold">{{ term_data.term.term }}</span></div>
  <div class="meta-cell"><label>Academic Year: </label><span>{{ term_data.term.academic_year }}</span></div>
</div>
<div class="meta-row">
  <div class="meta-cell"><label>Class Teacher: </label><span>{{ report_card.school_class.class_teacher.get_display_name }}</span></div>
  <div class="meta-cell"><label>Date of Birth: </label><span>{{ student.date_of_birth|date:"d/m/Y" }}</span></div>
</div>

<!-- Marks table — 3-level hierarchy: Domain > Activity > Sub-Activity -->
<table class="marks-table">
  <thead>
    <tr>
      <th class="th-dark" rowspan="2" style="width:7mm">DOMAINS</th>
      <th class="th-dark" rowspan="2" style="width:26mm">ACTIVITIES</th>
      <th class="th-dark" rowspan="2" style="width:32mm">SUB-ACTIVITIES</th>
      <th class="th-dark" colspan="3">MARKS /20</th>
      <th class="th-dark" rowspan="2" style="width:11mm">Synthese Marks</th>
      <th class="th-dark" rowspan="2" style="width:12mm">APPRECIATION</th>
    </tr>
    <tr>
      {% for m in term_data.month_labels %}
      <th class="th-mid" style="width:9mm">{{ 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 %}
      {% if row.show_activity %}
      <td class="activity-cell" rowspan="{{ row.activity_rowspan }}">{{ row.activity }}</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 %}

    <!-- Totals -->
    <tr class="totals-row">
      <td colspan="3" 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="3" style="text-align:right">GENERAL AVERAGE</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="3" style="text-align:right">POSITION</td>
      <td colspan="3"></td>
      <td>{{ report_card.position|default:'' }}/{{ term_data.class_size }}</td>
      <td></td>
    </tr>
  </tbody>
</table>

<!-- Bottom: Conduct + Remarks -->
<div class="bottom-section">
  <div class="conduct-box" style="flex:0 0 42%">
    <h4>CONDUCT</h4>
    <div style="border-bottom:0.8pt dotted #000;min-height:5mm">
      {{ report_card.conduct|default:'' }}
    </div>
    <h4 style="margin-top:2mm">REMARKS</h4>
    <div style="border-bottom:0.8pt dotted #000;min-height:5mm">
      {{ report_card.class_teacher_remark|default:'' }}
    </div>
  </div>
  {% if term_data.term.term == 3 %}
  <div style="flex:1;border:0.8pt solid #000;padding:2mm">
    <strong style="font-size:7pt;display:block;text-align:center;background:#1a3a5c;color:#fff;padding:1mm;margin-bottom:1.5mm">
      ANNUAL RESULTS
    </strong>
    <div style="display:flex;justify-content:space-between;margin-bottom:1mm">
      <span>1st Term Average</span>
      <span style="border-bottom:0.8pt dotted #000;min-width:18mm">{{ report_card.term1_average|default:'……' }}</span>
    </div>
    <div style="display:flex;justify-content:space-between;margin-bottom:1mm">
      <span>2nd Term Average</span>
      <span style="border-bottom:0.8pt dotted #000;min-width:18mm">{{ report_card.term2_average|default:'……' }}</span>
    </div>
    <div style="display:flex;justify-content:space-between;margin-bottom:1mm">
      <span>3rd Term Average</span>
      <span style="border-bottom:0.8pt dotted #000;min-width:18mm">{{ report_card.term3_average|default:'……' }}</span>
    </div>
    <div style="display:flex;justify-content:space-between;border-top:1pt solid #000;padding-top:1mm;font-weight:bold">
      <span>Annual Average</span>
      <span style="border-bottom:0.8pt dotted #000;min-width:18mm">{{ report_card.annual_average|default:'……' }}</span>
    </div>
    <div style="display:flex;justify-content:space-between;margin-top:1mm">
      <span>Annual Position</span>
      <span style="border-bottom:0.8pt dotted #000;min-width:18mm">{{ report_card.annual_position|default:'……' }}/{{ term_data.class_size }}</span>
    </div>
    <!-- Decision -->
    <div style="margin-top:2mm;border:0.8pt solid #000;padding:1mm">
      <strong style="display:block;text-align:center;font-size:7pt">DECISION</strong>
      <div style="display:flex;gap:5mm;margin-top:1mm;justify-content:center">
        <label style="display:flex;align-items:center;gap:1mm">
          <span style="border:0.8pt solid #000;width:4mm;height:4mm;display:inline-block;text-align:center;line-height:4mm">
            {% if report_card.promotion_status == 'promoted' %}✓{% endif %}
          </span> Promoted
        </label>
        <label style="display:flex;align-items:center;gap:1mm">
          <span style="border:0.8pt solid #000;width:4mm;height:4mm;display:inline-block;text-align:center;line-height:4mm">
            {% if report_card.promotion_status == 'repeat' %}✓{% endif %}
          </span> Repeat
        </label>
        <label style="display:flex;align-items:center;gap:1mm">
          <span style="border:0.8pt solid #000;width:4mm;height:4mm;display:inline-block;text-align:center;line-height:4mm">
            {% if report_card.promotion_status == 'dismissed' %}✓{% endif %}
          </span> Dismissed
        </label>
      </div>
    </div>
  </div>
  {% endif %}
</div>

<!-- Signatures -->
<div class="sig-row">
  <div class="sig-cell"><div class="line">Head Teacher Sign.</div></div>
  <div class="sig-cell"><div class="line">Class Teacher Sign.</div></div>
  <div class="sig-cell"><div class="line">Parent's Sign.</div></div>
</div>

{% if term_data.term.term == 3 %}
<div style="margin-top:3mm;font-size:7.5pt"><strong>NEXT TERM BEGINS: </strong>
  <span style="border-bottom:1pt solid #000;display:inline-block;min-width:30mm">
    {{ report_card.next_term_begins|date:"d/m/Y"|default:'…………………' }}
  </span>
</div>
{% endif %}

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