{% extends "combo/dashboardcell.html" %}
{% load i18n %}
{% block cell-content %}
  {% comment %}{% if not tiles|length %}{% endcomment %}
  <h2 class="cell--title">Votre fil d'actu</h2>
  <p class="empty-dashboard"><a href="/mon-compte/">Personnaliser cet espace depuis la page « Mon compte »</a>.</p>
  {% comment %}{% endif %}{% endcomment %}

  {% for tile in tiles %}
    {% with cell=tile.cell %}
      <div class="cell {{ cell.css_class_names }} {% if cell.slug %}{{cell.slug}}{% endif %} imio-dashboard-tile"
        data-imio-ajax-url="{{ site_base }}{{ cell.get_ajax_url }}"
        data-imio-loading-message="{{ cell.loading_message }}"
        data-imio-error-message="{% trans "Loading error" %}">
        <div>
          <div class="loading">
            <span class="loading-message">{{ cell.loading_message }}</span>
          </div>
        </div>
      </div>
    {% endwith %}
  {% endfor %}

  <script>
    (function() {
      window._imioTileData    = window._imioTileData    || {};
      window._imioTilePending = window._imioTilePending || {};

      function renderTile($tile, data) {
        $tile.addClass('ajax-loaded').removeClass('imio-loading');
        var inner = $tile.children('div')[0];
        if (inner) {
          inner.innerHTML = data;
          if (!inner.children.length) {
            $tile.addClass('empty-cell');
          }
        }
        $(document).trigger('imio:cell-loaded', $tile);
      }

      function loadTile($tile) {
        if ($tile.hasClass('ajax-loaded') || $tile.hasClass('imio-loading')) return;
        var rawUrl = $tile.data('imio-ajax-url');
        if (!rawUrl) return;

        $tile.addClass('imio-loading');

        if (window._imioTileData[rawUrl] !== undefined) {
          renderTile($tile, window._imioTileData[rawUrl]);
          return;
        }

        if (window._imioTilePending[rawUrl]) {
          window._imioTilePending[rawUrl].push($tile);
          return;
        }

        window._imioTilePending[rawUrl] = [$tile];
        var url = rawUrl + (rawUrl.indexOf('?') >= 0 ? '&' : '?');

        $.ajax({
          url: url,
          xhrFields: { withCredentials: true },
          async: true,
          dataType: 'html',
          crossDomain: true,
          timeout: 30000,
          success: function(data) {
            var queue = window._imioTilePending[rawUrl] || [$tile];
            delete window._imioTilePending[rawUrl];
            if (data === 'retry') {
              queue.forEach(function($t) { $t.removeClass('imio-loading'); });
              setTimeout(function() { queue.forEach(function($t) { loadTile($t); }); }, 2000);
              return;
            }
            window._imioTileData[rawUrl] = data;
            queue.forEach(function($t) { renderTile($t, data); });
          },
          error: function(xhr) {
            var queue = window._imioTilePending[rawUrl] || [$tile];
            delete window._imioTilePending[rawUrl];
            var msg = $tile.data('imio-error-message') || 'Erreur de chargement';
            queue.forEach(function($t) {
              $t.addClass('ajax-loaded').removeClass('imio-loading');
              $t.find('.loading')
                .addClass('error-loading')
                .html('<span class="loading-message">' + msg + '</span>');
            });
          }
        });
      }

      $('.imio-dashboard-tile').each(function() { loadTile($(this)); });

      function setupNewsFilters() {
        $('.dashboardcell, .dashboard-cell').on('click', '.newsitem-category', function() {
          if ($(this).is('.off')) {
            $(this).removeClass('off');
            $('.newsitem[data-slug="' + $(this).data('slug') + '"]').show().removeClass('off');
          } else {
            $(this).addClass('off');
            $('.newsitem[data-slug="' + $(this).data('slug') + '"]').hide().addClass('off');
          }
          hide_duplicates('.newsitems');
        });
        $(document).off('imio:cell-loaded', setupNewsFilters);
      }
      $(document).on('imio:cell-loaded', setupNewsFilters);

      $('.dashboardcell, .dashboard-cell').on('click', '.eventitem-category', function() {
        if ($(this).is('.off')) {
          $(this).removeClass('off');
          $('.eventitem[data-slug="' + $(this).data('slug') + '"]').show().removeClass('off');
        } else {
          $(this).addClass('off');
          $('.eventitem[data-slug="' + $(this).data('slug') + '"]').hide().addClass('off');
        }
        hide_duplicates('.eventitems');
      });
    })();
  </script>
{% endblock %}