{% extends "base.html" %}

{% block content %}
<div class="weather-app-container">
    <!-- Left Sidebar -->
    <div class="weather-sidebar">
        <!-- Search Form -->
        <form action="/weather" method="post" class="search-form">
            <div class="search-field">
                <i class="fas fa-search"></i>
                <input type="text" name="city" placeholder="Miami" value="{{ city }}" required>
            </div>
        </form>

        <!-- Error Message -->
        {% if error %}
            <div class="error-message">
                <i class="fas fa-exclamation-circle"></i>
                <p>{{ error }}</p>
            </div>
        {% endif %}

        <!-- Current Weather -->
        {% if current_weather %}
            <div class="current-weather-block">
                <div class="weather-header">
                    <h2>{{ selected_city }}</h2>
                    <div class="weather-time">
                        <span class="current-time">{{ current_weather.dt | date('H:i') }}</span>
                        <span class="current-date">{{ current_weather.dt | date('M d, Y') }}</span>
                    </div>
                </div>
                
                <div class="weather-main">
                    <div class="weather-icon">
                        <img src="http://openweathermap.org/img/wn/{{ current_weather.weather[0].icon }}@2x.png" alt="{{ current_weather.weather[0].description }}">
                    </div>
                    <div class="weather-temp">
                        <span class="temperature">{{ current_weather.temp | default(0) | round | int }}°C</span>
                        <span class="weather-detail">{{ current_weather.weather[0].description | title }}</span>
                    </div>
                </div>

                <div class="weather-details">
                    <div class="detail-item">
                        <i class="fas fa-wind"></i>
                        <span>Wind: {{ current_weather.wind_speed | default(0) }} m/s</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-tint"></i>
                        <span>Humidity: {{ current_weather.humidity | default(0) }}%</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-cloud-rain"></i>
                        <span>Precipitation: {{ current_weather.rain | default(0) }} mm</span>
                    </div>
                </div>
            </div>

            <!-- 7-Day Forecast -->
            <div class="forecast-block">
                <h3>7-Day Forecast</h3>
                <div class="forecast-list">
                    {% for forecast in daily_forecasts %}
                    <div class="forecast-item">
                        <div class="forecast-date">{{ forecast.dt | date('D, M d') }}</div>
                        <div class="forecast-icon">
                            <img src="http://openweathermap.org/img/wn/{{ forecast.weather[0].icon }}.png" alt="{{ forecast.weather[0].description }}">
                        </div>
                        <div class="forecast-temps">
                            <span class="high-temp">{{ forecast.temp.max | default(0) | round | int }}°</span>
                            <span class="low-temp">{{ forecast.temp.min | default(0) | round | int }}°</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        {% elif not error %}
            <div class="no-weather">
                <i class="fas fa-cloud-slash"></i>
                <p>No weather data available. Please try another city.</p>
            </div>
        {% endif %}
    </div>

    <!-- Main Content Area -->
    <div class="weather-main-content">
        {% if current_weather %}
            <div class="weather-map">
                <h2>Weather Map</h2>
                <div class="map-container">
                    {% if current_weather.get('coord') %}
                        {% set lon = current_weather.coord.lon %}
                        {% set lat = current_weather.coord.lat %}
                        <iframe 
                            width="100%" 
                            height="450" 
                            frameborder="0" 
                            scrolling="no" 
                            marginheight="0" 
                            marginwidth="0" 
                            src="https://www.openstreetmap.org/export/embed.html?bbox={{ lon-0.1 }},{{ lat-0.1 }},{{ lon+0.1 }},{{ lat+0.1 }}&amp;layer=mapnik&amp;marker={{ lat }},{{ lon }}">
                        </iframe>
                        <br/>
                        <a href="https://www.openstreetmap.org/?mlat={{ lat }}&amp;mlon={{ lon }}&amp;zoom=10&amp;layers=M" target="_blank">View Larger Map</a>
                    {% else %}
                        <div class="map-placeholder">
                            <i class="fas fa-map-marked-alt"></i>
                            <p>Map data not available for this location</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}