{% extends "bpi_mashup_home.html" %}
{% load static %}
{% load i18n %}
{% load analytics %}
{% load thumbnail %}
    {% block title %}Hashcut Edition - BPI{% endblock %}
    {% block css_import %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery.tagit.css' %}" />
    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/edition.css' %}" />
    {% endblock %}

{% block wrap_header %}
<div class="wrap-header"> 
    <div class="header">
    {% include 'partial/bpi_mashup_popin_user.html' %}
    <!-- popin update-title -->
        <div class="popin update-title" id="update-title">
            <div class="pointer"></div>
            <div class="popin-content">
                <form class="clearfix" action="#" id="hashcut-form" method="">
                    <p>
                        <label for="hashcut-title">Titre :</label>
                        <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
                    </p>
                    <p>
                        <label for="hashcut-description">Description :</label>
                        <textarea name="" id="hashcut-description"></textarea>
                    </p>
                </form>
            </div>
        </div>
    <!-- /popin update-title -->
        
    {% include 'partial/bpi_hashcut_logo.html' %}
    
        <div class="title-video-wrap">
            <p class="title-video">
                <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
            </p>
            <p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>
        </div>
        <div class="profil-wrap">
	        <ul class="space-top">
	            <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Tous les Hashcuts</a></li>
	            <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
	        </ul>
	    </div>
    </div><!-- header -->
</div> <!-- wrap-header -->
{% endblock %}

{% block content %}
<div class="content clearfix">

    <div class="col-left">
        <div class="left-head">
            <h2>Sélectionner les vidéos</h2>
            <input type="text" name="" placeholder="Rechercher une vidéo" />
        </div>
        <ul class="list-video">

        </ul>
    </div><!-- col-left -->

    <div class="col-middle empty-mode">
        
        <div class="col-middle-header">
            <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a>
            <a href="#" class="tab tab-pvw">Prévisualiser et Publier</a>
        </div>
        
        <div class="video">
            <div class="tutorial">
                <h2>Créer un Hashcut, c’est facile !</h2>
                <ol>
                    <li>Commencez par choisir une vidéo dans le volet de gauche</li>
                    <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
                    <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
                    <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
                </ol>
            </div>
            <div class="video-wait"></div>
            <a class="publier-button disable" title="Publier" href="#"></a>
        </div>

        <div class="widget">
            <div class="Ldt-Slider-Container">
                <div class="Ldt-Slider"></div>
            </div>
            <div class="Ldt-Slider-Time">00:00</div>

            <div class="Ldt-Ctrl">
                <div class="Ldt-Ctrl-Left">
                    <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>
                    <div class="Ldt-Ctrl-spacer"></div>
                    <div class="Ldt-Ctrl-InOutBlock">
                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div>
                        <div class="Ldt-Ctrl-spacer"></div>
                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></div>
                        <div class="Ldt-Ctrl-spacer"></div>
                    </div>
                </div>
                <div class="Ldt-Ctrl-Right">
                   <div class="Ldt-Ctrl-spacer"></div>
                   <div class="Ldt-Ctrl-Time">
                       <div class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div>
                       <div class="Ldt-Ctrl-Time-Separator">/</div>
                       <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>
                   </div>
                   <div class="Ldt-Ctrl-spacer"></div>
                   <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div>
                </div>
                <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">
                   <div class="Ldt-Ctrl-Volume-Bar"></div>
                </div>
            </div>
            
        </div>

        <div class="bloc-segmentation">
            <div class="Ldt-Slice"></div>
            <div class="segmentation">
                <div class="pointer-padder">
                    <div class="pointer"></div>
                </div>
                <div class="popin-content">
                    <div class="validate">
                        <div class="validate-tooltip"></div>
                    </div>
                    <h2>
                        <span class="create-or-edit">Créer un nouveau segment</span>
                        de
                        <span class="time-tangle tangle-start"></span>
                        à
                        <span class="time-tangle tangle-end"></span>
                        (durée:
                        <span class="time-tangle tangle-duration"></span>)
                    </h2>
                    <form action="#" id="segment-form">
                        <div class="form-segment-left">
                            <p>
                                <label for="segment-title">Titre :</label>
                                <input type="text" id="segment-title" />
                            </p>
                            <p>
                                <label for="segment-tags">Tags :</label>
                                <ul id="segment-tags"></ul>
                            </p>
                        </div>
                        <div class="form-segment-right">
                            <p>
                                <label for="segment-description">Description :</label>
                                <textarea id="segment-description"></textarea>
                            </p>
                        </div>
                        <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />

                    </form>
                </div>
            </div><!-- popin segmentation -->
            
            <div class="media-segments self-media-segments">
                <h2>Mes segments sur ce média :</h2>
                <div class="media-segments-list">
                </div>
            </div>
            
            <div class="media-segments other-media-segments">
                <h2>Segments existants sur ce média :</h2>
                <div class="media-segments-list">
                </div>
            </div>

        </div><!-- bloc-segmentation -->

        <div class="bloc-pvw">

            <div class="frise mashup-frise">
                <div class="frise-overflow">
                    <div class="frise-segments">
                    </div>
                    <div class="frise-indications">
                    </div>
                </div>
                <div class="frise-position"></div>
                <div class="mashup-tooltip segment-tooltip-wrapper">
                    <div class="segment-tooltip"></div>
                    <div class="segment-tooltip-tip"></div>
                </div>
                
            </div>
                
                <div class="segment-info mashup-description">
                    <div class="pointer-padder">
                        <div class="pointer"></div>
                    </div>
                    <div class="popin-content">
                        <ul class="tools">
                            <li><a title="Éditer" class="edit" href="#"></a></li>
                        </ul>

                        <h2><span class="annotation-title"></span></h2>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Extrait de :</th>
                                    <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>
                                </tr>
                                <tr>
                                    <th>Description :</th>
                                    <td><span class="annotation-description"></span></td>
                                </tr>
                                <tr>
                                    <th>Tags :</th>
                                    <td><span class="annotation-tags"></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
        </div><!-- bloc-pvw -->

    </div><!-- col-middle -->

    <div class="col-right">
        <div class="liste-segment">
            <div class="validate critical">
                <div class="validate-tooltip"></div>
            </div>
            <h2>Liste des segments</h2>
            <div class="frise mashup-frise">
                <p class="aucun-segment">Aucun segment</p>
                <div class="frise-overflow">
                    <div class="frise-segments">
                    </div>
                    <div class="frise-indications">
                    </div>
                </div>
                <div class="mashup-tooltip segment-tooltip-wrapper">
                    <div class="segment-tooltip"></div>
                    <div class="segment-tooltip-tip"></div>
                </div>

            </div>
        </div>

        <ul class="list-video organize-segments">
            
        </ul>
    </div><!-- col-right -->

</div><!-- content -->
{% endblock %}
<!-- JavaScript -->
{% block js_import %}
{{ block.super }}
<script type="text/javascript" src="{% static 'hashcut/lib/tag-it.js' %}"></script>
<script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
<script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
<script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
<script type="text/javascript">
    IriSP.endpoints = {
        content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
        project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
        ldt: "{% url projectjson_id id='' %}",
        hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
    };
    $(function() {
   	    IriSP.video_url_transform = function(oldurl) {
   		    var newurl = oldurl.replace(/mp4:/i,'');
   		    newurl = newurl.replace(/ddc_player\//i,'');
   		    newurl = newurl.replace(/rtmp/i,'http');
   		    return newurl;
   		};
        var hashcut = IriSP.editor({
            creator: "{{creator}}",
            csrf_token: "{{csrf_token}}",
            filter: {
                tags__icontains: "BPI"
            }
       });
    });
</script>
{% endblock %}