<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="/">
    <title>WaifuBoard Book</title>
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/books/book.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="stylesheet" href="/views/css/components/titlebar.css">
    <script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
    <span class="app-title">WaifuBoard</span>
</div>
    <div class="title-right">
        <button class="min">—</button>
        <button class="max">🗖</button>
        <button class="close">✕</button>
    </div>
</div>
<a href="/books" class="back-btn">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
    </svg>
    Back
</a>

<div class="hero-wrapper">
    <div class="hero-background">
        <img id="hero-bg" src="" alt="">
    </div>
    <div class="hero-overlay"></div>
</div>

<div class="content-container">

    <div class="book-header-section">
        <h1 class="book-title" id="title">Loading...</h1>

        <div class="hero-meta-info">
            <span id="local-pill" class="pill-local" style="display:none;">Local</span>
            <span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>

            <span id="score">--% Score</span>
            <span class="meta-separator">•</span>
            <span id="published-date">----</span>
            <span class="meta-separator">•</span>
            <span id="status">--</span>
            <span class="meta-separator">•</span>
            <span id="format">--</span>
            <span class="meta-separator">•</span>
            <span id="chapters-count">-- Ch</span>
        </div>

        <div class="hero-description-mini" id="description"></div>
        <div class="hero-tags" id="genres"></div>

        <div class="action-row">
            <button class="btn-read" id="read-start-btn">
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M2 9v12h5v-9h8v9h5v-12h2l-10 -9 -10 9z" transform="scale(0.8) translate(3,3)"/></svg>
                Start Reading
            </button>
            <button class="btn-add-list" id="add-to-list-btn">+ Add to Library</button>
        </div>
    </div>

    <div class="main-layout">

        <aside class="poster-section">
            <div class="poster-card">
                <img id="poster" src="" alt="">
            </div>

            <div class="sidebar-extra-info" id="sidebar-info" style="display: none;">
                <h4 class="sidebar-label">Alternative Titles</h4>
                <ul class="synonyms-list" id="synonyms-list">
                </ul>
            </div>
        </aside>

        <div class="content-column">

            <div class="chapters-section">
                <div class="chapters-header">
                    <h2>Chapters</h2>

                    <div class="chapter-controls">
                        <select id="provider-filter" class="glass-select" style="display: none;">
                            <option value="all">All Providers</option>
                        </select>

                        <div id="language-selector-container" class="control-group hidden">
                            <select id="language-select" class="glass-select"></select>
                        </div>

                        <div class="search-box">
                            <input type="text" id="chapter-search" placeholder="Search..." class="glass-input">
                        </div>

                        <button id="sort-btn" class="glass-btn-icon" title="Sort">
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
                            </svg>
                        </button>
                    </div>
                </div>

                <div id="chapters-list" class="chapters-grid"></div>
                <div id="loading-msg" style="text-align: center; padding: 2rem; display: none; color: #888;">Loading...</div>

                <div class="pagination-controls" id="pagination" style="display:none;">
                    <button class="page-btn" id="prev-page">Previous</button>
                    <span class="page-info" id="page-info">Page 1</span>
                    <button class="page-btn" id="next-page">Next</button>
                </div>
            </div>



        </div>
    </div>

    <div id="relations-section" style="display:none; margin-top: 3rem;">
        <h3 class="subsection-title">Relations</h3>
        <div class="relations-horizontal" id="relations-list"></div>
    </div>

    <section class="content-section">
        <h2 class="subsection-title">Characters</h2>
        <div class="characters-grid" id="characters-list"></div>
    </section>

</div>

<div id="updateToast" class="hidden">
    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Click To Download</a>
</div>

<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/url-utils.js"></script>
<script src="/src/scripts/utils/pagination-manager.js"></script>
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/books/book.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
</body>
</html>