{% extends base|default:"base.html" %}
{% block extra_head %}
    <script type="text/javascript">
        jQuery(function ($) {
            $("#list-images").find(".single-image a.view").fancybox();
        });
    </script>
{% endblock %}
{% block contents %}
    <div id="image-manager" class="tabs">
        <div id="list-images">

            {% block list-images-heading %}
                <h2>Images</h2>
            {% endblock %}

            {% if not images|length %}
                There are no images in the database.
            {% else %}
                {% for image in images %}
                    <div class="single-image">
                        <img src="{{ image.thumbnail }}" alt="{{ image.alternate_text }}" title="{{ image.tooltip }}"/>

                        <div class="actions">
                            <a href="{% url image-manager-delete-image image.id image.name %}" class="delete">Delete</a>
                            <a href="#" class="edit">Edit</a>
                            <a href="{{ image.url }}" target="_blank" class="view pirobox_gall">View</a>
                        </div>
                        <div class="name">{{ image.name }}</div>
                    </div>
                {% endfor %}
                </div>
                <div class="clearfix"></div>
            {% endif %}
        <div id="add-image">
            <h2>Add Image</h2>
            {{ form }}
        </div>
    </div>
{% endblock %}