<!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" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
    Back to Books
</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">


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

        <div class="info-grid">
            <div class="info-item">
                <h4>Format</h4>
                <span id="format">--</span>
            </div>
            <div class="info-item">
                <h4>Chapters</h4>
                <span id="chapters">--</span>
            </div>
            <div class="info-item">
                <h4>Status</h4>
                <span id="status">--</span>
            </div>
            <div class="info-item">
                <h4>Published</h4>

                <span id="published-date">--</span>
            </div>
        </div>
    </aside>


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

            <div class="meta-row">
                <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
                <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
                <div class="pill score" id="score">--% Score</div>
                <div class="pill" id="genres">Action</div>
            </div>

            <div class="action-row">
                <button class="btn-primary" id="read-start-btn">
                    Start Reading
                </button>
                <button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to Library</button>
            </div>
        </div>

        <div class="chapters-section">
            <div class="section-title">
                <h2>Chapters</h2>
                <div class="chapter-controls">

                    <select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
                        <option value="all">All Providers</option>
                    </select>
                </div>
            </div>

            <div class="chapters-table-wrapper">
                <table class="chapters-table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Title</th>

                        <th>Provider</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody id="chapters-body">

                    </tbody>
                </table>
            </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>
    </main>

</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/rpc-inapp.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>