{% extends "mashup_home.html" %}
{% load static %}
{% load i18n %}
{% load analytics %}
{% load thumbnail %}
    {% block title %}{% blocktrans with title=content.title %}Playing video {{title}}{% endblocktrans %}{% endblock %}   
    {% block css_page %}
    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/players.css" />
    {% endblock %}
    
    {% block js_import %}
    {{block.super}}
    <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='__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;
            };
            IriSP.mediaplayer({
                id: "{{ctt_id}}"
            });
        });
    </script>
    {% endblock %}

{% block wrap_header %}
<div class="wrap-header">  
    <div class="header">
        {% include 'partial/mashup_popin_user.html' %}
        {% include 'partial/hashcut_logo.html' %}
        <div class="title-video-wrap">
            <p class="title-video" href="#">
                <span class="category">{% trans "Video" %}</span>
                <span class="separator">&raquo;</span>
                {{content.title}}
            </p>
        </div>
        <div class="Ldt-Social"></div>
        <div class="profil-wrap">
            <ul>
                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">{% trans "Home" %}</a></li>
                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">{% trans "New hashcut" %}</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="left-content">
        <div class="bloc-video">
            <div class="video">
                <div class="video-wait"></div>
            </div>
            <div class="widget">
            <div class="Ldt-Slider-Container">
                <div class="Ldt-Slider"></div>
            </div>
            <div class="Ldt-Slider-Time"></div>

            <div class="Ldt-Ctrl">
                <div class="Ldt-Ctrl-Left">
                    <div title="{% trans 'Play/Pause' %}" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div>
                    <div class="Ldt-Ctrl-spacer"></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="media-segments"></div>
        </div><!-- bloc-video -->
    </div><!-- left-content -->
    
    <div class="right-content">
        <h2>{% trans 'More informations' %}</h2>
        <div class="more-info-wrap">
            <table class="more-info ">
                <tbody>
                    <tr class="info-title">
                        <th>{% trans 'Title:' %}</th>
                        <td><a href="#">{{content.title}}</a></td>
                    </tr>
                    <tr class="info-duration">
                        <th>{% trans 'Duration:' %}</th>
                        <td></td>
                    </tr>
                    <tr class="info-description">
                        <th>{% trans 'Description:' %}</th>
                        <td></td>
                    </tr>
                    <tr class="info-tags">
                        <th>{% trans 'Tags:' %}</th>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
        </ul>
        <h2>{% trans 'Hashcuts using this video' %}</h2>
        <ul class="list-video">
            
        </ul>
    </div><!-- right-content -->
</div><!-- content -->
{% endblock %}