{% extends "mashup_home.html" %}
{% load static %}
{% load i18n %}
{% load analytics %}
{% load thumbnail %}
    {% block title %}{% trans "Hashcut editor" %}{% endblock %}
    {% block css_page %}
    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery.tagit.css' %}" />
    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/edition.css" />
    {% endblock %}

    {% 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/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' %}",
            project: "{% url 'mashup_save' branding=branding %}",
            segment: "{% url 'api_dispatch_list' api_name='1.0' resource_name='segments' %}",
            ldt: "{% url 'projectjson_id' id='__PROJECT_ID__' %}",
            hashcut_page: "{% url 'mashup_hashcut' branding=branding ldt_id='__PROJECT_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: "{{user.username}}",
                csrf_token: "{{csrf_token}}",
                filter: {
                    tags__icontains: "{{branding}}"
                }
           });
           $(".change-account").remove();
        });
    </script>
    {% endblock %}

{% block wrap_header %}
<div class="wrap-header"> 
    <div class="header">
    {% include 'partial/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">{% trans "Title:" %}</label>
                        <input type="text" id="hashcut-title" name="" value="{% trans 'Untitled Hashcut' %}" />
                    </p>
                    <p>
                        <label for="hashcut-description">{% trans "Description:" %}</label>
                        <textarea name="" id="hashcut-description"></textarea>
                    </p>
                </form>
            </div>
        </div>
    <!-- /popin update-title -->
        
    {% include 'partial/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">{% trans "Untitled Hashcut" %}</a>
            </p>
            <p class="time-length">{% trans "Duration:" %} <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">{% trans "Home" %}</a></li>
	            <li><a href="#user" class="my-profil open-popin">{% trans "My profile" %}</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>{% trans "Select videos" %}</h2>
            <input type="text" name="" placeholder="{% trans 'Search videos' %}" />
        </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">{% trans "Segment" %} <span class="tab-media-title"></span></a>
            <a href="#" class="tab tab-pvw">{% trans "Preview and publish" %}</a>
        </div>
        
        <div class="video">
            <div class="tutorial">
                <h2>{% trans "Creating a hashcut is easy!" %}</h2>
                <ol>
                    <li>{% trans "Start by selecting a video in the left hand column." %}</li>
                    <li>{% trans "Create a segment in your video and annotate it." %}</li>
                    <li>{% trans "Append your segment to the hashcut and reorder the segments" %}</li>
                    <li>{% trans "Add a few comments to your hashcut. You are ready to publish!" %}</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="{% trans 'Play/Pause' %}"></div>
                    <div class="Ldt-Ctrl-spacer"></div>
                    <div class="Ldt-Ctrl-InOutBlock">
                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="{% trans 'Begin segment here' %}"></div>
                        <div class="Ldt-Ctrl-spacer"></div>
                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="{% trans 'End segment here' %}"></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="{% trans 'Elapsed time' %}">00:00</div>
                       <div class="Ldt-Ctrl-Time-Separator">/</div>
                       <div class="Ldt-Ctrl-Time-Total" title="{% trans 'Total time' %}">00:00</div>
                   </div>
                   <div class="Ldt-Ctrl-spacer"></div>
                   <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="{% trans 'Mute/Unmute' %}"></div>
                </div>
                <div class="Ldt-Ctrl-Volume-Control" title="{% trans 'Set 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">{% trans 'Create a new segment' %}</span>
                        {% trans 'from' %}
                        <span class="time-tangle tangle-start"></span>
                        {% trans 'to' %}
                        <span class="time-tangle tangle-end"></span>
                        ({% trans 'duration:' %}
                        <span class="time-tangle tangle-duration"></span>)
                    </h2>
                    <form action="#" id="segment-form">
                        <div class="form-segment-left">
                            <p>
                                <label for="segment-title">{% trans 'Title:' %}</label>
                                <input type="text" id="segment-title" />
                            </p>
                            <p>
                                <label for="segment-tags">{% trans 'Tags:' %}</label>
                                <ul id="segment-tags"></ul>
                            </p>
                        </div>
                        <div class="form-segment-right">
                            <p>
                                <label for="segment-description">{% trans 'Description:' %}</label>
                                <textarea id="segment-description"></textarea>
                            </p>
                        </div>
                        <input class="button add-segment" type="submit" value="{% trans 'Add to hashcut' %}" />

                    </form>
                </div>
            </div><!-- popin segmentation -->
            
            <div class="media-segments self-media-segments">
                <h2>{% trans 'My segments on this media:' %}</h2>
                <div class="media-segments-list">
                </div>
            </div>
            
            <div class="media-segments other-media-segments">
                <h2>{% trans 'Existing segments on this media:' %}</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>{% trans 'Excerpt from:' %}</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>{% trans 'Description:' %}</th>
                                    <td><span class="annotation-description"></span></td>
                                </tr>
                                <tr>
                                    <th>{% trans '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>{% trans 'Segment list' %}</h2>
            <div class="frise mashup-frise">
                <p class="aucun-segment">{% trans 'No 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 %}