{% load gadjo thumbnail %}

{% block cell-content %}
{% if cell.title %}
<h2>{{ cell.title }}</h2>
{% endif %}
<div class="gallery" id="gallery-{{cell.id}}">
{% with cell.image_set.all as images %}
<div class="main-image">
  {% if images|length == 1 %}
    <a href="#" class="show-carrousel single">
      {% thumbnail images.0.image "1130x320" crop="50% 25%" as im %}
      <img src="{{ im.url }}" alt="" title="{{ image.title }}"/>
      {% endthumbnail %}
    </a>
  {% else %}
    <a href="#" class="show-carrousel desktop-only">
      {% thumbnail images.0.image "810x320" crop="50% 25%" as im %}
      <img src="{{ im.url }}" alt="" title="{{ image.title }}"/>
      {% endthumbnail %}
    </a>
    <a href="#" class="show-carrousel">
      {% thumbnail images.1.image "320x320" crop="50% 25%" as im %}
      <img src="{{ im.url }}" alt="" title="{{ image.title }}"/>
      {% endthumbnail %}
      <div class="gallery-overlay">Voir les {{ cell.image_set.all.count }} photos</div>
    </a>
  {% endif %}
</div>
{% for image in images %}
{% thumbnail image.image "1920x1440" crop="50% 25%" upscale=False as im_large %}
<a data-image-large="{{ im_large.url }}" class="image-switch" href=""></a>
{% endthumbnail %}
{% endfor %}
<div id="gallery-carrousel" class="{% if images|length == 1 %}single{% endif %}">
  <span class="exit"></span>
  <span class="previous"></span>
  <span class="next"></span>
  <span class="counter"></span>
</div>
{% endwith %}
</div>
{% endblock %}
