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

{% 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="Ajouter un projet" class="btn btn-success open-modal" 
                            href="{% url 'composer_modal_content_library' branding=branding %}?mode=create" data-hide-add-new>
                            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 class="copy-url">URL</th>
                            <th class="copy-url">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="{% url 'embediframe_page' %}?content_id={{ c.iri_id }}" data-type-media="video" data-title="{{ c.title }}" class="open-modal" data-hide-add-new data-iframe>{{ c.title }}</a>{% endwith %}</td>
                            <td>{{ p.modification_date|date:"Y/m/d" }}</td>
                            <td>
                                <input class="input-small in-table" id="url_{{ p.ldt_id }}" type="text" value="{% absurl 'composer_preview_player' branding=branding ldt_id=p.ldt_id %}" readonly="readonly">
                                <a href="#" class="btn clipboard" data-clipboard-target="url_{{ p.ldt_id }}"><i class="icon-link"></i></a>
                            </td>
                            <td>
                                <input class="input-small in-table" id="embed_{{ p.ldt_id }}" type="text" value="<iframe src='{% absurl 'composer_player' branding=branding ldt_id=p.ldt_id %}' width='1000' height='700' frameborder='0' allowfullscreen></iframe>" readonly="readonly">
                                <a href="#" class="btn clipboard" data-clipboard-target="embed_{{ p.ldt_id }}"><i class="icon-link"></i></a>
                            </td>
                            <td class="actions">
                                <table>
                                    <tr>
                                        <td><a class="btn" href="{% url 'composer_edit' branding=branding ldt_id=p.ldt_id %}"><i class="icon-pencil"></i></a></td>
                                        <td><a class="btn btn-delete" data-title="{{ p.title }}" href="{% url 'composer_remove_project' branding=branding %}?ldt_id={{ p.ldt_id }}"><i class="icon-remove"></i></a></td>
                                    </tr>
                                    <tr>
                                        <td><a class="btn" href="{% url 'composer_preview_player' branding=branding ldt_id=p.ldt_id %}"><i class="icon-eye-open"></i></a></td>
                                        <td><a class="btn" href="{% url 'composer_duplicate_project' branding=branding %}?ldt_id={{ p.ldt_id }}"><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">
            <p>Êtes-vous sûr de vouloir supprimer <strong class="titleMedia"></strong> ?<br/>Attention, cette action est <strong>irréversible</strong>.</p>
        </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>
    <div id="modal-template" class="modal hide fade popup" 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></h3>
        </div>
        <div class="modal-body"></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>
    <script>
    // pagination in modal
    $(document).on('click', 'a.content_pagination_library', function(e){
        e.preventDefault();e.stopPropagation();
        var url = $(this).attr('href');
        $(this).addClass("loader");
        $.ajax({
            url: url,
            cache: false,
            type: 'GET',
            success: function(data, status, request) {
                $("#content_list_container_library").html(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                resp = $.parseJSON(jqXHR.responseText);
                alert(resp.message);
            }
        });
    });
    </script>
{% endblock %}