{% extends 'base.html' %}

{% block content %}
<div class="page-container">
    <div class="currentForecast">
        <div class="forecast">
            <div class="shortDescription text-white text-shadow">{{ current_conditions['short_forecast'] }}</div>
            <div class="longDescription text-white text-shadow">{{ current_conditions['detailed_forecast'] }}</div>
            <div class="currentTemp text-white text-shadow flex items-start">
                <span class="temperature">{{ current_conditions['temperature'] }}</span><span class="unit">°F</span>
            </div>
            <div class="font-lg text-white text-shadow">{{ current_conditions['relative_humidity'] }}% humidity</div>
        </div>
        <div class="secondaryInfo">
            <div class="windContainer frosted p-4">
                <h3>Wind Status</h3>
                <div class="flex items-center justify-center gap-x-4">
                    <svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18.5 22.75C16.16 22.75 14.25 20.84 14.25 18.5V18C14.25 17.59 14.59 17.25 15 17.25C15.41 17.25 15.75 17.59 15.75 18V18.5C15.75 20.02 16.98 21.25 18.5 21.25C20.02 21.25 21.25 20.02 21.25 18.5C21.25 16.98 20.02 15.75 18.5 15.75H2C1.59 15.75 1.25 15.41 1.25 15C1.25 14.59 1.59 14.25 2 14.25H18.5C20.84 14.25 22.75 16.16 22.75 18.5C22.75 20.84 20.84 22.75 18.5 22.75Z" fill="#000"/>
                        <path d="M18.5 12.75H2C1.59 12.75 1.25 12.41 1.25 12C1.25 11.59 1.59 11.25 2 11.25H18.5C20.02 11.25 21.25 10.02 21.25 8.5C21.25 6.98 20.02 5.75 18.5 5.75C16.98 5.75 15.75 6.98 15.75 8.5V9C15.75 9.41 15.41 9.75 15 9.75C14.59 9.75 14.25 9.41 14.25 9V8.5C14.25 6.16 16.16 4.25 18.5 4.25C20.84 4.25 22.75 6.16 22.75 8.5C22.75 10.84 20.84 12.75 18.5 12.75Z" fill="#000"/>
                        <path d="M9.31 9.75109H2C1.59 9.75109 1.25 9.41109 1.25 9.00109C1.25 8.59109 1.59 8.25109 2 8.25109H9.31C10.38 8.25109 11.25 7.38109 11.25 6.31109C11.25 5.24109 10.38 4.37109 9.31 4.37109C8.24 4.37109 7.37 5.24109 7.37 6.31109V6.69109C7.37 7.10109 7.03 7.44109 6.62 7.44109C6.21 7.44109 5.87 7.11109 5.87 6.69109V6.31109C5.87 4.41109 7.41 2.87109 9.31 2.87109C11.21 2.87109 12.75 4.41109 12.75 6.31109C12.75 8.21109 11.21 9.75109 9.31 9.75109Z" fill="#000"/>
                    </svg>
                    <div class="flex items-center">{{ current_conditions['wind_speed'] }} {{ current_conditions['wind_direction'] }}</div>
                </div>
            </div>
            
            <div class="waterConditions frosted p-4">
                <h3>Precipitation</h3>
                <div class="flex items-center justify-center gap-x-4">
                    <svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0001 13.3848C16.0001 14.6088 15.526 15.7828 14.6821 16.6483C14.203 17.1397 13.6269 17.5091 13 17.7364M19 13.6923C19 7.11538 12 2 12 2C12 2 5 7.11538 5 13.6923C5 15.6304 5.7375 17.4893 7.05025 18.8598C8.36301 20.2302 10.1436 20.9994 12.0001 20.9994C13.8566 20.9994 15.637 20.2298 16.9497 18.8594C18.2625 17.4889 19 15.6304 19 13.6923Z" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <div>{{ current_conditions['precipitation_probability'] }}%</div>
                </div>
            </div>
        </div>
    </div>
    <div class="hourlyForecast frosted p-4">
        <h3>Hourly Forecast</h3>
        <div class="grid grid-cols-6 gap-x-4">
            {% for forecast in hourly_conditions %}
            <div class="grid items-center justify-center gap-x-4">
                <div>{{ forecast['start_time'] | format_datetime('%I %p') }}</div>
                <div><img src="{{ forecast['icon_url'] }}" height="48px" width="48px"></div>
                <div>{{ forecast['temperature'] }}°F</div>
                <div class="flex items-center">
                    <svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0001 13.3848C16.0001 14.6088 15.526 15.7828 14.6821 16.6483C14.203 17.1397 13.6269 17.5091 13 17.7364M19 13.6923C19 7.11538 12 2 12 2C12 2 5 7.11538 5 13.6923C5 15.6304 5.7375 17.4893 7.05025 18.8598C8.36301 20.2302 10.1436 20.9994 12.0001 20.9994C13.8566 20.9994 15.637 20.2298 16.9497 18.8594C18.2625 17.4889 19 15.6304 19 13.6923Z" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <div>{{ forecast['precipitation_probability'] }}%</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="weeklyReport frosted p-4">
        <h3>Weekly Forecast</h3>
        <div class="grid grid-cols-7 gap-x-4">
        {% for forecast in week_forcasts %}
            <div class="grid items-center justify-center gap-x-4">
                <div>{{ forecast['forecasted_date'] | format_datetime('%a') }}</div>
                <div><img src="{{ forecast['icon_url'] }}" height="48px" width="48px"></div>
                <div>{{ forecast['temperature_high'] }}°F</div>
                <div class="flex items-center">
                    <svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0001 13.3848C16.0001 14.6088 15.526 15.7828 14.6821 16.6483C14.203 17.1397 13.6269 17.5091 13 17.7364M19 13.6923C19 7.11538 12 2 12 2C12 2 5 7.11538 5 13.6923C5 15.6304 5.7375 17.4893 7.05025 18.8598C8.36301 20.2302 10.1436 20.9994 12.0001 20.9994C13.8566 20.9994 15.637 20.2298 16.9497 18.8594C18.2625 17.4889 19 15.6304 19 13.6923Z" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <div>{{ forecast['precipitation_probability'] }}%</div>
                </div>
            </div>
        {% endfor %}
        </div>
    </div>
</div>

{% endblock %}