{% 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.indices.indice_j.indice_multipolluant %}
  <div class="air2go-off"><p>Données de qualité de l’air indisponibles.</p></div>
  {% else %}
  {% for day_indice in air2go.indices|indice_values %}
    <div class="tables tables-day-{{ forloop.counter0 }}" {% if forloop.counter0 != 1 %}style="display: none"{% 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><div class="air2go {{ day_indice.indice_multipolluant.qualificatif|slugify }}" style="border-color: {{ day_indice.indice_multipolluant.couleur_html }}">
      <span class="valeur">{{ day_indice.indice_multipolluant.valeur }}</span>
      <span class="qualif">{{ day_indice.indice_multipolluant.qualificatif }}</span>
    </div></td>
    <td data-switch-day-next="{{ forloop.counter0 }}">{% if forloop.counter0 == 1 %}→ Demain{% elif forloop.counter0 == 0 %}→ Aujourd’hui{% endif %}</td>
    </tr>
    </table>
    <h3>Détails indice qualité de l’air</h3>
    <table class="indices">
      <tr><td>Ozone :</td><td><span style="width: {{ day_indice.sous_indice_o3.valeur }}px"></span>{{ day_indice.sous_indice_o3.valeur }}</td></tr>
      <tr><td>Dioxyde d’azote :</td><td><span style="width: {{ day_indice.sous_indice_no2.valeur }}px"></span>{{ day_indice.sous_indice_no2.valeur }}</td></tr>
      <tr><td>Particules PM<sub>10</sub> :</td><td><span style="width: {{ day_indice.sous_indice_pm10.valeur }}px"></span>{{ day_indice.sous_indice_pm10.valeur }}</td></tr>
    </table>
    </div>
  {% endfor %}
  {% endif %}
{% elif air2go %}
  {% localize off %}
  <a class="address-name" href="{{airquality_details_path}}{{lon}},{{lat}}/">{{ nominatim.display_name }}</a>
  {% endlocalize %}
  {% if not air2go.indices.indice_j.indice_multipolluant %}
  <span class="qualif"><i>Données indisponibles.</i></span>
  {% else %}
  <span class="air2go valeur" style="border-color: {{air2go.indices.indice_j.indice_multipolluant.couleur_html}}">{{air2go.indices.indice_j.indice_multipolluant.valeur}}</span>
  <span class="qualif">{{air2go.indices.indice_j.indice_multipolluant.qualificatif}}</span>
  {% endif %}
{% endif %}

{% if is_place_page %}
<div class="explanation">
<h3>Qu’est-ce que c’est ?</h3>
<div>
{% placeholder "explication" %}
</div>
</div>
{% 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 %}
