<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Family Calendar Display</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- Background container -->
    <div id="background"></div>

    <!-- Main content overlay -->
    <div class="container">
        <!-- Header with Time and Date -->
        <header class="header">
            <div class="time-display">
                <div id="time" class="time">--:--</div>
                <div id="date" class="date">Loading...</div>
            </div>
            <div class="weather-summary">
                <div class="current-weather-item">
                    <div class="weather-label">Today</div>
                    <div id="current-temp" class="current-temp">--°</div>
                    <div id="weather-icon" class="weather-icon"></div>
                </div>
                <div id="header-forecast" class="header-forecast">
                    <!-- 3-day forecast will be inserted here -->
                </div>
            </div>
        </header>

        <!-- Main content area -->
        <div class="main-content">
            <!-- Calendar Section -->
            <section class="calendar-section">
                <h2>Upcoming Events</h2>
                <div id="calendar-events" class="events-list">
                    <div class="event-placeholder">Loading events...</div>
                </div>
            </section>
        </div>

        <!-- Footer with Dad Joke -->
        <footer class="footer">
            <div id="joke" class="joke">Loading a joke to brighten your day...</div>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
