<!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 id="current-temp" class="current-temp">--°</div>
                <div id="weather-icon" class="weather-icon"></div>
            </div>
        </header>

        <!-- Main content area -->
        <div class="main-content">
            <!-- Weather Section -->
            <section class="weather-section">
                <h2>Weather</h2>
                <div class="current-weather">
                    <div id="weather-description" class="weather-description">Loading...</div>
                    <div class="weather-details">
                        <div class="weather-detail">
                            <span class="label">Feels like:</span>
                            <span id="feels-like">--°</span>
                        </div>
                        <div class="weather-detail">
                            <span class="label">Humidity:</span>
                            <span id="humidity">--%</span>
                        </div>
                        <div class="weather-detail">
                            <span class="label">Wind:</span>
                            <span id="wind-speed">-- km/h</span>
                        </div>
                    </div>
                </div>

                <!-- 5-Day Forecast -->
                <div class="forecast">
                    <h3>Forecast</h3>
                    <div id="forecast-container" class="forecast-days">
                        <!-- Forecast items will be inserted here -->
                    </div>
                </div>
            </section>

            <!-- 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>
