{% extends "minimal.html" %}

{% block title %}{{ title }}{% endblock %}

{% block page_styles %}
<style>
    /* 覆盖body样式以适应PDF布局 */
    body { 
        font-family: var(--font-family); 
        background: white; 
        color: var(--text-color); 
        padding: 0; 
        margin: 0;
    }

    /* 页面容器 */
    .page {
        width: 210mm;  /* A4宽度 */
        height: 297mm; /* A4高度 */
        margin: 0;
        padding: 0;
        page-break-after: always;
        position: relative;
        background-color: white;
    }

    .page.landscape {
        width: 297mm;  /* A4横版宽度 */
        height: 210mm; /* A4横版高度 */
    }

    .page:last-child {
        page-break-after: avoid;
    }

    /* 页眉与页脚叠加信息（标题与页码） */
    .deck-name {
        position: absolute;
        top: 8px;
        left: 8px;
        font-size: 0.75em;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.7;
        pointer-events: none;
        z-index: 10;
    }
    .card-index {
        position: absolute;
        bottom: 8px;
        right: 8px;
        font-size: 0.7em;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.6;
        pointer-events: none;
        z-index: 10;
    }

    /* 背面翻转样式 */
    .card-back {
        transform: none;
    }

    /* 背面的标题和序号需要额外翻转来保持正常显示 */
    .card-back .deck-name,
    .card-back .card-index {
        transform: none;
    }

    @media print {
        .page.single {
            display: inline-block;
            width: var(--card-width, 105mm);
            height: var(--card-height, 74.25mm);
            overflow: hidden;
        }

        /* @page 规则已移除，由 Playwright 直接控制页面尺寸 */
        body {
            margin: 0;
            padding: 0;
        }
        .page {
            margin: 0;
            padding: 0;
            page-break-after: always;
        }
        .page:last-child {
            page-break-after: avoid;
        }
    }

    /* 单页布局 - 充满整页 */
    .single-layout { 
        width: 100%; 
        height: 100%; 
    }
    .single-layout .card {
        width: inherit; /* 继承父级 .page.single 的宽度 */
        height: inherit; /* 继承父级 .page.single 的高度 */
        margin: 0;
        border: var(--card-border);
    }
    /* 让单页图片尽量利用空间 */
    .single-layout .card .card-content img { 
        max-height: 95%; 
    }
    /* PDF 中单页布局不需要背面旋转 */
    .single-layout .card .card-back { 
        transform: none; 
    }

    /* A4八卡片布局 - 精确轨道尺寸，卡片填充网格单元 */
    .a4-8-layout {
        display: grid;
        box-sizing: border-box;
        grid-template-columns: repeat(4, 67.25mm); /* 297 - 16 - (3*4) = 269; 269/4 = 67.25 */
        grid-template-rows: repeat(2, 95mm);       /* 210 - 16 - 4 = 190; 190/2 = 95 */
        gap: 4mm;
        padding: 8mm;
        height: 100%;
        width: 100%;
    }

    /* 反面页不进行左右镜像翻转，保持内容方向一致 */
    .a4-8-layout.back-page {
        transform: scaleX(-1);
    }

    .a4-8-layout .card {
        width: 100%;
        height: 100%;
        border: var(--card-border);
        margin: 0 auto;
    }
    /* 图片在网格卡片内自适应，避免溢出 */
    .a4-8-layout .card .card-content img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* PDF专用MathJax样式 - 修复超长公式换行问题 */
    .card-content mjx-container {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        display: inline-block !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    
    .card-content mjx-container[display="true"] {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        display: block !important;
        margin: 0.5em 0 !important;
        word-break: break-word !important;
    }
    
    .card-content mjx-math {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    
    /* 确保MathJax在PDF中与文字字体大小一致 */
    .card-content .MathJax,
    .card-content mjx-container {
        font-size: inherit !important;
    }

    /* 确保卡片内容继承minimal.html的样式 */
    .a4-8-layout .card .card-front,
    .a4-8-layout .card .card-back {
        background: var(--card-front-bg);
        font: var(--card-front-font);
    }

    .a4-8-layout .card .card-back {
        background: var(--card-back-bg);
        font: var(--card-back-font);
        transform: scaleX(-1); /* PDF 横向翻转 */
    }

    .a4-8-layout .card-back .deck-name,
    .a4-8-layout .card-back .card-index {
        transform: scaleX(-1);
    }

    /* 主题背景区分 - 为不同主题的反面添加边框和颜色区分 */
    .theme-light .card-back {
        background: #f8f9fa;
        border: 2px solid #e9ecef;
    }

    .theme-dark .card-back {
        background: #2c3e50;
        color: #ecf0f1;
        border: 2px solid #34495e;
    }

    .theme-basic .card-back {
        background: #f0f8ff;
        border: 2px solid #4a90e2;
    }

    .theme-advance .card-back {
        background: #f5f5dc;
        border: 2px solid #daa520;
    }

    .theme-detail .card-back {
        background: #f0fff0;
        border: 2px solid #32cd32;
    }

    .page.single {
        display: inline-block;
        width: var(--card-width, 85mm);
        height: var(--card-height, 55mm);
        overflow: hidden;
    }

    @media print {
        @page {
            margin: 0;
            size: A4 landscape;
        }
        body {
            margin: 0;
            padding: 0;
        }
        .page {
            margin: 0;
            padding: 0;
            page-break-after: always;
        }
        .page:last-child {
            page-break-after: avoid;
        }
    }
</style>
{% endblock %}

{% block body_content %}
{% if layout == 'single' %}
    {% for card in cards %}
    <div class="page">
        {% if style.show_deck_name %}<div class="deck-name" style="{{ style.deck_name_style }}">{{ title }}</div>{% endif %}
        {% if style.show_card_index %}<div class="card-index" style="{{ style.card_index_style }}"> {{ loop.index }}</div>{% endif %}
        <div class="single-layout">
            <div class="card">
                <div class="card-front">
                    <div class="card-content">{{ card.front | safe }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="page">
        <div class="single-layout">
            <div class="card">
                <div class="card-back">
                    {% if style.show_deck_name %}<div class="deck-name" style="{{ style.deck_name_style }}">{{ title }}</div>{% endif %}
                    {% if style.show_card_index %}<div class="card-index" style="{{ style.card_index_style }}"> {{ loop.index }}</div>{% endif %}
                    <div class="card-content">{{ card.back | safe }}</div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
{% else %}
    {% set cards_per_page = 8 %}
    {% set total_groups = ((cards | length + cards_per_page - 1) // cards_per_page) %}
    {% set pages_count = total_groups * 2 %}
    {% for page_start in range(0, cards | length, cards_per_page) %}
    {% set page_cards = cards[page_start:page_start + cards_per_page] %}
    <div class="page landscape">
        <div class="a4-8-layout">
            {% for card in page_cards %}
            <div class="card">
                {% if style.show_deck_name %}<div class="deck-name" style="{{ style.deck_name_style }}">{{ title }}</div>{% endif %}
                {% if style.show_card_index %}<div class="card-index" style="{{ style.card_index_style }}"> {{ page_start + loop.index }}</div>{% endif %}
                <div class="card-side card-front">
                    <div class="card-content">{{ card.front | safe }}</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="page landscape">
        <div class="a4-8-layout back-page">
            {% for card in page_cards %}
            <div class="card">
                <div class="card-back">
                    <div class="card-content">{{ card.back | safe }}</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
{% endif %}
{% endblock %}

{% block scripts %}
{{ super() }}
{% endblock %}