{% extends "base.html" %}

{% block content %}
    <!-- Display header for current weather information -->
    <h1>Current Weather</h1>

    <!-- Display temperature with unit and conversion to Fahrenheit -->
    <p>
        Temperature: {{ temperature }} {{ temperature_unit }}
        |
        <!-- Convert Celsius to Fahrenheit using (°C * 9/5) + 32 formula -->
        {{(temperature * 9/5) + 32}}°F
    </p>

    <!-- Display wind speed with unit -->
    <p>
        Wind Speed: {{ wind_speed }} {{ wind_speed_unit }}
    </p>

    <!-- Container for displaying wind direction and arrow -->
    <div class="wind-container">
        <!-- Display wind direction with unit -->
        <p>
            Wind Direction:
            {{ wind_direction }} {{ wind_direction_unit }}
        </p>
        <!-- Dynamically rotate the arrow based on wind direction -->
        <div class="arrow" id="wind-arrow"></div>
    </div>

    <!-- JavaScript code to dynamically rotate the wind arrow based on wind direction -->
    <script>
        // Store wind direction value from template variables
        const windDirection = {{ wind_direction }};

        // Select HTML element with id "wind-arrow"
        const arrowElement = document.getElementById('wind-arrow');

        // Rotate the arrow by applying transform style with wind direction value
        arrowElement.style.transform = `rotate(${windDirection}deg)`;
    </script>
{% endblock %}