{% extends 'layout.html' %}
{% block title %}{{title}}{% endblock %}
{% block head %}
{{ super() }}
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
<style>
	table{
		border-collapse: collapse;
	}
	td,th:not(:first-child){
		border: 1px solid black;
		padding: 5px;
	}
	th,td:first-child,.windGust{
		font-weight: bold;
	}
	td:nth-child(2n+1):not(:first-child){
		background-color: #e0e0e0;
	}
	.value, .windAverage, .windGust, .windDirectionLetter{
		font-size: 20px;
	}
	.unit,th,td:first-child{
		font-size: 20px;
	}
	.weatherCell{
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: repeat(2,2fr) auto;
	}
	.weatherImage{
		grid-column: 1;
		grid-row: 1/3;
		justify-self: center;
	}
	.weatherImage,.temperature,.humidity{
		align-self: center;
	}
	.temperature{
		grid-column: 2;
		grid-row: 1;
	}
	.humidity{
		grid-column: 2;
		grid-row: 2;
	}
	.wind,.rain,.freezingLevel{
		grid-column: 1/3;
		justify-self: center;
	}
	.wind{
		margin-top: 5px;
	}
	.negative{
		color: blue;
	}
	#helpImage,#dayMode,#nightMode{
		cursor: pointer;
	}
	.unselectable{
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.nightBorder{
		border-color: #FF0000!important;
	}
	.nightColor{
		color: #FF0000;
	}
	.nightFilter{
		filter: invert(16%) sepia(100%) saturate(5458%) hue-rotate(358deg) brightness(111%) contrast(124%);
	}
	.nightBackground{
		background-color: #000000;
	}
	.nightAlternateBackground{
		background-color: #5a5a5a!important;
	}
	#nightModeInput{
		display: none;
	}
	#commandCell{
		display: grid;
		grid-auto-flow: column;
		align-items: center;
		justify-items: center;
	}
</style>
{% endblock %}
{% block body %}
{{ super() }}
{% if ui %}
	{% include 'help.html' %}
	{% block help %}{% endblock %}
{% endif %}
<table>
	<thead>
		<tr>
			<th>
				{% if ui %}
					<div id="commandCell">
						<img id="helpImage" class="unselectable" src="{{ url_for('static', filename='img/help.svg') }}" />
						<label for="nightModeInput">
							<img id="dayMode" class="unselectable" src="{{ url_for('static', filename='img/sun.svg') }}" />
							<img id="nightMode" class="unselectable" src="{{ url_for('static', filename='img/moon.svg') }}" />
						</label>
						<input type="checkbox" name="nightModeInput" id="nightModeInput" {% if night %}checked=checked{% endif %}>
					</div>
				{% endif %}
			</th>
			{% for d in date %}
				<th>{{d}}</th>
			{% endfor %}
		</tr>
	</thead>
	<tbody>
		{% for h in hour %}
			<tr>
			<td>{% if h < 10 %}{% set h="0"+h|string() %}{% endif %}{{h}}H00</td>
			{% for dt in datetime %}
				{% if h|string() in dt.split(" ")[1].split(":")[0] %}
					<td>
						{% if dt in weatherData %}
							<div class="weatherCell">
							{% set img="skc.svg" %}
							{% if weatherData[dt]["risque_neige"]=="oui" %}
								{% if weatherData[dt]["pluie"]>0 %}
									{% if weatherData[dt]["pluie"] > 30 %}
										{% set img="rasn.svg" %}
									{% else %}
										{% set img="rasn1.svg" %}
									{% endif %}
								{% else %}
									{% set img="sn.svg" %}
								{% endif %}
							{% elif weatherData[dt]["pluie"]>0 %}
								{% set img="hi_shwrs.svg" %}
								{% if weatherData[dt]["nebulosite"]["totale"]>=25 and weatherData[dt]["nebulosite"]["totale"] < 50 %}
									{% set img="shra.svg" %}
								{% endif %}
								{% if weatherData[dt]["nebulosite"]["totale"]>=50 %}
									{% if weatherData[dt]["pluie"] > 30 %}
										{% set img="ra.svg" %}
									{% else %}
										{% set img="ra1.svg" %}
									{% endif %}
								{% endif %}
							{% else %}
								{% if weatherData[dt]["nebulosite"]["totale"]>=10 and weatherData[dt]["nebulosite"]["totale"] < 25 %}
									{% set img="few.svg" %}
								{% endif %}
								{% if weatherData[dt]["nebulosite"]["totale"]>=25 and weatherData[dt]["nebulosite"]["totale"] < 50 %}
									{% set img="sct.svg" %}
								{% endif %}
								{% if weatherData[dt]["nebulosite"]["totale"]>=50 and weatherData[dt]["nebulosite"]["totale"] < 75 %}
									{% set img="bkn.svg" %}
								{% endif %}
								{% if weatherData[dt]["nebulosite"]["totale"]>=75 %}
									{% set img="ovc.svg" %}
								{% endif %}
							{% endif %}
							<img class="weatherImage unselectable" src="{{ url_for('static', filename='img/'+img) }}" />
							<div class="temperature">
								{% if weatherData[dt]["temperature"]["2m"]-273.15<=0 %}
								<span class="value negative">{{(weatherData[dt]["temperature"]["2m"]-273.15)|round(1)}}</span>
								{% else %}
								<span class="value">{{(weatherData[dt]["temperature"]["2m"]-273.15)|round(1)}}</span>
								{% endif %}
								<span class="unit">°C</span>
							</div>
							<div class="humidity">
								<span class="value">{{weatherData[dt]["humidite"]["2m"]}}</span>
								<span class="unit">%</span>
							</div>
							<div class="wind">
								<span class="windAverage">{{weatherData[dt]["vent_moyen"]["10m"]}}</span>
								{% if weatherData[dt]["vent_rafales"]["10m"]>weatherData[dt]["vent_moyen"]["10m"] %}
									| <span class="windGust">{{weatherData[dt]["vent_rafales"]["10m"]}}</span>
								{% endif %}
								<span class="unit">km/h</span>
								<span class="windDirection">
									<span class="windDirectionLetter">
										{% set dir=weatherData[dt]["vent_direction"]["10m"] %}
										{% if dir > 360 %}
											{% set dir=dir-360 %}
										{% endif %}
										{% if dir < 22.5 or dir >= 337.5 %}
											N
										{% endif %}
										{% if dir >= 22.5 and dir < 67.5 %}
											NE
										{% endif %}
										{% if dir >= 67.5 and dir < 112.5 %}
											E
										{% endif %}
										{% if dir >= 112.5 and dir < 157.5 %}
											SE
										{% endif %}
										{% if dir >= 157.5 and dir < 202.5 %}
											S
										{% endif %}
										{% if dir >= 202.5 and dir < 247.5 %}
											SW
										{% endif %}
										{% if dir >= 247.5 and dir < 292.5 %}
											W
										{% endif %}
										{% if dir >= 292.5 and dir < 337.5 %}
											NW
										{% endif %}
									</span>
									<span class="windDirectionDegree">({{dir}}°)</span>
								</span>
							</div>
							{% if weatherData[dt]["pluie"]>0 %}
								<div class="rain">
									<span class="value">{{weatherData[dt]["pluie"]}}</span>
									<span class="unit">mm/3h rain</span>
								</div>
							{% endif %}
							{% if weatherData[dt]["risque_neige"]=="oui" %}
								<div class="freezingLevel">
									<span class="value">{{weatherData[dt]["iso_zero"]}}</span>
									<span class="unit">m freezing level</span>
								</div>
							{% endif %}
							</div>
						{% endif %}
					</td>
				{% endif %}
			{% endfor %}
			</tr>
		{% endfor %}
	</tbody>
</table>
<div class="status">
	<span class="run">Model run: {{weatherData["model_run"]}}</span>
	<span class="fetchTime"> fetched {{fetchTime}} ago</span>
</div>
{% endblock %}