{% with alerte=json.data.entries.0 %}
  {% if alerte %}
    <div id="alert" data-urid="{{alerte.link|slugify}}" style="display: none">
      <div class="tile airquality">
        <div class="tile-head">
          <div class="tile-title">
            <h2 class="cell--title"><a href="{% firstof alerte.links.0.href "http://www.air-rhonealpes.fr/" %}">{{alerte.title}}</a></h2>
          </div>
        </div>
        <div class="tile-content">
          {{alerte.summary|truncatechars_html:800|safe}}
        </div>

        {% if alerte.links.0.href %}
          <p class="more-info"><a class="action-more-info"
            title="Plus d’infos (ouverture dans une nouvelle fenêtre)"
            target="_blank" rel="noopener" href="{{alerte.links.0.href}}">d’infos</a></p>
        {% endif %}

      </div>
      <script>
        $(function() {
          if (window.localStorage.getItem('alert-' + $('#alert').data('urid')) != 'acked') {
            $('#alert').dialog({
              title: 'Information prioritaire',
              modal: true,
              width: 'auto',
              close: function(event, ui) {
                window.localStorage.setItem('alert-' + $('#alert').data('urid'), 'acked');
              }
            });
          }
        });
      </script>
  {% endif %}
{% endwith %}