{% extends "egonomy_newbase.html" %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "View a collection" %}{% endblock %}

{% block popins %}
    {% if user.is_authenticated %}
      {% ifequal user col.author %}
        <div id="collection-parameters" class="popin big-popin box-shadow">
            <header>
                <h2>PARAMÈTRES DE LA COLLECTION</h2>
                <a href="#" class="close-popin"></a>
            </header>
            <section>
                <form action="{% url 'save_collection' %}" method="POST">
                    <div class="col-left">
                        <input name="collection-pk" type="hidden" value="{{ col.pk }}">
                        <table>
                            <tbody>
                                <tr>
                                    <th><label for="collection-title">{% trans "Title" %} :</label></th>
                                    <td>
                                        <input name="collection-title" id="collection-title" class="w-194" type="text" placeholder="{% trans 'Title' %}" value="{{ col.title }}">
                                    </td>
                                </tr>
                                <tr>
                                    <th><label for="collection-publication-type">{% trans "Thumbnail" %} :</label></th>
                                    <td>
                                        <label class="no-margin styled-select">
                                            <select name="collection-publication-type" id="collection-publication-type" class="w-192">
                                                <option selected value="1">{% trans "List" %}</option>
                                                <option value="2">{% trans "Mosaic" %}</option>
                                                <option value="3">{% trans "Slideshow" %}</option>
                                                <!--option value="4">{% trans "Geographical" %}</option-->
                                            </select>
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <th><label for="collection-public">{% trans "Availability" %} :</label></th>
                                    <td>
                                        <label class="no-margin styled-select">
                                            <select id="collection-public" name="collection-public" class="w-192">
                                                <option selected value="0">{% trans "Visible by me only" %}</option>
                                                <option selected value="1">{% trans "Visible for everyone" %}</option>
                                            </select>
                                        </label>
                                    </td>
                                </tr>
                                <!--tr>
                                    <th><label for="share-collection">Partager :</label></th>
                                    <td>
                                        <input id="share-collection" class="w-194" type="text" placeholder="http://">
                                    </td>
                                </tr-->
                                <tr>
                                    <th colspan="2"><label for="collection-description">Description :</label></th>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <textarea name="collection-description" id="collection-description">{{ col.description }}</textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <ul class="list-style-2 clearfix">
                        <li>
                            <div class="top clearfix">
                                <img src="{% static 'egonomy/img/empty.gif' %}" width="113px" height="113px" alt="" />
                                <img src="{% static 'egonomy/img/empty.gif' %}" width="113px" height="113px" alt="" />
                            </div>
                            <div class="mid">
                                <h3>{{ col.title }}</h3>
                                <p>{% trans "by" %} {{ col.author }}</p>
                            </div>
                            <div class="bot clearfix">
                                <img src="{% static 'egonomy/img/empty.gif' %}" width="113px" height="113px" alt="" />
                                <img src="{% static 'egonomy/img/empty.gif' %}" width="113px" height="113px" alt="" />
                            </div>
                        </li>
                    </ul>
                    <div class="buttons">
                        <a href="#" class="btn close-popin">{% trans "Cancel" %}</a>
                        <input class="btn" type="submit" value="{% trans 'Submit' %}">
                    </div>{% csrf_token %}
                </form>
            </section>
        </div>
      {% endifequal %}
    {% endif %}
{% endblock %}

{% block content %}
            <div class="title-page">
                <h2>{{ col.title }} / <span>par {{ col.author }}</span></h2>
                <ul class="sub-nav title-menu clearfix">
                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=list" {% ifequal display "list" %}class="active"{% endifequal %}>liste</a></li>
                    <li><span class="dot-6"></span></li>
                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=mosaic" {% ifequal display "mosaic" %}class="active"{% endifequal %}>mosaïque</a></li>
                    <li><span class="dot-6"></span></li>
                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=slideshow" {% ifequal display "slideshow" %}class="active"{% endifequal %}>diaporama</a></li>
                    <!--li><span class="dot-6"></span></li>
                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=geographical" {% ifequal display "geographical" %}class="active"{% endifequal %}>géographique</a></li>
                    <li><span class="dot-6"></span></li>
                    <li><a href="#">envoyer vers collage</a></li-->
                </ul>
            </div>
            <div class="bar-tools clearfix">
                <ul class="clearfix">
                  {% ifequal display "mosaic" %}
                    <li><a class="toggle-comment" href="#">
                        <span class="show-comment">{% trans "Display" %}</span>
                        <span class="hide-comment">{% trans "Hide" %}</span> {% trans "the comments" %}</a>
                    </li>
                  {% endifequal %}
                    <!--li><a href="#">lire le diaporama</a></li>
                    <li><a class="icon save" href="#">enregistrer sous</a></li-->
                  {% if user.is_authenticated %}
                    {% ifequal user col.author %}
                    <li>
                        <a class="icon trash" href="{% url 'delete_collection' %}?collection_pk={{col.pk}}" onclick="return confirm('{% trans "Do you really want to delete this collection ? Warning : this action est irreversible." %}')">{% trans "Delete this collection" %}</a>
                    </li>
                    <li><a class="open-popin" href="#collection-parameters">{% trans "Collection parameters" %}</a></li>
                    {% endifequal %}
                  {% endif %}
                </ul>
            </div>
        {% if items %}
          {% ifequal display "list" %}
            <ul class="list-style-3 clearfix masonry-465">
             {% for item in items %}
              {% include 'partial/item_in_collection_list.html' %}
             {% endfor %}
            </ul>
          {% endifequal %}
          {% ifequal display "mosaic" %}
            <div class="clearfix">
	            <div class="filters-wrap float-left">
	                <ul class="filters"></ul>
	            </div>
	            <ul class="list-style-5 mosaic float-left clearfix masonry-177">
	             {% for item in items %}
	              {% include 'partial/item_in_collection_mosaic.html' %}
	             {% endfor %}
	            </ul>
	        </div>
          {% endifequal %}
        {% else %}
          {% ifequal display "slideshow" %}
            <div class="clearfix">
                <iframe width="100%" height="700px" src="{% url 'embed_slideshow' collection_pk=col.pk %}" seamless="seamless" allowfullscreen="allowfullscreen"></iframe>
            </div>
          {% else %}
            <div class="empty-block">
                <form class="search-form-big" id="search-form-big" action="{% if search_fragment %}{% url 'all_fragments' %}{% else %}{% url 'all_pictures' %}{% endif %}" method="GET">
                    <p>
                        <input id="search-field-big" type="text" placeholder="{% trans 'Search' %}" name="search"/>
                        <label class="styled-select">
                            <select id="search-type-big">
                                <option value="{% url 'all_pictures' %}"{% if not search_fragment %} selected{% endif %}>Images</option>
                                <option value="{% url 'all_fragments' %}"{% if search_fragment %} selected{% endif %}>Fragments</option>
                            </select>
                        </label>
                        <input type="hidden" value="all" name="field">
                    </p>
                </form>
            </div>
          {% endifequal %}
        {% endif %}
{% endblock %}

{% block js_page %}
{% ifequal display "mosaic" %}<script type="text/javascript" src="{% static 'egonomy/js/keyword-mosaic.js' %}"></script>{% endifequal %}
<script type="text/javascript">
$(function() {
    $("#search-type-big").change(function() {
        $("#search-form-big").attr("action", $(this).val());
        if ($("#search-field-big").val()) {
            $("#search-form-big").submit();
        }
    });
});
</script>
{% endblock %}