{% load wcs %}
{% with parametres=cards|objects:"pn-v2-parametres-generaux"|get_full|first|get:"fields" data=json.data.0 %}
<div class="pn-abonnements--content">
<h3>Mes abonnements aux notifications</h3>

{% if data %}
<h3 class="dim">Mes thématiques</h3>
  <div class="value">
   <ul class="pn-thematiques">
     {% for thematique in data.fields.thematiques_structured %}
     <li class="pn-thematiques--thematique"><span>{{ thematique.text }}</span></li>
     {% endfor %}
   </ul>
  </div>

<h3 class="dim">Mes abonnements aux notifications des communes</h3>
<div class="value">
  {% if data.fields.villes_structured|length == 67 %}
  Toutes les communes de la métropole
  {% else %}
  <ul>
  {% for commune in data.fields.villes_structured %}
  <li>{{ commune.text }}</li>
  {% endfor %}
  </ul>
  {% endif %}
</div>

<h3 class="dim">Mes canaux de diffusion</h3>
<div class="value">{{ data.fields.canaux|default:"-" }}</div>
{% else %} {# ! data #}
<p>Aucun abonnement.</p>
{% endif %}

<p>
<a class="pk-button" href="{{ eservices_url }}{{ parametres|get:"uri_inscription" }}">Gérer mes notifications personnalisées</a>
{% if data and push_notifications_enabled %}
<span class="notification-push-on" style="display: none"><a href="#" class="pk-button">Activer les notifications « push »</a></span>
<span class="notification-push-off" style="display: none"><a href="#" class="pk-button">Désactiver les notifications « push »</a></span>
{% endif %}
</p>

</div>
{% endwith %}

<script>
$(function() {
  $('.pn-thematiques').each(function(idx, elem) {
    const titles = Array();
    $(elem).find('li.pn-thematiques--thematique span').each(function(idx, label) {
      const title = $(label).text().split('/')[0];
      if (titles.indexOf(title) == -1) {
        const $title_tag = $('<li class="intertitle"><strong>' + title + '</strong></li>');
        $title_tag.insertBefore($(label).parent());
        titles.push(title);
      }
      $(label).text($(label).text().split('/')[1]);
    });
  });

  $('.notification-push-on a').on('click', function() {
    $('.notification-push-on').hide();
    $('.notification-push-off').hide();
    combo_pwa_subscribe_user();
    return false;
  });
  $('.notification-push-off a').on('click', function() {
    $('.notification-push-on').hide();
    $('.notification-push-off').hide();
    combo_pwa_unsubscribe_user();
    return false;
  });
  $(document).on('combo:pwa-user-info', function() {
    if (COMBO_PWA_USER_SUBSCRIPTION) {
      $('.notification-push-off').show();
    } else {
      $('.notification-push-on').show();
    }
  });
  if (typeof COMBO_PWA_USER_SUBSCRIPTION !== 'undefined') {
    $(document).trigger('combo:pwa-user-info');
  }
});
</script>
