{% extends 'base.html' %}

{% block content %}
<div class="page-container">
    <div class="currentForecast">
        <div class="forecast">
            <div class="shortDescription">{{ current_conditions['short_forecast'] }}</div>
            <div class="longDescription">{{ current_conditions['detailed_forecast'] }}</div>
            <div class="currentTemp">
                <span class="temperature">{{ current_conditions['temperature'] }}</span><span class="unit">°{{ current_conditions['temperature_unit'] }}</span>
            </div>
            <div class="waterConditions">{{ current_conditions['precipitation_probability'] }}% percip | {{ current_conditions['relative_humidity'] }}% humidity (relative)</div>
        </div>
        <div class="secondaryInfo">
            <div class="windContainer frosted">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">Wind Status</div>
                    <div class="flex items-center">{{ current_conditions['wind_speed'] }}</div>
                </div>
                <div class="flex items-center justify-center">
                </div>
                <div class="flex items-center justify-center">
                    Direction: {{ current_conditions['wind_direction'] }}
                </div>
            </div>
            <div class="solarClock frosted">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">Sunrise</div>
                    <div class="flex items-center">Sunset</div>
                </div>
                <div class="flex items-center justify-center">
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">Time AM</div>
                    <div class="flex items-center">Time PM</div>
                </div>
            </div>
        </div>
    </div>
    <div class="hourlyForecast frosted my-6">
        <h3>Hourly Forecast</h3>
        <div class="grid grid-cols-6 gap-x-4">
            {{ current_conditions | tojson(2) }}
        </div>
    </div>
    <div class="weeklyReport frosted">
        <h3>Weekly Forecast</h3>
        <div class="grid grid-cols-7 gap-x-4">
        {% for period in periods %}
        <div>{{ period['start_time'] }} - {{ period['end_time'] }} | {{ period['temperature'] }}{{ period['temperature_unit'] }}</div>
        {% endfor %}
        </div>
    </div>
</div>

{% endblock %}
