{% extends "base.html" %}
{% block title %}Погода | {{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet"
      href="/static/weather/style.css?v={{version}}">
<link rel="icon"
      href="/static/weather/favicon.ico?v={{version}}"
      type="image/x-icon">
{% endblock %}

{% block header %}
{% if response.period == 'day' %}
<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
   href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
<a class="button"
   href="../tag/days-10">⬆️</a>
<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
<a class="button"
   href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
{% endif %}
{% if response.period == 'days' %}
<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
{% endif %}
{% endblock %}

{% block content %}
<div>
  <table style="margin: auto;">
    <tbody>
      <!-- date -->
      <tr>
        {% for value in response.values %}
        {% if response.period == 'day' %}
        <td
            class="date {{'now' if value.date < datetime.datetime.now() and value.date + datetime.timedelta(hours=3) > datetime.datetime.now() else ''}}">
          <span class="value">{{value.date.strftime('%H:%M')}}</span>
        </td>
        {% endif %}
        {% if response.period == 'days' %}
        <td class="date {{'now' if value.date.date() == datetime.date.today() else ''}}">
          <span class="value">
            <a href="../tag/{{tag_util.create_tag('day', value.date.date())}}">
              {{value.date.strftime('%a %d')}}
            </a>
          </span>
        </td>
        {% endif %}
        {% endfor %}
      </tr>
      <!-- cloudness -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          Облачность
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="cloudness">
          {% for icon in value.sky | cloudness_icon %}
          <div class="icon">{{icon}}</div>
          {% endfor %}
        </td>
        {% endfor %}
      </tr>
      <!-- temperature -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          Температура, °C
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="temperature">
          {% for temperature in value.temperature %}
          <div class="value {{'positive' if temperature > 0 else 'negative'}}"
               style="background-color: rgba(255, 128, 128, {{(temperature - 10) * 0.015}});">
            {{temperature}}
          </div>
          {% endfor %}
        </td>
        {% endfor %}
      </tr>
      <!-- wind_direction -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          Направление ветра
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="wind">
          <span class="icon">{{value.wind_direction | wind_direction_icon}}</span>
        </td>
        {% endfor %}
      </tr>
      <!-- wind_speed -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          Скорость ветра, м/с
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="wind"
            style="background-color: rgba(128, 128, 128, {{value.wind_speed * 0.05}});">
          <span class="speed">{{value.wind_speed}}</span>
          {% if value.wind_gust != value.wind_speed %}
          <span class="gust">
            ({{value.wind_gust}})
          </span>
          {% endif %}
        </td>
        {% endfor %}
      </tr>
      <!-- precipitation -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          Осадки, мм
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="precipitation"
            style="background-color: rgba(0, 128, 255, {{value.precipitation * 0.1}});">
          <span class="value">{{value.precipitation or ' '}}</span>
        </td>
        {% endfor %}
      </tr>
      <!-- pressure -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          Давление, мм рт. ст.
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="pressure">
          {% for pressure in value.pressure %}
          <div class="value"
               style="background-color: rgba(128, 0, 255, {{(pressure - 720) * 0.008}});">
            {{pressure}}</div>
          {% endfor %}
        </td>
        {% endfor %}
      </tr>
      <!-- humidity -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          Влажность, %
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="humidity"
            style="background-color: rgba(128, 128, 255, {{value.humidity * 0.005}});">
          <span class="value">{{value.humidity}}</span>
        </td>
        {% endfor %}
      </tr>
    </tbody>
  </table>
</div>
{% endblock %}