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

{% block title %}{% trans "Project 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="modal-image.html">
                                    Ajouter une image <i class="icon-plus-sign"></i>
                                </a>
                            </div>
                        </div>

                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Aperçu</th>
                                    <th>Titre</th>
                                    <th>Projets associés</th>
                                    <th>Date de modification</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody class="liste">
                                <tr id="row-list-ressources-image-id1">
                                    <td><img src="img/60x60.gif" alt=""></td>
                                    <td>Titre de l'image qwerty</td>
                                    <td>
                                        <ul>
                                            <li><a href="">Titre du projet azerty</a></li>
                                            <li><a href="">Titre du projet azerty</a></li>
                                            <li><a href="">Titre du projet azerty</a></li>
                                        </ul>
                                    </td>
                                    <td>14/03/2014</td>
                                    <td>
                                        <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a>
                                        <a class="btn btn-delete" data-title="Titre du média" href="#row-list-ressources-image-id1">
                                            <i class="icon-remove"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr id="row-list-ressources-image-id2">
                                    <td><img src="img/60x60.gif" alt=""></td>
                                    <td>Titre de l'image azerty</td>
                                    <td>
                                        <ul>
                                            <li><a href="">Titre du projet azerty</a></li>
                                            <li><a href="">Titre du projet azerty</a></li>
                                            <li><a href="">Titre du projet azerty</a></li>
                                        </ul>
                                    </td>
                                    <td>14/03/2014</td>
                                    <td>
                                        <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a>
                                        <a class="btn btn-delete" data-title="Titre du média" href="#row-list-ressources-image-id2">
                                            <i class="icon-remove"></i>
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <ul>
                                <li class="disabled"><a href="#">Prev</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">Next</a></li>
                            </ul>
                        </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="modal-video.html">
                                        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"></div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
            <button id="btn-delete-modal" class="btn btn-primary">Supprimer</button>
        </div>
    </div>
{% endblock %}
{% block js_import %}
    <script src="{% static 'metadatacomposer/js/jquery-1.9.1.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/jquery-ui/ui/minified/jquery-ui.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/bootstrap.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/ZeroClipboard.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/jquery.spin-1.0.2.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/main.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/resource_pagination.js' %}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	console.log("coucou ready");
    	init_content_pagination_events();
    });
    </script>
{% endblock %}