{% 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><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 %}
