<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WaifuBoard - Schedule</title>
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/schedule/schedule.css">
    <link rel="stylesheet" href="/views/css/components/navbar.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
    <script src="/src/scripts/titlebar.js"></script>
    <link rel="stylesheet" href="/views/css/components/titlebar.css">
</head>
<body>
<div class="ambient-bg" id="ambientBg"></div>
<div class="bg-overlay"></div>

<div class="schedule-container">

    <header class="schedule-header">
        <div class="header-left">
            <h1 class="page-title">Release Schedule</h1>
            <div class="month-navigator">
                <button class="nav-btn" onclick="navigate(-1)">‹</button>
                <span id="monthTitle" class="current-date-label">Loading...</span>
                <button class="nav-btn" onclick="navigate(1)">›</button>
            </div>
        </div>

        <div class="header-controls">
            <div class="toggle-group" id="filter-group" style="display: none;">
                <button class="toggle-btn active" id="btnAll" onclick="setFilter('ALL')">All</button>
                <button class="toggle-btn" id="btnMyList" onclick="setFilter('MY_LIST')">My List</button>
            </div>

            <div class="divider-vertical"></div>

            <div class="toggle-group">
                <button class="toggle-btn active" id="btnSub" onclick="setMode('SUB')">Sub</button>
                <button class="toggle-btn" id="btnDub" onclick="setMode('DUB')">Dub</button>
            </div>

            <div class="view-switcher">
                <button class="view-btn active" id="btnViewMonth" onclick="setViewType('MONTH')" title="Month View">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                </button>
                <button class="view-btn" id="btnViewWeek" onclick="setViewType('WEEK')" title="Week View">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
                </button>
            </div>
        </div>
    </header>

    <main id="schedule-content">
    </main>

</div>

<div class="loader-overlay" id="loader">
    <div class="spinner"></div>
</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/room-modal.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/schedule/schedule.js"></script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/settings.js"></script>
<script src="/src/scripts/rcp-inapp.js"></script>
</body>
</html>