{% extends 'combo/cell_form.html' %}
{% load static thumbnail i18n %}

{% block cell-form %}
<form action="{{ url }}" method="post" data-label-url="{% url 'combo-manager-page-get-additional-label' page_pk=page.id cell_reference=cell.get_reference %}">
{% csrf_token %}
  {{ form.as_p }}

<ul class="gallery" id="gallery-{{cell.id}}" data-order-url="{% url 'combo-gallery-image-order' gallery_pk=cell.id %}">
{% for image in cell.image_set.all %}
<li data-object-id="{{image.id}}">
{% thumbnail image.image "120x120" crop="50% 25%" as im %}
  <img height="120" src="{{ im.url }}"/>
{% endthumbnail %}
  <span class="image-actions">
  <a rel="popup" class="image-edit icon-edit" href="{% url 'combo-gallery-image-edit' gallery_pk=cell.id pk=image.id %}"></a>
  <a class="image-delete icon-remove-sign" href="{% url 'combo-gallery-image-delete' gallery_pk=cell.id pk=image.id %}"></a>
  </span>
</li>
{% endfor %}
</ul>

<script src="{% static "js/combo.gallery.js" %}"></script>
<script>gallery($('#gallery-{{cell.id}}'));</script>

{% endblock %}


{% block cell-buttons %}
<a class="image-add" rel="popup" href="{% url 'combo-gallery-image-add' gallery_pk=cell.id %}">{% trans 'New Image' %}</a>
|
{{ block.super }}
</form>
{% endblock %}