{{define "zitie"}}
<div id="panel-zitie" class="tool-panel">
    <header class="page-header">
        <h1>汉字字帖生成器</h1>
        <p>生成高颜值的硬笔/毛笔书法练习帖。</p>
    </header>
    <div class="tabs-container">
        <div id="tab-teaching" class="tab-btn active" onclick="switchZitieTab('teaching')">2x3 教学方格</div>
        <div id="tab-step" class="tab-btn" onclick="switchZitieTab('step')">步进式分解</div>
        <div id="tab-manuscript" class="tab-btn" onclick="switchZitieTab('manuscript')">古风竖排</div>
    </div>
    <div class="card">
        <div style="display: flex; flex-direction: column; gap: 24px;">
            <div class="input-group">
                <label id="input-label">输入汉字内容</label>
                <textarea id="chars" placeholder="支持多行输入...">永和九年，岁在癸丑。</textarea>
            </div>
            <div style="display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 200px;">
                    <label>纸张大小</label>
                    <select id="paper_size">
                        <option value="A4">A4 (210x297mm)</option>
                        <option value="Letter">Letter (8.5x11in)</option>
                    </select>
                </div>
                <div id="font-select-group" style="flex: 1; min-width: 200px; display: none;">
                    <label>书法字体</label>
                    <select id="font_type">
                        <option value="kaiti">华光楷体</option>
                        <option value="xingshu">华光行草</option>
                        <option value="lishu">华光隶变</option>
                        <option value="songti">华光书宋</option>
                    </select>
                </div>
                <button onclick="generateZitiePDF()">生成字帖预览</button>
            </div>
        </div>
    </div>
    <div id="zitie-preview" style="display:none; width: 100%; height: 800px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); background: #fff; border: 1px solid #d2d2d7;">
        <iframe id="zitie-frame" style="width:100%; height:100%; border:none;"></iframe>
    </div>
</div>
{{end}}