<!DOCTYPE html>
<html lang="{{ book.language }}" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>{{ book.title }}{% if book.subtitle %} — {{ book.subtitle }}{% endif %}</title>
    <meta name="author" content="{{ book.author }}">
    {% if book.description %}
    <meta name="description" content="{{ book.description }}">
    {% endif %}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,300..700;1,7..72,300..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reader.css">
</head>
<body>

    <!-- Top Bar -->
    <header class="reader-bar" id="readerBar">
        <button class="bar-btn toc-toggle" id="btnToc" title="Table of contents" aria-label="Toggle table of contents">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
        </button>
        <span class="bar-title" id="barTitle">{{ book.title }}</span>
        <div class="bar-controls">
            <button class="bar-btn" id="btnMode" title="Toggle single / spread view" aria-label="Toggle view mode">
                <svg id="iconSingle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/></svg>
                <svg id="iconSpread" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="display:none"><rect x="1" y="2" width="10" height="20" rx="1.5"/><rect x="13" y="2" width="10" height="20" rx="1.5"/></svg>
            </button>
            <button class="bar-btn" id="btnTheme" title="Toggle light / dark theme" aria-label="Toggle theme">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
                <svg class="icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
            </button>
            {% if print_href.endswith('.pdf') %}
            <a class="bar-btn print-link" href="{{ print_href }}" title="Download PDF" aria-label="Download PDF version" download>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9 15 12 18 15 15"/></svg>
            </a>
            {% else %}
            <a class="bar-btn print-link" href="{{ print_href }}" title="Print version" aria-label="Open print version">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
            </a>
            {% endif %}
        </div>
    </header>

    <!-- TOC Drawer -->
    <div class="toc-overlay" id="tocOverlay"></div>
    <nav class="toc-drawer" id="tocDrawer" aria-label="Table of contents">
        <div class="toc-drawer-header">
            <span class="toc-drawer-title">{{ book.title }}</span>
            <button class="toc-close-btn" id="btnTocClose" aria-label="Close table of contents">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        {% if book.subtitle %}
        <p class="toc-drawer-subtitle">{{ book.subtitle }}</p>
        {% endif %}
        <p class="toc-drawer-author">{{ book.author }}</p>
        <ol class="toc-list">
            <li>
                <a href="#" class="toc-link" data-chapter="-1">
                    <span class="toc-link-title">Cover</span>
                </a>
            </li>
            {% for chapter in chapters %}
            <li>
                <a href="#" class="toc-link" data-chapter="{{ loop.index0 }}">
                    <span class="toc-link-num">{{ chapter.number }}.</span>
                    <span class="toc-link-title">{{ chapter.title }}</span>
                </a>
            </li>
            {% endfor %}
        </ol>
    </nav>

    <!-- Reader Viewport -->
    <main class="reader-viewport" id="readerViewport">

        <!-- Cover -->
        <section class="reader-section reader-cover" data-chapter-index="-1" id="sectionCover">
            {% if cover_image_uri %}
            <div class="cover-image-wrap">
                <img class="cover-img" src="{{ cover_image_uri }}" alt="Cover of {{ book.title }}">
            </div>
            {% else %}
            <div class="cover-fallback">
                <div class="cover-fallback-inner" style="background-color: {{ book.cover.background_color }}">
                    <h1 class="cover-title" style="color: {{ book.cover.title_color }}">{{ book.title }}</h1>
                    {% if book.subtitle %}
                    <p class="cover-subtitle" style="color: {{ book.cover.subtitle_color }}">{{ book.subtitle }}</p>
                    {% endif %}
                    <p class="cover-author" style="color: {{ book.cover.title_color }}">{{ book.author }}</p>
                </div>
            </div>
            {% endif %}
        </section>

        <!-- Chapters -->
        {% for chapter in chapters %}
        <section class="reader-section reader-chapter" data-chapter-index="{{ loop.index0 }}" id="chapter{{ loop.index0 }}" style="display:none">
            <div class="chapter-columns" id="cols{{ loop.index0 }}">
                <div class="chapter-header">
                    <span class="ch-number">{{ chapter.number }}</span>
                    <h1 class="ch-title">{{ chapter.title }}</h1>
                </div>
                <div class="chapter-body">
                    {{ chapter.html | safe }}
                </div>
            </div>
        </section>
        {% endfor %}

    </main>

    <!-- Bottom Bar -->
    <footer class="reader-footer" id="readerFooter">
        <div class="footer-inner">
            <button class="footer-nav-btn" id="navPrev" aria-label="Previous page">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            </button>
            <div class="footer-center">
                <span class="page-info" id="pageInfo"></span>
                <div class="progress-track">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
            </div>
            <button class="footer-nav-btn" id="navNext" aria-label="Next page">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </button>
        </div>
    </footer>

    <!-- Tap Zones -->
    <div class="tap-zone tap-prev" id="tapPrev" aria-label="Previous page"></div>
    <div class="tap-zone tap-next" id="tapNext" aria-label="Next page"></div>

    <!-- Chapter data for JS -->
    <script>
        window.__BOOK_DATA__ = {
            chapterCount: {{ chapters|length }},
            title: {{ book.title | tojson }}
        };
    </script>
    <script src="reader.js"></script>
</body>
</html>
