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

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

{% block containers %}
            <div class="container">
                <ul class="nav nav-tabs tab-behavior">
                    <li class="active"><a href="#image-section"><i class="icon-picture"></i> Image</a></li>
                    <li><a href="#video-section"><i class="icon-film"></i> Video</a></li>
                </ul>
                 
                <div class="tab-content">
                    <article class="tab-pane active" id="image-section">
                        <div class="row article-title">
                            <h3 class="span8"><i class="icon-picture"></i> Liste des images</h3>
                            <div class="span4 wrap-btn-add">
                                <a data-type-media="image" data-title="Ajouter une image" class="btn btn-success open-modal" 
                                href="{% url 'composer_modal_image' branding=branding %}" data-hide-bibliotheque>
                                    Ajouter une image <i class="icon-plus-sign"></i>
                                </a>
                            </div>
                        </div>
                        <div id="image_list_container">
                        {% include 'partial/resource_image_list.html' %}
                        </div>
                    </article>

                    <div class="tab-pane" id="video-section">
                        <article class="tab-pane active" id="video-section">
                            <div class="row article-title">
                                <h3 class="span8"><i class="icon-film"></i> Liste des vidéos</h3>
                                <div class="span4 wrap-btn-add">
                                    <a data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" 
                                    href="{% url 'composer_modal_content' branding=branding %}" data-hide-bibliotheque>
                                        Ajouter une vidéo <i class="icon-plus-sign"></i>
                                    </a>
                                </div>
                            </div>
                            <div id="content_list_container">
                            {% include 'partial/resource_content_list.html' %}
                            </div>
                        </article>
                    </div>
                </div><!-- /.tab-content -->
            </div>
{% endblock %}
{% block modal_divs %}
    <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>

    <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>
{% endblock %}
{% block js_page %}
    <script src="{% static 'metadatacomposer/js/ressource.js' %}"></script>
    <script type="text/javascript">
    $(document).on('click', 'a.content_pagination', 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").html(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                resp = $.parseJSON(jqXHR.responseText);
                alert(resp.message);
            }
        });
    });
    $(document).on('click', 'a.image_pagination', 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) {
                $("#image_list_container").html(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                resp = $.parseJSON(jqXHR.responseText);
                alert(resp.message);
            }
        });
    });
    $(document).on('click', 'a.image_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) {
                $("#image_list_container_library").html(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                resp = $.parseJSON(jqXHR.responseText);
                alert(resp.message);
            }
        });
    });
    $(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 %}