{% load gadjo thumbnail %}

{% block cell-content %}
  {% if cell.title %}
    <h2 class="cell--title">{{ 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 %}