{% extends 'base.html' %}
{% block content %}
<div class=content>
		<div class=searchbar>
				<form method="post">
					{{ form.csrf_token }}
					{{ form.location }}
					{{ form.submit() }}
				</form>
		</div>
		<div class=current>
				{% set is_day = data["current_weather"]["is_day"] %}
				{% set weather_code = data["current_weather"]["weathercode"] %}
				<div class=current-info>
						<div class=current-weather>{{ weather_codes[weather_code] }}</div>
						<div class=current-temp> {{ data["current_weather"]["temperature"]}}°F </div>
						<div class=current-wind>
								Wind: {{ data["current_weather"]["windspeed"] }} MPH 
								<img class=wind-icon src="/static/icons/directions/{{get_direction_icon(data["current_weather"]["winddirection"])}}.svg">
						</div>
						<div class=current-sunrise>Sunrise: {{ data["daily"]["sunrise"][0] }} </div>
						<div class=current-sunset>Sunset: {{ data["daily"]["sunset"][0] }} </div>
				</div>		
				<div class=current-icon>
						<img class=weather-icon src="/static/icons/svg/{{ weather_icons[weather_code][is_day]}}.svg" width=100px height=100px>
				</div>
		</div>
		<div class=forecast-header> <h2 class=forecast-header>Hourly Forecast</h2> </div>
		<div class=hourly>
				{% for i in range(hour, hour + 24) %}
				<div class=hourly-box>
						<div class=hourly-info>
								<div class=hourly-time><strong>{{ data["hourly"]["time"][i] }}</strong></div>
								<div class=hourly-weather>
										{{ weather_codes[data["hourly"]["weathercode"][i]] }}
										{% if data["hourly"]["weathercode"][i] > 50 %}
											({{ data["hourly"]["precipitation"][i] }}in, {{ data["hourly"]["precipitation_probability"][i] }}%)
										{% endif %}
								</div>
								<div class=hourly-temp>{{ data["hourly"]["temperature_2m"][i]}}°F</div>
								<div class=hourly-humidity>Humidity: {{ data["hourly"]["relativehumidity_2m"][i] }}%</div>
								<div class=hourly-wind>
										Wind: {{ data["hourly"]["windspeed_10m"][i] }}MPH 
										<img class=wind-icon src="/static/icons/directions/{{get_direction_icon(data["hourly"]["winddirection_10m"][i])}}.svg">
								</div>
						</div>
						<div class=hourly-icon>
								{% set time = datetime.datetime.strptime(data["hourly"]["time"][i], "%a %x %I:%M %p") %}
								{% set sunrise = datetime.datetime.strptime(data["daily"]["sunrise"][0], "%I:%M %p").replace(year=time.year, month=time.month, day=time.day) %}
								
								{% set sunset = datetime.datetime.strptime(data["daily"]["sunset"][0], "%I:%M %p").replace(year=time.year, month=time.month, day=time.day) %}
								{% set is_day = 1 %}
								{% if time > sunrise and time < sunset %}
									{% set is_day = 0 %}
								{% endif %}
								{% set weather_code = data["hourly"]["weathercode"][i] %}
								<img class=weather-icon src="/static/icons/svg/{{weather_icons[weather_code][is_day]}}.svg" width=100px height=100px>
						</div>
				</div>
				{% endfor %}
		</div>
		<div class=forecast-header>
				<h2 class=forecast-header>Daily Forecast</h2>
		</div>
		<div class=daily>
				{% for i in range(7) %}
				<div class=daily-box>
						<div class=daily-info>
								<div class=daily-time><strong>{{ data["daily"]["time"][i] }}</strong></div>
								<div class=daily-weather>
										{{ weather_codes[data["daily"]["weathercode"][i]] }}
										{% if data["daily"]["weathercode"][i] > 50 %}
											({{ data["daily"]["precipitation_sum"][i] }}in, {{ data["daily"]["precipitation_probability_max"][i] }}%)
										{% endif %}
								</div>
								<div class=daily-high>High: {{ data["daily"]["temperature_2m_max"][i] }}°F</div>
								<div class=daily-low>Low: {{ data["daily"]["temperature_2m_min"][i] }}°F</div>
								<div class=daily-sunrise>Sunrise: {{ data["daily"]["sunrise"][i] }}</div>
								<div class=daily-sunset>Sunset: {{ data["daily"]["sunset"][i] }}</div>
						</div>
						<div class=daily-icon>
								{% set weather_code = data["daily"]["weathercode"][i] %}
								<img class=weather-icon src="/static/icons/svg/{{ weather_icons[weather_code][0]}}.svg" width=100px height=100px>
						</div>
				</div>
				{% endfor %}
		</div>

</div>
{% endblock %}