{% 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="evenements-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>
  $('#evenements-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="eventitem-category" data-slug="{{connector}}-{{query}}">{{json.meta.label}}</button>
{% for event in json.data %}
<div class="eventitem" data-slug="{{connector}}-{{query}}" data-date="{{ event.created }}">
{% thumbnail event.image.download "160x160" crop="50% 25%" as im %}
<img src="{{ im.url }}" alt="" />
{% endthumbnail %}
{% if not event.image %}
<img src="{{site_base}}{% static "" %}{{css_variant}}/placeholder-logo-bla.jpeg" alt="" height="160" width="160">
{% endif %}
<div>
<h3><a href="{{event.PLONE_id}}">{{event.title}}</a></h3>

  {% with start_date=event.start|slice:9|parse_date|date:"d/m/Y" start_time=event.start|slice:"11:16" %}
  <h4>{{json.meta.label}} -
    {% with end_date=event.end|slice:9|parse_date|date:"d/m/Y" end_time=event.end|slice:"11:16" %}
      {% if event.end and end_date != start_date %}
          du {{ start_date }} à {{ start_time }}
          au {{ end_date }} à {{ end_time }}
      {% else %}
        {% if start_date %}le {{ start_date }}{% endif %}
        {% if event.end and end_time != start_time %}
          de {{ start_time }} à {{ end_time }}
        {% else %}
          à {{ start_time }}
        {% endif %}
      {% endif %}
    {% endwith %}
  </h4>
  {% endwith %}

<p>{{event.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 eventitems in a specific div (.eventitems, 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 $eventitems = $('.dashboard-cell .eventitems');
if ($eventitems.length == 0) {
  var $eventitems = $('<div class="eventitems cell"><h2>Événements</h2><div class="categories"></div></div>');
  $eventitems.appendTo($('.dashboard-cell > div'));
}
$('.eventitem').detach().appendTo($eventitems);
$('.eventitem-category').detach().attr('hidden', null).appendTo($eventitems.find('.categories'));
$('.eventitem-category').order(true);
$('.eventitem').order(false, function(el) { return $(el).data('date'); });

if ("{{ plone_evenements_url|default:'' }}") {
  if ($eventitems.find('.all').length) {
    var $all = $eventitems.find('.all').detach();
  } else {
    var $all = $('<p class="all"><a class="pk-button" href="{{ plone_evenements_url }}">Tous les événements</a></p>');
  }
  $all.appendTo($eventitems);
}

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