{% load static %}
{% load i18n %}
{% load analytics %}
{% load thumbnail %}
{% load front_tags %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Aix - Back office > Edition</title>
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="{% static 'metadatacomposer/lib/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'metadatacomposer/lib/jquery-ui/themes/base/minified/jquery-ui.min.css' %}" rel="stylesheet">
    <link href="{% static 'metadatacomposer/lib/CLEditor/jquery.cleditor.css' %}" rel="stylesheet">
    <link href="{% static 'metadatacomposer/lib/tag-it/css/jquery.tagit.css' %}" rel="stylesheet">
    <link href="{% static 'metadatacomposer/css/style.css' %}" rel="stylesheet">
    {% include top_header_css %}
</head>
<body>
    <div class="wrap">
        <header>
            <div class="container">
                <div class="row">
                    <div class="span3"><h1><a class="clearfix" href="{% url 'composer_home' branding=branding %}">
                        {% include top_header_partial %}
                    </a></h1></div>
                    <div class="span9">
                        <ul class="breadcrumb nav-bar">
                        <li><a href="{% url 'composer_project_list' branding=branding %}"><i class="icon-file"></i> Projets</a></li>
                        <li><span class="divider">></span></li>
                        <li class="active"><i class="icon-folder-close-alt"></i> <span class="project-title-nav">{{ project.title }}</span></li>
                        <li><span class="divider">/</span></li>
                        <li><a href="{% url 'composer_resource_list' branding=branding %}"><i class="icon-folder-close-alt"></i>Ressources</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <section>
            <div class="container">
                <div class="row alerts">
                    <div class="save-load alert alert-info fade in">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="icon-spinner icon-spin"></i> Enregistrement du projet en cours...
                    </div>
                    <div class="save-ok  alert alert-success fade in">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="icon-save"></i> Le projet a bien été sauvegardé !
                    </div>
                    <div class="save-error alert alert-error fade in">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="icon-warning-sign"></i> Une erreur est survenue lors de la sauvegarde du projet.
                    </div>
                </div>
                <div class="row project-head">
                    <div class="span7">
                        <div class="project-title-editor">
                            <i class="icon-folder-close-alt"></i> 
                            <span class="project-title">{{ project.title }}</span> <i class="icon-pencil"></i> 
                        </div>

                    </div>
                    <div class="span5 text-right project-action">
                        <a href="{% url 'composer_preview_player' branding=branding ldt_id=ldt_id %}" class="btn btn-apercu-projet"><i class="icon-eye-open"></i> Voir aperçu</a>
                        <a href="#" class="btn btn-success btn-save-project"><i class="icon-save"></i> Sauvegarder le projet</a>
                    </div>
                </div>
                <div class="row">
                    <div class="span6">
                        <div class="video-wrap">
                            <div class="main-video"></div>
                            <div class="annotations-display">
                                <div class="annotation-display-view"></div>
                                <ul class="list-current-annotations">

                                </ul>
                            </div>
                        </div>
                        <div class="timeline-annotations-wrap">
                            <div class="indicateur-annotation"></div>
                            <ul class="timeline-annotations"></ul>
                        </div>
<!-- chapter-widget -->
                        <div class="chapter-widget">
                            <div class="row">
                                
                                <div class="span6 chapitre-cut-wrap">
                                    <div class="indicateur-chapter"></div>
                                    <ul class="chapter-segments"></ul>
                                    <a href="#" class="btn btn-primary btn-cut-chapter" title="Nouveau chapitre"><i class="icon-flag"></i> <i class="icon-cut"></i><br/>
                                        <span class="info-time">0:00</span>
                                    </a>

                                </div>
                            </div>
                            <div class="chapter-widget-info">
                            </div>
                            <div class="list-chapter-wrap">
                                <h4><i class="icon-flag"></i> <i class="icon-th-list"></i> Liste des chapitres</h4>
                                <table class="table" width="5000">
                                    <thead>
                                        <tr>
                                            <th>Titre</th>
                                            <th>Tags</th>
                                            <th class="wDuration">Début</th>
                                            <th class="wDuration">Durée</th>
                                            <th class="wDuration">Fin</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list-chapter-rows-wrap">
                                    </tbody>
                                </table>
                            </div>
                            
                        </div><!-- /.chapter-widget -->
                    </div>
                    <div class="span6 col-right">
<!-- tab -->
                        <ul class="nav nav-tabs" id="onglet-annotations">
                            <li class="active"><a data-toggle="list-annotations" id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
                        </ul>

                        <div class="tab-content">
<!-- liste annotations -->
                            <div class="tab-pane active" id="list-annotations">
                                <div class="add-annotation-wrap section">
                                    <h4 class="title-section"><i class="icon-bookmark"></i> <i class="icon-plus"></i> Ajouter une annotation de type</h4>
                                    <div class="text-center">
                                        <a href="#" title="Son" data-type="audio" class="btn open-tab audio"><i class="icon-volume-up"></i> Son</a>
                                        <a href="#" title="Vidéo" data-type="video" class="btn open-tab video"><i class="icon-film"></i> Vidéo</a>
                                        <a href="#" title="Diaporama" data-type="slideshow" class="btn open-tab slideshow"><i class="icon-picture"></i> Diaporama</a>
                                        <a href="#" title="Texte" data-type="text" class="btn open-tab text"><i class="icon-align-left"></i> Texte</a>
                                        <a href="#" title="Lien" data-type="links" class="btn open-tab links"><i class="icon-link"></i> Liens</a>
                                    </div>
                                </div>
                                <div class="list-annotation-wrap">
                                    <h4><i class="icon-bookmark"></i> <i class="icon-th-list"></i> Liste des annotations</h4>
                                    <table class="table ">
                                        <thead>
                                            <tr>
                                                <th>Titre</th>
                                                <th>Type</th>
                                                <th>Début</th>
                                                <th>Durée</th>
                                                <th>Fin</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="list-annotations-rows">

                                        </tbody>
                                    </table>
                                </div>
                            </div><!-- /.liste annotations -->
                        </div><!-- /.tab-content -->
                    </div><!-- /.col-right -->
                </div>
            </div><!-- /.container -->
        </section>
        <footer>

        </footer>
    </div>

<!-- modal -->
    <div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" 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-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> ?</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-alert" class="modal hide fade" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel"><i class="icon-warning-sign"></i> Attention</h3>
    </div>
    <div class="modal-body">
        <p class="alert-message" id="alert-chapter-duration">Les chapitres doivent durer au moins <strong></strong> secondes.</p>
        <p class="alert-message" id="alert-chapter-number">Le projet doit contenir au moins un chapitre.</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

<div id="templates">

<script id="tpl-head" type="text/html">
<form action="#" class="form-info-general-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
    <div class="row">
        <div class="span3 text-right">
            <label class="label-left" for="head-title-{% templatetag openvariable %}id{% templatetag closevariable %}">Titre :</label>
            <input class="label-left head-title" id="head-title-{% templatetag openvariable %}id{% templatetag closevariable %}" type="text" placeholder="Titre de l'annotation.." name="title" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
            <label class="label-left" for="head-description-{% templatetag openvariable %}id{% templatetag closevariable %}">Description :</label>
            <textarea id="head-description-{% templatetag openvariable %}id{% templatetag closevariable %}" name="description">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
        </div>
        <div class="span3">
            <label  for="head-tags-{% templatetag openvariable %}id{% templatetag closevariable %}">Tags :</label>
            <input id="head-tags-{% templatetag openvariable %}id{% templatetag closevariable %}" type="text" class="tag-it" data-type="annotation" value="{% templatetag openvariable %}keywords{% templatetag closevariable %}">
            <table class="table text-right">
                <thead>
                    <tr>
                        <th class="span1">Début</th>
                        <th class="span1">Durée</th>
                        <th class="span1">Fin</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="{% templatetag openvariable %}id{% templatetag closevariable %}-begin" class="span1">
                            <span data-milliseconds="{% templatetag openvariable %}begin.milliseconds{% templatetag closevariable %}" class="time-tangle tangle-start slider-tangle">{% templatetag openvariable %}begin{% templatetag closevariable %}</span>
                        </td>
                        <td id="{% templatetag openvariable %}id{% templatetag closevariable %}-duration" class="span1">{% templatetag openvariable %}getDuration{% templatetag closevariable %}</td>
                        <td id="{% templatetag openvariable %}id{% templatetag closevariable %}-end" class="span1">
                            <span data-milliseconds="{% templatetag openvariable %}end.milliseconds{% templatetag closevariable %}" class="time-tangle tangle-end slider-tangle">{% templatetag openvariable %}end{% templatetag closevariable %}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="span6 text-center">
            <label class="label-left" for="slider-{% templatetag openvariable %}id{% templatetag closevariable %}">Durée :</label>
            <div data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="slider-{% templatetag openvariable %}id{% templatetag closevariable %}" class="slider-duration"></div>
        </div>
        <div class="span6 text-right">
            <a class="btn btn-danger btn-delete btn-delete-annotation" data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-no-render>
                <i class="icon-trash"></i> Delete
            </a>
            <a class="btn btn-primary btn-save-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
                <i class="icon-ok"></i> Ok
            </a>
        </div>
    </div>
</form>
</script>

<script id="tpl-onglet" type="text/html">
<li id="onglet-{% templatetag openvariable %}id{% templatetag closevariable %}">
    <a data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-toggle="annotation" href="#tab-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}">
        <i class="icon-{% templatetag openvariable %}iconTab{% templatetag closevariable %}"></i> 
        <span id="onglet-title-{% templatetag openvariable %}id{% templatetag closevariable %}">{% templatetag openvariable %}title{% templatetag closevariable %}</span> 
        <span class="close-tab">&times;</span>
    </a>
</li>
</script>

<script id="tpl-audio" type="text/html">
<div class="edit-annotation-title row">
    <h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
</div>
<div class="row annotation-audio-content">
        <div class="span6">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="url-source-{% templatetag openvariable %}id{% templatetag closevariable %}">URL source :</label>
                    <div class="controls">
                        <input type="text" value="{% templatetag openvariable %}content.url{% templatetag closevariable %}" name="url" id="url-source-{% templatetag openvariable %}id{% templatetag closevariable %}" placeholder="http://">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="embed-{% templatetag openvariable %}id{% templatetag closevariable %}">Code embed :</label>
                    <div class="controls">
                        <textarea name="embedcode" id="embed-{% templatetag openvariable %}id{% templatetag closevariable %}" cols="30" rows="10">{% templatetag openvariable %}content.embedcode{% templatetag closevariable %}</textarea>
                    </div>
                </div>
            </form>
        </div>
</div>
</script>

<script id="tpl-video" type="text/html">
<div class="edit-annotation-title row">
    <h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
    <span class="span3">
        <span class="label-add-video">Ajouter une vidéo <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="{% url 'composer_modal_content_library' branding=branding %}" data-hide-add-new><i class="icon-plus"></i></a></span>
        <span class="label-modify-video">Modifier la vidéo <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-type-media="video" data-title="Modifier la vidéo" class="btn btn-success open-modal" href="{% url 'composer_modal_content_library' branding=branding %}" data-hide-add-new><i class="icon-pencil"></i></a></span> 
    </span>
</div>
<div class="row annotation-video-content"></div>
</script>

<script id="tpl-text" type="text/html">
<div class="edit-annotation-title row">
    <h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
</div>
<div class="row">
    <div class="span6 wysiwyg-wrap">
        <textarea class="wysiwyg" cols="30" rows="10">{% templatetag openvariable %}content.text{% templatetag closevariable %}</textarea>
    </div>
</div>
</script>

<script id="tpl-slideshow" type="text/html">
<div class="edit-annotation-title row">
    <h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
    <span class="span3">
        Ajouter une image 
        <a data-type-media="image" data-slideshow="slideshow-{% templatetag openvariable %}id{% templatetag closevariable %}" data-title="Ajouter une image" class="btn btn-success open-modal" href="{% url 'composer_modal_image_library' branding=branding %}" data-hide-add-new><i class="icon-plus"></i></a>
    </span>
</div>
<div class="row config-slideshow">
    <form action="#">
        <div class="span3">
            <label>Diaporama :</label>
            <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" data-autostart="false" class="{% templatetag openvariable %}^content.autostart{% templatetag closevariable %}active{% templatetag openvariable %}/content.autostart{% templatetag closevariable %} btn btn-primary btn-autostart">Manuel</button>
                <button type="button" class="{% templatetag openvariable %}#content.autostart{% templatetag closevariable %}active{% templatetag openvariable %}/content.autostart{% templatetag closevariable %} btn btn-primary  btn-autostart" data-autostart="true">Auto</button>
            </div>  
        </div>
        <div class="span3">
            <label for="duration-slideshow-{% templatetag openvariable %}id{% templatetag closevariable %}">Durée image : </label>
            <input id="duration-slideshow-{% templatetag openvariable %}id{% templatetag closevariable %}" pattern="[0-9]*" class="span1 number-spin" type="text" name="duration" value="{% templatetag openvariable %}content.slideduration{% templatetag closevariable %}"> sec
        </div>
    </form>
</div>
<div class="row">
    <div class="span6">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Aperçu</th>
                    <th>Titre</th>
                    <th>Description</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="slideshow-{% templatetag openvariable %}id{% templatetag closevariable %}" class="list-image-slideshow ui-sortable">
            </tbody>
        </table>
    </div>
</div>
</script>

<script id="tpl-links" type="text/html">
<div class="edit-annotation-title row">
    <h3 class="span3"><i class="icon-link"></i> Liens</h3>
</div>
<div class="row annotation-links-content">
    <div class="span6">
        <form class="form-horizontal">
            <table class="table">
                <thead>
                    <tr>
                        <th>URL</th>
                        <th>Titre du lien</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" class="links-rows"></tbody>
                <tfoot>
                    <tr>
                        <td colspan="3"><a class="btn btn-success add-link" href="#"><i class="icon-plus"></i> Ajouter un lien</a></td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </div>
</div>
</script>

<script id="tpl-links-row" type="text/html">
<tr>
    <td class="control-group">
        <input class="input-medium url-link" type="text" value="{% templatetag openvariable %}url{% templatetag closevariable %}" placeholder="http://">
        <div class="help-inline"><i class="icon-unlink"></i> Le lien est incorrect.</div>
    </td>
    <td><input class="input-medium title-link" type="text" value="{% templatetag openvariable %}title{% templatetag closevariable %}" placeholder="Titre du lien">
    </td>
    <td>
        <a class="btn delete-link" href="#"><i class="icon-trash"></i> </a>
    </td>
</tr>
</script>

<script id="tpl-slideshow-row" type="text/html">
<tr id="rid-{% templatetag openvariable %}ridid{% templatetag closevariable %}" class="row-image-slideshow">
    <td class="image-slideshow-row"><img data-url="{% templatetag openvariable %}url{% templatetag closevariable %}" src="{% templatetag openvariable %}url{% templatetag closevariable %}?width=60&height=60" alt="{% templatetag openvariable %}title{% templatetag closevariable %}"> </td>
    <td class="title-slideshow-row" data-input="input" data-name="title">
        <span>{% templatetag openvariable %}#limitLength{% templatetag closevariable %}{% templatetag openvariable %}title{% templatetag closevariable %}{% templatetag openvariable %}/limitLength{% templatetag closevariable %}</span> <i class="icon-pencil"></i>
    </td>
    <td class="description-slideshow-row" data-input="textarea" data-name="description">
        <span>{% templatetag openvariable %}#limitLength{% templatetag closevariable %}{% templatetag openvariable %}description{% templatetag closevariable %}{% templatetag openvariable %}/limitLength{% templatetag closevariable %}</span> <i class="icon-pencil"></i>
    </td>
    <td>
        <table>
            <tr>
                <td>
                    <a data-title="une image" href="#rid-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-image"><i class="icon-trash"></i></a>
                </td>
                <td><a href="#" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
            </tr>
        </table>
    </td>
</tr>
</script>

<script id="tpl-video-row" type="text/html">
<div class="span6">
    <div class="video-container"></div>
</div>
</script>

<script id="tpl-list-annotation-row" type="text/html">
<tr data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
    <td>{% templatetag openvariable %}title{% templatetag closevariable %}</td>
    <td><i class="icon-{% templatetag openvariable %}iconTab{% templatetag closevariable %}"></i></td>
    <td>{% templatetag openvariable %}begin{% templatetag closevariable %}</td>
    <td>{% templatetag openvariable %}getDuration{% templatetag closevariable %}</td>
    <td>{% templatetag openvariable %}end{% templatetag closevariable %}</td>
    <td>
        <a href="#" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" title="Editer l'annotation" class="btn btn-edit-annotation" data-type="{% templatetag openvariable %}type{% templatetag closevariable %}">
            <i class="icon-pencil"></i></a>
        <a data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" title="Supprimer l'annotation" data-type="annotation" data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" href="#row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete btn-delete-annotation">
            <i class="icon-trash delete-annotation"></i>
        </a>
    </td>
</tr>
</script>

<script id="tpl-chapter-row" type="text/html">
<tr class="row-list-chapter" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
    <td class="list-chapter-title">{% templatetag openvariable %}title{% templatetag closevariable %}</td>
    <td class="list-chapter-tags">{% templatetag openvariable %}keywords{% templatetag closevariable %}</td>
    <td class="begin">{% templatetag openvariable %}begin{% templatetag closevariable %}</td>
    <td class="duration">{% templatetag openvariable %}getDuration{% templatetag closevariable %}</td>
    <td class="end">{% templatetag openvariable %}end{% templatetag closevariable %}</td>
    <td>
        <table>
            <tr>
                <td>
                    <a href="#" title="Editer le chapitre" class="btn btn-edit-chapter" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}"><i class="icon-pencil"></i></a>
                </td>
                <td>
                    <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" title="Supprimer le chapitre" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
                </td>
            </tr>
        </table>
    </td>
</tr>
</script>

<script id="tpl-chapter-edit" type="text/html">
<form data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="form-chapter-edit-{% templatetag openvariable %}id{% templatetag closevariable %}" action="#" class="form-chapter-edit" style="background-color:{% templatetag openvariable %}color{% templatetag closevariable %}">
    <h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4>
    <div class="row">
        <div class="span3 text-right">
            <label class="label-left" for="chapter-title-{% templatetag openvariable %}id{% templatetag closevariable %}">Titre :</label>
            <input id="chapter-title-{% templatetag openvariable %}id{% templatetag closevariable %}" class="chapter-title" name="title" type="text" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
            <label class="label-left" for="chapter-keywords-{% templatetag openvariable %}id{% templatetag closevariable %}">Tags :</label>
            <input id="chapter-keywords-{% templatetag openvariable %}id{% templatetag closevariable %}" name="keywords" type="text" class="tag-it" data-type="chapter" value="{% templatetag openvariable %}keywords{% templatetag closevariable %}">
        </div>
        <div class="span3">
            <table class="table text-right">
                <thead>
                    <tr>
                        <th class="span1 ">Début</th>
                        <th class="span1">Durée</th>
                        <th class="span1">Fin</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="span1"><span {% templatetag openvariable %}#beginTangle{% templatetag closevariable %}class="time-tangle tangle-start begin" data-milliseconds="{% templatetag openvariable %}begin.milliseconds{% templatetag closevariable %}"{% templatetag openvariable %}/beginTangle{% templatetag closevariable %}>{% templatetag openvariable %}begin{% templatetag closevariable %}</span></td>
                        <td class="span1"><span class="duration">{% templatetag openvariable %}getDuration{% templatetag closevariable %}</span></td>
                        <td class="span1"><span {% templatetag openvariable %}#endTangle{% templatetag closevariable %}class="time-tangle tangle-end end" data-milliseconds="{% templatetag openvariable %}end.milliseconds{% templatetag closevariable %}"{% templatetag openvariable %}/endTangle{% templatetag closevariable %}>{% templatetag openvariable %}end{% templatetag closevariable %}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="span6 text-center">
            <label class="label-left" for="chapter-description-{% templatetag openvariable %}id{% templatetag closevariable %}">Description :</label>
            <textarea name="description" id="{% templatetag openvariable %}title{% templatetag closevariable %}">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
        </div>
    </div>
    <div class="row">
        <div class="span6 text-right">
            <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" title="Supprimer le chapitre" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-danger btn-delete-chapter">
                <i class="icon-trash"></i> Delete
            </a>
            <a class="btn btn-primary btn-ok-chapter" href="#" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
                <i class="icon-ok"></i> Ok
            </a>
        </div>
    </div>
</form>
</script>   

<script id="tpl-annotation-in-timeline" type="text/html">
<a title="{% templatetag openvariable %}title{% templatetag closevariable %}" style="left:{% templatetag openvariable %}left{% templatetag closevariable %}px; width:{% templatetag openvariable %}width{% templatetag closevariable %}px; background-color:{% templatetag openvariable %}color{% templatetag closevariable %};" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="annotation-timeline-{% templatetag openvariable %}id{% templatetag closevariable %}" class="annotation">
    <i class="icon-pencil"></i> <span>{% templatetag openvariable %}title{% templatetag closevariable %}</span>
</a>
</script>   

<script id="tpl-item-annotation-display" type="text/html">
<li data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
    <a id="item-current-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" class="item-display-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color: {% templatetag openvariable %}color{% templatetag closevariable %};" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#">
        <i class="icon-{% templatetag openvariable %}iconTab{% templatetag closevariable %}"></i>
        <span>{% templatetag openvariable %}title{% templatetag closevariable %}</span>
    </a> 
</li>
</script>

</div><!-- /#templates -->

    <script src="{% static 'metadatacomposer/lib/jquery-1.9.1.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/jquery-migrate-1.1.1.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/jquery-ui/ui/minified/jquery-ui.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/spin/jquery.spin-1.0.2.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/cleditor/jquery.cleditor.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/tag-it/js/tag-it.min.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/mustache.js' %}"></script>
    <script src="{% static 'metadatacomposer/lib/underscore-min.js' %}"></script>
    
    <script src="{% static 'metadatacomposer/js/metadataplayer-core.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/ldt-serializer.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/common.js' %}"></script>
    <script src="{% static 'metadatacomposer/js/edition.js' %}"></script>
    <script>
    var spinParam = {
            imageBasePath :"{% static 'metadatacomposer/lib/spin/img/' %}",
            max:60,
            min:0
        };
    var urlSaveProject = "{% url 'api_dispatch_detail' api_name='1.0' resource_name='projects' ldt_id=ldt_id %}";
    var tokenSaveProject = "{{ csrf_token }}";
    var textCurrentAnnotationEditT = "en cours d'édition";

    /* Initialisation du metadataplayer avec un projet */
    var myDir = new IriSP.Model.Directory(),
        myProject = myDir.remoteSource({
            url: "{% url 'projectjson_id' id=ldt_id %}",
            serializer: IriSP.serializers.ldt
        });
    
    // 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);
            }
        });
    });
    $(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);
            }
        });
    });
    </script>
{% analytics %}
</body>
</html>