{% load dashboard static thumbnail %}
{% if not in_dashboard %}
<div class="dashboard-settings">
<div class="dashboard-meta">
<h2>{{json.meta.label}}</h2>
{% if json.meta.description %}<div>{{json.meta.description}}</div>{% endif %}
</div>
<div class="dashboard-switch">
  {% with tile=cell|as_dashboard_cell:request.user %}
  <input type="checkbox" id="actualites-id-{{connector}}{{query}}"
      data-add-tile-url="{% url 'combo-dashboard-add-tile' cell_reference=cell.get_reference %}"
      {% if tile %}
      checked
      data-remove-tile-url="{% url 'combo-dashboard-remove-tile' cell_reference=tile.cell.get_reference %}"
      {% endif %}
    >
  {% endwith %}
  <script>
  $('#actualites-id-{{connector}}{{query}}').on('change', function() {
    if ($(this).is(':checked')) {
      var $checkbox = $(this);
      $.ajax({
        url: $(this).data('add-tile-url'),
        success: function(data) {
          $checkbox.data('remove-tile-url', data.cell_data.remove_url);
          $('h1#logo').addClass('dashboard-change').on('animationend', function() { $('h1#logo').removeClass('dashboard-change')});
        }
      });
    } else {
      $.ajax({
        url: $(this).data('remove-tile-url'),
        success: function(data) {}
      });
    }
  });
  </script>
</div>
</div>
{% else %}
<button hidden class="newsitem-category" data-slug="{{connector}}-{{query}}">{{json.meta.label}}</button>
{% for actu in json.data %}
<div class="newsitem" data-slug="{{connector}}-{{query}}" data-date="{{ actu.created }}">
{% thumbnail actu.image.download "160x160" crop="50% 25%" as im %}
<img src="{{ im.url }}" alt="" />
{% endthumbnail %}
{% if not actu.image %}
<img src="{{site_base}}{% static "" %}{{css_variant}}/placeholder-logo-bla.jpeg" alt="" height="160" width="160">
{% endif %}
<div>
<h3><a href="{{actu.PLONE_id}}">{{actu.title}}</a></h3>
<h4>{{json.meta.label}} - {{ actu.created|slice:19|parse_date|date:"d/m/Y" }}</h4>
<p>{{actu.description|truncatechars:200|safe|escape}}</p>
</div>
</div>
{% endfor %}
{% if json.data %}
<script>
jQuery.fn.order = function(asc, fn) { // via https://jsfiddle.net/mindplay/H2mrp/
    fn = fn || function (el) {
        return $(el).text().replace(/^\s+|\s+$/g, '');
    };
    var T = asc !== false ? 1 : -1,
        F = asc !== false ? -1 : 1;
    this.sort(function (a, b) {
        a = fn(a), b = fn(b);
        if (a == b) return 0;
        return a < b ? F : T;
    });
    this.each(function (i) {
        this.parentNode.appendChild(this);
    });
};
// move newsitems in a specific div (.newsitems, created as a child of the
// dashboard cell if necessary), and sort all of them (maybe from several
// categories on date); also add a toggle button for the category.
var $newsitems = $('.dashboard-cell .newsitems');
if ($newsitems.length == 0) {
  var $newsitems = $('<div class="newsitems cell"><h2>Actualités</h2><div class="categories"></div></div>');
  $newsitems.appendTo($('.dashboard-cell > div'));
}
$('.newsitem').detach().appendTo($newsitems);
$('.newsitem-category').detach().attr('hidden', null).appendTo($newsitems.find('.categories'));
$('.newsitem-category').order(true);
$('.newsitem').order(false, function(el) { return $(el).data('date'); });

if ("{{ plone_actualites_url|default:'' }}") {
  if ($newsitems.find('.all').length) {
    var $all = $newsitems.find('.all').detach();
  } else {
    var $all = $('<p class="all"><a class="pk-button" href="{{ plone_actualites_url }}">Toutes les actualités</a></p>');
  }
  $all.appendTo($newsitems);
}

function hide_duplicates(base) {
  var duplicates = Object();
  $(base).find('div[data-slug]').each(function(idx, elem) {
    var url = $(elem).find('h3 a').attr('href');
    if ($(elem).hasClass('off')) return;
    if (duplicates.hasOwnProperty(url)) {
      $(elem).hide();
    } else {
      $(elem).show();
      duplicates[url] = true;
    }
  });
}
hide_duplicates('.newsitems');
hide_duplicates('.eventitems');
</script>
{% endif %}
{% endif %}
