<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ topic }}</title>
<style>
@page { size: letter; margin: 0.7in 0.85in; }
body { font-family: 'Comic Neue', 'Comic Sans MS', sans-serif; color: #222; background: #fff; margin: 0; line-height: 1.4; }
p { orphans: 3; widows: 3; }
header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid #26A69A; padding-bottom: 6px; margin-bottom: 12px; }
header h1 { font-size: 17px; margin: 0; color: #26A69A; }
header .subtitle { font-size: 12px; color: #666; }
header .name-line { font-size: 12px; }
h2 { font-size: 14px; color: #26A69A; margin: 14px 0 4px 0; border-bottom: 2px solid #B2DFDB; padding-bottom: 2px; break-after: avoid; }
h2.coral { color: #FF7043; border-bottom-color: #FFAB91; }
.note { background: #E8F5E9; border-left: 4px solid #26A69A; padding: 6px 10px; border-radius: 4px; font-size: 11.5px; margin: 4px 0 10px 0; color: #333; break-inside: avoid; }
.activity { break-inside: avoid; page-break-inside: avoid; }
.word-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.word-card { border: 1.5px solid #B2DFDB; border-radius: 6px; padding: 8px; background: #FAFAFA; break-inside: avoid; page-break-inside: avoid; }
.word-card .word { font-size: 15px; font-weight: bold; color: #26A69A; margin-bottom: 2px; }
.word-card .def { font-size: 10.5px; color: #555; line-height: 1.3; }
.sort-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 11px; }
.sort-table th { background: #26A69A; color: white; padding: 5px 4px; font-size: 11px; text-align: center; border-radius: 4px; }
.sort-table td { border: 1px solid #B2DFDB; padding: 4px; text-align: center; vertical-align: top; min-height: 40px; border-radius: 4px; }
tr { break-inside: avoid; }
.fb-item { background: #E0F2F1; border: 1.5px solid #80CBC4; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px; break-inside: avoid; page-break-inside: avoid; }
.fb-item p { margin: 0 0 4px 0; }
.word-bank { background: #FFF3E0; border: 2px dashed #FFB74D; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.word-bank-label { font-size: 11px; font-weight: bold; color: #FF7043; margin-bottom: 4px; }
.word-bank-words { display: flex; flex-wrap: wrap; gap: 6px; }
.word-bank-words span { background: white; border: 1px solid #FFB74D; border-radius: 4px; padding: 2px 8px; font-size: 11px; }
.ws-grid { display: inline-block; font-family: monospace; font-size: 14px; letter-spacing: 4px; line-height: 1.6; background: #F5F5F5; border: 2px solid #B2DFDB; border-radius: 6px; padding: 8px 12px; text-align: left; }
.ws-words { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.ws-words span { font-size: 11px; background: #E0F2F1; border: 1px solid #80CBC4; border-radius: 3px; padding: 2px 6px; }
.mystery-box { background: #FFF8E1; border: 2px solid #FFD54F; border-radius: 8px; padding: 10px; margin: 8px 0; break-inside: avoid; }
.mystery-box .title { font-size: 13px; font-weight: bold; color: #FF7043; margin-bottom: 6px; }
.mystery-box li { font-size: 11px; margin: 3px 0; }
.write-line { position: relative; height: 28px; margin: 4px 0; width: 100%; }
.write-line-sky { position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid #333; }
.write-line-ground { position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #333; }
.write-line-fence { position: absolute; left: 0; right: 0; bottom: 14px; border-bottom: 1px dashed #ccc; }
.copy-line { position: relative; height: 28px; margin: 3px 0; width: 100%; }
.copy-line-sky { position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid #333; }
.copy-line-ground { position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #333; }
.copy-line-fence { position: absolute; left: 0; right: 0; bottom: 14px; border-bottom: 1px dashed #ccc; }
.story-box { background: #F3E5F5; border: 1.5px solid #CE93D8; border-radius: 8px; padding: 10px; font-size: 12px; line-height: 1.5; margin: 8px 0; break-inside: avoid; }
.test-item { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; }
.test-item .num { font-weight: bold; color: #26A69A; min-width: 20px; }
.divider { border-top: 1px dashed #ccc; margin: 12px 0; }
.page { width: 7.5in; min-height: 10in; position: relative; }
.page + .page { page-break-before: always; }
.answer-line { border-bottom: 1px solid #b0bec5; height: 22px; }
.answer-lines-triple .line-row { border-bottom: 1px solid #b0bec5; height: 18px; }
.circle-box { display: inline-block; width: 14px; height: 14px; border: 2px solid #26A69A; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.draw-box { border: 2px dashed #B2DFDB; border-radius: 8px; height: 70px; background: #fafafa; margin-bottom: 6px; }
.activity-box { border: 2px solid #26A69A; border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; background: #FAFAFA; }
</style>
</head>
<body>
{% for page_num in range(pages|length) %}
{% set page = pages[page_num] %}
<div class="page">
{% if page_num == 0 %}
<header>
<h1>{{ header_title or 'English Language Arts' }}</h1>
<div class="subtitle">Week {{ week }}, {{ day }} -- {{ topic }}</div>
<div class="name-line">Name: ________________</div>
</header>
{% endif %}
{% for section in page.sections %}
{% if section.type == 'objectives' %}
<h2>{{ section.title or "Here's What We're Learning" }}</h2>
<div class="note">{{ section.note }}</div>
{% if section.bullets %}
<ul style="font-size:12px;margin:4px 0 8px 0;">
{% for bullet in section.bullets %}<li>{{ bullet }}</li>{% endfor %}
</ul>
{% endif %}
{% elif section.type == 'word_cards' %}
<h2>{{ section.title or 'Word Cards' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
<div class="word-grid">
{% for card in section.cards %}
<div class="word-card">
<div class="word">{{ card.word }}</div>
{% if card.def %}<div class="def">{{ card.def }}</div>{% endif %}
{% if card.write_line %}
<div class="write-line">
<div class="write-line-sky"></div>
<div class="write-line-fence"></div>
<div class="write-line-ground"></div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% elif section.type == 'spelling_story' %}
<h2>{{ section.title or 'Spelling Story' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
<div class="story-box">{{ section.story }}</div>
{% elif section.type == 'grammar' %}
<h2>{{ section.title or 'Grammar' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
{% elif section.type == 'practice' %}
<h2>{{ section.title or 'Practice' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
{% for item in val(section, 'items', []) %}
<div style="margin:4px 0;font-size:12px;">{{ item.text }}<div class="write-line"><div class="write-line-sky"></div><div class="write-line-fence"></div><div class="write-line-ground"></div></div></div>
{% endfor %}
{% elif section.type == 'vowel_sort' %}
<h2>{{ section.title or 'Short Vowel Sort' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
<table class="sort-table">
<tr>{% for col in section.columns %}<th>{{ col }}</th>{% endfor %}</tr>
{% for row in section.rows %}
<tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>
{% endfor %}
</table>
{% elif section.type == 'copy_practice' %}
<h2>{{ section.title or 'Copy Practice' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
{% for word in section.words %}
<div style="display:flex;align-items:center;gap:8px;margin:3px 0;">
<span style="font-weight:bold;min-width:60px;">{{ word }}</span>
<div style="flex:1;">
<div class="copy-line"><div class="copy-line-sky"></div><div class="copy-line-fence"></div><div class="copy-line-ground"></div></div>
</div>
</div>
{% endfor %}
{% elif section.type == 'fill_blank' %}
<h2>{{ section.title or 'Fill in the Blank' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
{% if section.wordbank %}
<div class="word-bank">
<div class="word-bank-label">Word Bank</div>
<div class="word-bank-words">
{% for w in section.wordbank %}<span>{{ w }}</span>{% endfor %}
</div>
</div>
{% endif %}
{% for item in val(section, 'items', []) %}
<div class="fb-item"><p>{{ item }}</p><div class="write-line"><div class="write-line-sky"></div><div class="write-line-fence"></div><div class="write-line-ground"></div></div></div>
{% endfor %}
{% elif section.type == 'sentence_writing' %}
<h2>{{ section.title or 'Sentence Writing' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
{% for item in val(section, 'items', []) %}
<div style="margin:6px 0;"><strong>{{ item }}</strong><div class="write-line"><div class="write-line-sky"></div><div class="write-line-fence"></div><div class="write-line-ground"></div></div></div>
{% endfor %}
{% elif section.type == 'word_search' %}
<h2>{{ section.title or 'Word Search' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
{% if section.words %}
<div class="ws-words">{% for w in section.words %}<span>{{ w }}</span>{% endfor %}</div>
{% endif %}
{% if section.grid %}<div class="ws-grid">{{ section.grid }}</div>{% endif %}
{% elif section.type == 'mystery_word' %}
<h2>{{ section.title or 'Mystery Word' }}</h2>
<div class="mystery-box">
<div class="title">{{ section.mystery_title or 'What am I?' }}</div>
{% if section.clues %}
<ul style="margin:4px 0;padding-left:20px;">
{% for clue in section.clues %}<li>{{ clue }}</li>{% endfor %}
</ul>
{% endif %}
<div style="margin-top:8px;font-weight:bold;color:#FF7043;">
I am: <div class="write-line"><div class="write-line-sky"></div><div class="write-line-fence"></div><div class="write-line-ground"></div></div>
</div>
</div>
{% elif section.type == 'word_journal' %}
<h2>{{ section.title or 'Word Journal' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
<div style="height:120px;border:2px dashed #B2DFDB;border-radius:8px;margin:8px 0;"></div>
{% for _ in range(section.lines|default(2)) %}
<div class="write-line"><div class="write-line-sky"></div><div class="write-line-fence"></div><div class="write-line-ground"></div></div>
{% endfor %}
{% elif section.type == 'opposite_match' %}
<h2>{{ section.title or 'Opposite Match-Up' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
{% for item in val(section, 'items', []) %}
<div style="margin:4px 0;font-size:12px;">{{ item.word }} ↔ {{ item.match }}<div class="write-line"><div class="write-line-sky"></div><div class="write-line-fence"></div><div class="write-line-ground"></div></div></div>
{% endfor %}
{% elif section.type == 'questions' %}
<h2>{{ section.title or 'Reading Questions' }}</h2>
{% 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 == 'true_false' %}
<h2>{{ section.title or 'True or False' }}</h2>
{% for item in val(section, 'items', []) %}
<div class="test-item"><span class="num">{{ loop.index }}.</span> {{ item }}</div>
{% endfor %}
{% elif section.type == 'writing_space' %}
<h2>{{ section.title or 'Writing Time' }}</h2>
{% if section.prompt %}<div class="note">{{ section.prompt }}</div>{% endif %}
{% for _ in range(section.lines|default(4)) %}
<div class="write-line"><div class="write-line-sky"></div><div class="write-line-fence"></div><div class="write-line-ground"></div></div>
{% endfor %}
{% elif section.type == 'draw' %}
<h2>{{ section.title or 'Draw' }}</h2>
{% if section.note %}<div class="note">{{ section.note }}</div>{% endif %}
<div class="draw-box"></div>
{% elif section.type == 'reading' %}
<h2>{{ section.title or 'Reading Time' }}</h2>
<div class="story-box">{% for para in section.paragraphs %}<p>{{ para }}</p>{% endfor %}</div>
{% elif section.type == 'note' %}
<h2>{{ section.title }}</h2>
<div class="note">{{ section.content }}</div>
{% else %}
<h2>{{ section.title }}</h2>
<p>{{ section.content or '' }}</p>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</body>
</html>