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

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

{% block popins %}
        <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="#">
                    <div class="col-left">
                        <table>
                            <tbody>
                                <tr>
                                    <th>Vignette :</th>
                                    <td>
                                        <label class="no-margin styled-select">
                                            <select class="w-192">
                                                <option selected value="">Mosaïque</option>
                                                <option value="/egonomy/allfragments/">Argumentaire</option>
                                            </select>
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Visibilité :</th>
                                    <td>
                                        <label class="no-margin styled-select">
                                            <select class="w-192">
                                                <option selected value="">Visible par moi uniquement</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="description-collection">Description :</label></th>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <textarea name="" id="description-collection"></textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                     <ul class="list-projets-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>Collection n°1</h3>
                                <p>par Hubert Trucchose</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">Annuler</a>
                        <input class="btn" type="submit" value="Valider">
                    </div>
                </form>
            </section>
        </div>
{% 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="#" class="active">argumentaire</a></li>
                    <li><span class="dot-6"></span></li>
                    <li><a href="#">mosaïque</a></li>
                    <li><span class="dot-6"></span></li>
                    <li><a href="#">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">
                    <!--li><a href="#">lire le diaporama</a></li>
                    <li><a class="icon save" href="#">enregistrer sous</a></li-->
                    <li><a class="open-popin" href="#collection-parameters">Paramètres de la collection</a></li>
                </ul>
            </div>
        {% if items %}
          {% ifequal display "slideshow" %}
            <ul class="list-projets-3 clearfix masonry-465">
             {% for item in items %}
              {% ifequal item.content_type.model "fragment" %}
                <li class="clearfix horizontal item-masonry">
                    {% with fragment=item.content_object %}
                    <div class="col-left">
						<a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
						<div class="center-image">
						    <div class="image-and-fragment square-fragment-225">
						        {% with image=fragment.image.info.image_file %}
						        {% include "partial/fragment_only.html" %}
						        {% endwith %}
						    </div>
						</div>
						</a>
                        <div class="tools toggle">
                            <ul class="clearfix">
                                <li><a class="tool twitter" href="#" title="{% trans 'Share on Twitter'%}"></a></li>
                                <li><a class="tool facebook" href="#" title="{% trans 'Share on Facebook'%}"></a></li>
                                <li>{% if user.is_authenticated %}
			                        <a class="tool plus open-popin additemtocollection" data-type="fragment" data-id="{{ fragment.pk }}" href="#add-to-collection" title="{% trans 'Add to a collection' %}"></a>
			                      {% else %}
			                        <a class="tool plus" href="{% url 'login' %}?next={% url 'view_fragment' fragment_pk=fragment.pk %}" title="{% trans 'Add to a collection' %}"></a>
			                      {% endif %}</li>
                                <li><a class="tool cut" href="{% url 'create_fragment' image_id=fragment.image.id %}" title="{% trans 'Create a fragment'%}"></a></li>
                                <li><a title="Supprimer" class="tool trash" href="#"></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-right">
                        <div class="project-title">
                            {% if col.author == user %}<a class="edit toggle" href="#"><img alt="" src="{% static 'egonomy/img/icon-pencil-15.png' %}"></a>{% endif %}
                            <h3>{{ fragment.title }}</h3>
                            <h4>{{ fragment.author }}</h4>
                        </div>
                        <p>desc : {{ item.description }}<br/>contenttype : {{ item.content_type.model }}<br/>object_id : {{ item.object_id }}<br/>content_object : {{ item.content_object }}</p>
                    </div>
                    {% endwith %}
                </li>
              {% else %}
              {% with img=item.content_object %}
               {% with img.info.image_file as image %}
				{% if image %}
				 {% if image|is_portrait %}
				<li class="clearfix horizontal item-masonry">
                    <div class="col-left">
                        <a href="{% url 'annotate_picture' image_id=img.id %}">
				          {% thumbnail image "225" format="PNG" crop="center" as im %}
				            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
				          {% empty %}
				            <img src="{% static 'egonomy/img/empty.gif' %}" width="225" height="225" class="placeholder" />
				          {% endthumbnail %}
				        </a>
				 {% else %}
				<li class="item-masonry">
                    <div class="col-left">
                        <a href="{% url 'annotate_picture' image_id=img.id %}">
                          {% thumbnail image "469" format="PNG" crop="center" as im %}
                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
                          {% empty %}
                            <img src="{% static 'egonomy/img/empty.gif' %}" width="469" height="225" class="placeholder" />
                          {% endthumbnail %}
                        </a>
                 {% endif %}
                        <div class="tools toggle">
                            <ul class="clearfix">
                                <li><a class="tool twitter" href="#" title="{% trans 'Share on Twitter'%}"></a></li>
                                <li><a class="tool facebook" href="#" title="{% trans 'Share on Facebook'%}"></a></li>
                                <li>{% if user.is_authenticated %}
                                    <a class="tool plus open-popin additemtocollection" data-type="image" data-id="{{ img.id }}" href="#add-to-collection" title="{% trans 'Add to a collection' %}"></a>
                                  {% else %}
                                    <a class="tool plus" href="{% url 'login' %}?next={% url 'annotation_picture' image_id=img.id %}" title="{% trans 'Add to a collection' %}"></a>
                                  {% endif %}</li>
                                <li><a class="tool cut" href="{% url 'create_fragment' image_id=img.id %}" title="{% trans 'Create a fragment'%}"></a></li>
                                <li><a title="Supprimer" class="tool trash" href="#"></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-right">
                        <div class="project-title">
                            {% if col.author == user %}<a class="edit toggle" href="#"><img alt="" src="{% static 'egonomy/img/icon-pencil-15.png' %}"></a>{% endif %}
                            <h3>{{ img.metadata.titre }}</h3>
                            <h4>{{ img.metadata.auteur }}</h4>
                        </div>
                        <p>desc : {{ item.description }}<br/>contenttype : {{ item.content_type.model }}<br/>object_id : {{ item.object_id }}<br/>content_object : {{ item.content_object }}</p>
                    </div>
                  </li>
				{% else %}
				     <img src="{% static 'egonomy/img/empty.gif' %}" width=225" height="225" class="placeholder" />
				{% endif %}
				{% endwith %}
              {% endwith %}
              {% endifequal %}
             {% endfor %}
            </ul>
          {% endifequal %}
        {% 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>
          {% endif %}
{% endblock %}

{% block js_page %}
<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 %}