<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ topic }}</title>
<style>
@page { size: 8.5in 11in; margin: 0.5in; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Georgia', serif; color: #1a1a1a; font-size: 12px; line-height: 1.5; }
h1 { font-size: 22px; color: #e65100; margin-bottom: 2px; }
h2 { font-size: 13px; color: #555; font-weight: normal; font-style: italic; margin-bottom: 6px; }
h3 { font-size: 14px; color: #e65100; margin: 4px 0 2px; page-break-after: avoid; }
.reading-box { background: #fff3e0; border-left: 5px solid #ff9800; border-radius: 0 8px 8px 0; padding: 6px 10px; margin-bottom: 4px; font-size: 11.5px; line-height: 1.3; }
.reading-box p { margin-bottom: 2px; text-indent: 1em; }
.reading-box p:last-child { margin-bottom: 0; }
.answer-line { border-bottom: 1px solid #b0bec5; height: 18px; margin-bottom: 2px; }
.answer-lines-triple .line-row { border-bottom: 1px solid #b0bec5; height: 15px; margin-bottom: 1px; }
.fill-blank-line { display: inline-block; width: 80px; border-bottom: 1px solid #b0bec5; height: 18px; vertical-align: text-bottom; margin: 0 2px; }
.activity-box { border: 2px solid #ff9800; border-radius: 6px; padding: 5px 8px; margin-bottom: 4px; background: #fffaf3; }
.activity-box p { margin-bottom: 2px !important; }
.draw-box { border: 2px dashed #ff9800; border-radius: 6px; height: 55px; background: #fafafa; margin-bottom: 4px; }
.circle-box { display: inline-block; width: 14px; height: 14px; border: 2px solid #ff9800; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.wordbank span { background: #fff3e0; border: 1px solid #ff9800; border-radius: 4px; padding: 1px 5px; font-size: 10.5px; margin-right: 2px; display: inline-block; margin-bottom: 2px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 6px; font-size: 11px; page-break-inside: avoid; }
th { background: #fff3e0; color: #e65100; padding: 3px 5px; text-align: left; font-size: 10.5px; border: 1px solid #ffe0b2; }
td { padding: 3px 5px; border: 1px solid #e0e0e0; }
tr:nth-child(even) { background: #fef5ee; }
.lesson-section { page-break-inside: avoid; }
.vocab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 6px; }
.vocab-card { border: 2px solid #ff9800; border-radius: 6px; padding: 4px 7px; }
.vocab-card strong { display: block; color: #e65100; font-size: 12px; margin-bottom: 2px; }
.vocab-card .line-row { border-bottom: 1px solid #b0bec5; height: 16px; }
.draw-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.tf-item { margin-bottom: 5px; }
</style>
</head>
<body>
{% for page_num in range(pages|length) %}
{% set page = pages[page_num] %}
<div class="page">
{% if page_num == 0 %}
<h1>{{ page.title or (icon ~ ' ' ~ topic) }}</h1>
<h2>Week {{ week }} • {{ day }} • {{ subtitle }}</h2>
{% endif %}
{% for section in page.sections %}
<section class="lesson-section">
{% if section.type == 'reading' %}
<h3>{{ section.icon or '📖' }} {{ section.title or 'Reading Time' }}</h3>
<div class="reading-box">
{% for para in section.paragraphs %}
<p>{{ para }}</p>
{% endfor %}
</div>
{% elif section.type == 'questions' %}
<h3>{{ section.icon or '✏️' }} {{ section.title or 'Reading Questions' }}</h3>
{% for q in section.questions %}
<p>{{ loop.index }}. {{ q.text }}</p>
{% if q.lines == 'triple' %}
<div class="answer-lines-triple">
<div class="line-row"></div>
<div class="line-row"></div>
<div class="line-row"></div>
</div>
{% else %}
<div class="answer-line"></div>
{% endif %}
{% endfor %}
{% elif section.type == 'vocab_grid' %}
<h3>{{ section.icon or '📝' }} {{ section.title or 'Vocabulary' }}</h3>
<p style="font-size:10.5px; color:#555;">{{ section.instruction or 'Write what each word means in your own words.' }}</p>
<div class="vocab-grid">
{% for word in section.words %}
<div class="vocab-card"><strong>{{ word }}</strong><div class="line-row"></div><div class="line-row"></div></div>
{% endfor %}
</div>
{% elif section.type == 'sort_table' %}
<h3>{{ section.icon or '📊' }} {{ section.title }}</h3>
<p style="font-size:10.5px; color:#555;">{{ section.instruction or '' }}</p>
<table>
<tr><th>{{ section.header[0] }}</th><th>{{ section.header[1] }}</th></tr>
{% for row in section.rows %}
<tr><td>{{ row[0] }}</td><td>{{ row[1] or '' }}</td></tr>
{% endfor %}
</table>
{% elif section.type == 'true_false' %}
<h3>{{ section.icon or '✏️' }} {{ section.title or 'True or False' }}</h3>
<p style="font-size:10.5px; color:#555;">{{ section.instruction or 'Write T for true or F for false in each circle.' }}</p>
{% for item in val(section, 'items', []) %}
<div class="tf-item"><span class="circle-box"></span> {{ item }}</div>
{% endfor %}
{% elif section.type == 'draw_grid' %}
<h3>{{ section.icon or '🎨' }} {{ section.title }}</h3>
<p style="font-size:10.5px; color:#555;">{{ section.instruction or '' }}</p>
<div class="draw-grid">
{% for _ in range(section.boxes|default(3)) %}
<div class="draw-box"></div>
{% endfor %}
</div>
{% elif section.type == 'fill_blank' %}
<h3>{{ section.icon or '✏️' }} {{ section.title or 'Fill in the Blanks' }}</h3>
{% if section.wordbank %}
<div class="wordbank">
{% for w in section.wordbank %}<span>{{ w }}</span>{% endfor %}
</div>
{% endif %}
{% for item in val(section, 'items', []) %}
<p>{{ loop.index }}. {{ item | blanks }}</p>
{% endfor %}
{% elif section.type == 'activity' %}
<h3>{{ section.icon or '🔍' }} {{ section.title }}</h3>
<div class="activity-box">
{% for para in section.content %}
<p style="margin-bottom:2px;">{{ para }}</p>
{% endfor %}
</div>
{% if section.table %}
<table>
<tr><th>{{ section.table.header[0] }}</th><th>{{ section.table.header[1] }}</th></tr>
{% for row in section.table.rows %}
<tr><td>{{ row[0] }}</td><td>{{ row[1] or '' }}</td></tr>
{% endfor %}
</table>
{% endif %}
{% elif section.type == 'think' %}
<h3>{{ section.icon or '🧠' }} {{ section.title or 'Think About It' }}</h3>
{% for q in section.questions %}
<p>{{ loop.index }}. {{ q.text }}</p>
{% if q.lines == 'triple' %}
<div class="answer-lines-triple">
<div class="line-row"></div>
<div class="line-row"></div>
<div class="line-row"></div>
</div>
{% else %}
<div class="answer-line"></div>
{% endif %}
{% endfor %}
{% elif section.type == 'review_table' %}
<h3>{{ section.icon or '📊' }} {{ section.title or 'Review' }}</h3>
<table>
<tr><th>{{ section.header[0] }}</th><th>{{ section.header[1] }}</th></tr>
{% for row in section.rows %}
<tr><td>{{ row[0] }}</td><td>{{ row[1] or '' }}</td></tr>
{% endfor %}
</table>
{% else %}
<h3>{{ section.icon or '' }} {{ section.title }}</h3>
<p>{{ section.content or '' }}</p>
{% endif %}
</section>
{% endfor %}
</div>
{% endfor %}
</body>
</html>