{% load l10n combo gnm assets %}
{% with is_place_page=page|is_place_page %}
  <div class="tile airquality {% if is_place_page %}is-place{% endif %}">
    {% if is_place_page %}
      {% placeholder "explication" name="Explication" render=False %}
      <div class="tile-picture" style="background-image: url({% asset_url "picture:banner:air" %})"></div>
    {% else %}
      <div class="tile-picture" style="background-image: url({% asset_url "picture:air" %})"></div>
    {% endif %}
    <div class="tile-head">
      <div class="tile-title">
        {% localize off %}
          <h2><a href="{{airquality_details_path}}{{lon}},{{lat}}/">Qualité de l’air</a>{% if nominatim and is_place_page %}
            <br><span class="subtitle">{{ nominatim.display_name }}</span>{% endif %}</h2>
        {% endlocalize %}
        <span class="producer" style="background-image: url({% asset_url "logo:atmo" %})">Air Rhône Alpes</span>
      </div>
      <!--
    <div class="badge"><span
         class="airquality-{{json.data.latest.value}}">Niveau {{json.data.latest.value}}</span></div>
         -->
    </div>
    {% if q_lon or lon %}
      {% include "combo/dashboard_cell_icons.html" %}
    {% endif %}
    <div class="tile-content">
      <div>

        {% if is_place_page and not q_lon and not lon %}
          {% gnm_airquality_map %}
        {% endif %}

        {% if air2go and is_place_page %}

          {% if not air2go.data and not air2go.indices %}
            <div class="air2go-off"><p>Données de qualité de l’air indisponibles.</p></div>
          {% elif air2go.data %}
            {# metropolitan data #}
            {% for day_indice in air2go.data %}
              <div class="tables tables-day-{{ forloop.counter0 }}" {% if forloop.counter0 != 1 %}style="display: none"{% endif %}>
                {% include "combo/json/includes/airquality-indice-logo.html" with indice=day_indice.indice %}
                {% if vigilances.data.vigilances %}
                  <div class="vigilance">
                    <h4>Vigilance pollution</h4>
                    <p>{{ vigilances.data.vigilances.0.commentaire|linebreaks }}</p>
                  </div>
                {% endif %}
                <table class="day-indices">
                  <tr>
                    <td data-switch-day-prev="{{ forloop.counter0 }}">{% if forloop.counter0 == 1 %}← Hier{% elif forloop.counter0 == 2 %}← Aujourd’hui{% endif %}</td>
                    <td data-switch-day-next="{{ forloop.counter0 }}">{% if forloop.counter0 == 1 %}Demain →{% elif forloop.counter0 == 0 %}Aujourd’hui →{% endif %}</td>
                  </tr>
                </table>
                {% if not vigilances.data.vigilances %}
                  <table class="indices">
                    <thead><tr>
                      {% for sous_indice in day_indice.sous_indices %}
                        <th>{{ sous_indice.polluant_nom }}</th>
                      {% endfor %}</tr></thead>
                    <tbody><tr>
                      {% for sous_indice in day_indice.sous_indices %}
                        <td>{% for definition in definitions.data %}{% if definition.indice == sous_indice.indice %}{{ definition.qualificatif }}{% endif %}{% endfor %}</td>
                      {% endfor %}</tr></tbody>
                  </table>
                {% endif %}
                {% include "combo/json/includes/airquality-recos.html" with indice=day_indice.indice %}
              </div>
            {% endfor %}
          {% elif air2go.indices %}
            {# localized data, different API #}
            {% for day_indice in air2go.indices.values %}
              <div class="tables tables-day-{{ forloop.counter0 }}" {% if forloop.counter0 != 1 %}style="display: none"{% endif %}>
                {% include "combo/json/includes/airquality-indice-logo.html" with indice=day_indice.indice_multipolluant.valeur %}
                {% if vigilances.data.vigilances %}
                  <div class="vigilance">
                    <h4>Vigilance pollution</h4>
                    <p>{{ vigilances.data.vigilances.0.commentaire|linebreaks }}</p>
                  </div>
                {% endif %}
                <table class="day-indices">
                  <tr>
                    <td data-switch-day-prev="{{ forloop.counter0 }}">{% if forloop.counter0 == 1 %}Hier ←{% elif forloop.counter0 == 2 %}Aujourd’hui ←{% endif%}</td>
                    <td data-switch-day-next="{{ forloop.counter0 }}">{% if forloop.counter0 == 1 %}→ Demain{% elif forloop.counter0 == 0 %}→ Aujourd’hui{% endif %}</td>
                  </tr>
                </table>
                {% if not vigilances.data.vigilances %}
                  <table class="indices">
                    <thead><tr> <th>PM2.5</th> <th>PM10</th> <th>SO2</th> <th>O3</th> <th>NO2</th> </tr></thead>
                    <tbody><tr>
                      <td>{% for definition in definitions.data %}{% if definition.indice == day_indice.sous_indice_pm25.valeur %}{{ definition.qualificatif }}{% endif %}{% endfor %}</td>
                      <td>{% for definition in definitions.data %}{% if definition.indice == day_indice.sous_indice_pm10.valeur %}{{ definition.qualificatif }}{% endif %}{% endfor %}</td>
                      <td>{% for definition in definitions.data %}{% if definition.indice == day_indice.sous_indice_so2.valeur %}{{ definition.qualificatif }}{% endif %}{% endfor %}</td>
                      <td>{% for definition in definitions.data %}{% if definition.indice == day_indice.sous_indice_o3.valeur %}{{ definition.qualificatif }}{% endif %}{% endfor %}</td>
                      <td>{% for definition in definitions.data %}{% if definition.indice == day_indice.sous_indice_no2.valeur %}{{ definition.qualificatif }}{% endif %}{% endfor %}</td>
                    </tr></tbody>
                  </table>
                {% endif %}
                {% include "combo/json/includes/airquality-recos.html" with indice=day_indice.indice_multipolluant.valeur %}

              </div>
            {% endfor %}
          {% endif %}
          <p class="plus-atmo"><a href="{% firstof atmo_en_savoir_plus_url "https://www.atmo-auvergnerhonealpes.fr/article/indices-et-normes" %}">En savoir plus sur le calcul de l’indice de qualité de l’air sur le site ATMO</a></p>
        {% elif air2go %}
          {% localize off %}
            <a class="address-name" href="{{airquality_details_path}}{{lon}},{{lat}}/">{{ nominatim.display_name }}</a>
          {% endlocalize %}
          {% if vigilances.data.vigilances %}<p class="vigilance-pollution">Vigilance pollution</p>{% endif %}
          {% if not air2go.indices %}
            <span class="qualif"><i>Données indisponibles.</i></span>
          {% else %}
            {% for definition in definitions.data %}
              {% if definition.indice == air2go.indices.indice_j.indice_multipolluant.valeur %}
                <div class="tile-indice">
                  <img src="{{ definition.picto_url }}" alt="Indice : {{ air2go.indices.indice_j.indice_multipolluant.valeur }}" height="30">
                  {{ definition.qualificatif }}
                </div>
              {% endif %}
            {% endfor %}
          {% endif %}
        {% endif %}

      </div>
    </div>
    {% if not is_place_page %}
      <div class="tile-actions">
        {% localize off %}
          <a class="action-more-info" href="{{airquality_details_path}}{{lon}},{{lat}}">d’infos</a>
        {% endlocalize %}
      </div>
    {% endif %}

  </div>
{% endwith %}
