<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calendar</title>
        <link rel="icon" href="/favicon.png" type="image/png">
        <link rel="stylesheet" href="/styles.css">
        <script src="https://kit.fontawesome.com/b53656fe6d.js" crossorigin="anonymous"></script>
        <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
    </head>

    <body>
        <!-- Navigation Bar -->
        <nav class="navbar">
            <a href="/home">
                <i class="fa fa-home"></i>
            </a>
            <a href="/calendar">
                <i class="fa fa-calendar"></i>
            </a>
            <a href="/stats"><i class="fa fa-chart-simple"></i></a> <!-- New analytics link -->
        </nav>

        <div class="content">
            <h1>Calendar</h1>
            <div class="calendar-container">
                <header class="calendar-header">
                    <p class="calendar-current-date"></p>
                    <div class="calendar-navigation">
                        <span id="calendar-prev"
                            class="material-symbols-rounded">chevron_left</span>
                        <span id="calendar-next"
                            class="material-symbols-rounded">chevron_right</span>
                    </div>
                </header>

                <div class="calendar-body">
                    <ul class="calendar-weekdays">
                        <li>Sun</li>
                        <li>Mon</li>
                        <li>Tue</li>
                        <li>Wed</li>
                        <li>Thu</li>
                        <li>Fri</li>
                        <li>Sat</li>
                    </ul>
                    <ul class="calendar-dates"></ul>
                </div>
            </div>
        </div>

        <script src="/calendar.js"></script>
    </body>

</html>
