{% extends "metadatacomposer_home.html" %}
{% load static %}
{% load i18n %}
{% load analytics %}
{% load thumbnail %}
{% load front_tags %}

{% block title %}{% trans "Projects list" %}{% endblock %}

{% block containers %}
            <article class="container">
                <div class="row article-title">
                    <h3 class="span8"><i class="icon-file"></i> Liste des projets</h3>
                    <div class="span4 wrap-btn-add"><a data-type-media="video" data-title="Bibliothèque" class="btn btn-success open-modal" href="modal-bibliotheque.html">Ajouter un projet <i class="icon-plus-sign"></i></a></div>
                </div>
                <table class="row table table-striped">
                    <thead>
                        <tr>
                            <th>Aperçu</th>
                            <th>Titre</th>
                            <th>Média associé</th>
                            <th>Modification</th>
                            <th>URL</th>
                            <th>Embed</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody class="liste">
                      {% for p in results.object_list %}
                        <tr>
                            <td>{% thumbnail p.image "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</td>
                            <td>{{ p.title }}</td>
                            <td>{% with c=p.contents.all|first %}<a href="#">{{ c.title }}</a>{% endwith %}</td>
                            <td>{{ p.modification_date|date:"Y/m/d" }}</td>
                            <td>
                                <form action="#">
                                    <input class="input-small in-table" id="url-azerty" type="text" value="http://google.com" readonly="readonly">
                                    <a href="#" class="btn clipboard" data-clipboard-target="url-azerty"><i class="icon-link"></i></a>
                                </form>
                            </td>
                            <td>
                                <form action="#">
                                    <input class="input-small in-table" id="url-qwerty" type="text" value="http://youtu.be" readonly="readonly">
                                    <a href="#" class="btn clipboard" data-clipboard-target="url-qwerty"><i class="icon-link"></i></a>
                                </form>
                            </td>
                            <td class="actions">
                                <table>
                                    <tr>
                                        <td><a class="btn" href="#"><i class="icon-pencil"></i></a></td>
                                        <td><a class="btn btn-delete" data-title="Titre du média" href="#"><i class="icon-remove"></i></a></td>
                                    </tr>
                                    <tr>
                                        <td><a class="btn" href="#"><i class="icon-eye-open"></i></a></td>
                                        <td><a class="btn" href="#"><i class="icon-copy"></i></a></td>
                                    </tr>
                                </table>        
                            </td>
                        </tr>
                      {% endfor %}
                    </tbody>
                </table>
                <div class="pagination">
                    <ul>
		            {% if results.has_previous %}
		                <li><a href="?page={{ results.previous_page_number }}" >{% trans "Previous" %}</a></li>
		            {% else %}
		               <li class="disabled"><a>{% trans "Previous" %}</a></li>
		            {% endif %}
		            {% if results.paginator.num_pages > 1 %}
		              {% for i in results.paginator.num_pages|get_range %}
		                 <li {% if i|add:'1' == results.number %}class="active"{% endif %}><a href="?page={{i|add:'1'}}">{{i|add:'1'}}</a></li>
		              {% endfor %}
		            {% endif %}
		            {% if results.has_next %}
		                <li><a href="?page={{ results.next_page_number }}">{% trans "Next" %}</a></li>
                    {% else %}
                       <li class="disabled"><a>{% trans "Next" %}</a></li>
                    {% endif %}
		            {% if results.paginator.num_pages > 1 %}
		                <li><a href="?page=x">({% trans "All" %})</a></li>
		            {% endif %}
                    </ul>
                </div>
            </article>
{% endblock %}
{% block modal_divs %}
    <div id="modal-confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3><i class="icon-warning-sign"></i> Confirmation de la suppression</h3>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
            <a id="btn-delete-modal" class="btn btn-primary">Supprimer</a>
        </div>
    </div>
{% endblock %}
{% block js_page %}
    <script src="{% static 'metadatacomposer/lib/ZeroClipboard/ZeroClipboard.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/projet.js' %}"></script>
    <script>
        var ZeroClipboardMoviePath = "{% static 'metadatacomposer/lib/ZeroClipboard/ZeroClipboard.swf' %}";
    </script>
{% endblock %}