{% extends "ldt/ldt_utils/workspace_base.html" %}
{% load i18n %}
{% load front_tags %}
{% load absurl %}
{% load static %}
{% load absstatic %}
{% load analytics %}
    {% block js_import %}
        {{ block.super }}
        <script type="text/javascript" src='{% static "ldt/js/jquery.min.js" %}'></script>
        <script type="text/javascript" src='{% static "ldt/js/jscolor/jscolor.js" %}'></script>
        {{ content_form.media.js }}
    {% endblock %}
        
    {% block js_declaration %}
        <script type="text/javascript">
            var $j = jQuery.noConflict();
            var iframe_url='{{iframe_url}}';
            var external_url='{{external_url}}';
            var polemic='{{polemic}}';
            var show_mic_record='{{show_mic_record}}';
            var annotations_list='{{annotations_list}}';
            var player_id='{{player_id}}';
            var translate_show="{% trans 'Show Player' %}";
            var translate_hide="{% trans 'Hide Player' %}";
            var LANGUAGE_CODE='{{LANGUAGE_CODE}}';
            var json_url='{{json_url}}';
            var json_url_concatenate='{{json_url_concatenate}}';
            var player_id='{{player_id}}';
            var defaultDir='{% absstatic "ldt/js/" %}';
            var jwPlayerSWF='{% absstatic "ldt/swf/player.swf" %}';
            var recordMicSwf='{% absstatic "ldt/swf/record_mic.swf" %}';
            var zeroClipboardSwf='{% absstatic "ldt/swf/ZeroClipboard10.swf" %}';
            var cssjQueryUI='{% absstatic "ldt/css/jq-css/themes/base/jquery-ui.css" %}';
            var widgetsDir='{% absstatic "ldt/metadataplayer" %}';
            var configCss='{% absstatic "ldt/metadataplayer/LdtPlayer-core.css" %}';
            var default_thumbnail='{% static "ldt/css/imgs/video_sequence.png" %}';
            var segment_api="{% absurl 'segment_api_empty' resource_name='segments' api_name='1.0' %}{% templatetag openvariable %}media{% templatetag closevariable %}/{% templatetag openvariable %}begin{% templatetag closevariable %}/{% templatetag openvariable %}end{% templatetag closevariable %}";
            var annotation_api = "{% absurl 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}";
            var LdtPlayer_core='{% absstatic "ldt/metadataplayer/LdtPlayer-core.js" %}';
            var creator_name='{{request.user.username}}';
            
            $j(document).ready(function(){
                init_events();
            });
            
        </script>
    {% endblock %}
    {% block css_import %}
        {{ block.super }}
        {{ content_form.media.css }}
        <link rel="stylesheet" href='{% static "ldt/css/style.css" %}' />
        <link rel="stylesheet" href='{% static "ldt/css/workspace.css" %}'/>
        <link rel="stylesheet" href='{% static "ldt/css/embed_popup.css" %}'/>
        <link rel="stylesheet" href='{% static "ldt/css/jq-css/jquery.qtip.css" %}' type="text/css"/>
        <link rel="stylesheet" href='{% static "ldt/metadataplayer/LdtPlayer-core.css" %}' type="text/css"/>
        
    {% endblock %}
        

    {% block content %}
        <div id='ldt_id'>
          <p>{% trans 'Share the project' %} : <span class="large_text">{{ project.title }}</span></p>
          <p class="margin0">{% trans "List of the project's contents" %}:<br/>
             <ul>
             {% for c in contents %}
              <li>{{ c.title }} - <span class="middle_text">{% trans 'Link to the Metadata Player' %} : <a href="{% url 'ldt.ldt_utils.views.front.annot_content' c.iri_id ldt_id %}" target="_blank">{% trans 'See' %}</a> - </span><span class="click_to_select">{% trans 'Select' %}</span> : <input id="" class="copy_input" value="{% absurl 'ldt.ldt_utils.views.front.annot_content' c.iri_id ldt_id %}"/></li>
             {% endfor %}
            </ul>
          </p>
          <div>{% trans 'project id' %} <span id="project_id_select" class="click_to_select">({% trans 'Select' %})</span> : <input id="project_id_input" class="copy_input" value="{{ldt_id}}"/></div>
          <div>{% trans 'The project in Lignes de Temps' %} : <span class="middle_text"><a href="{% url 'index_project_full' ldt_id %}" target="_blank">{% trans 'See' %}</a> - </span><span class="click_to_select">{% trans 'Select' %}</span> : <input id="" class="copy_input" value="{% absurl 'index_project_full' ldt_id %}"/></div>
        </div>
        <br>
        <div id="button_row">
            <div id="display_select">
                <input id="player_button" type="button" class="code_button" value="{% trans 'popup_player'%}"/>
                <input id="ldt_iframe_button" type="button" class="code_button" value="{% trans 'popup_ldt_iframe' %}"/>
                <input id="seo_body_button" type="button" class="code_button" value="{% trans 'popup_seo_body' %}"/>
                <input id="seo_meta_button" type="button" class="code_button" value="{% trans 'popup_seo_meta' %}"/>
                <input id="links_button" type="button" class="code_button" value="{% trans 'popup_links' %}"/>
            </div>
        </div>
        
        
        <div style="float: left;">
            <div id="links_code" class="ldt_player_code">{% include "ldt/ldt_utils/partial/embed_links.html" %}</div>
            <div id="ldt_iframe_code">
                <textarea id="ldt_iframe_id_code" readonly="readonly" class="ldt_player_code" >{% autoescape off %}<iframe src="{% absurl 'embed_ldt' ldt_id %}" width='1005' height='635' seamless='seamless'></iframe>{% endautoescape %}</textarea>
            </div>
            <div id="seo_body_code">
                <textarea id="seo_body_id_code" readonly="readonly" class="ldt_player_code" >{{ embed_rendered.seo_body }}</textarea>
            </div>
            <div id="seo_meta_code">
                <textarea id="seo_meta_id_code" readonly="readonly" class="ldt_player_code">{{ embed_rendered.seo_meta }}</textarea>
            </div>
            
            <div  id="player_code">
                <div class="configuration">
                    <br>
                        <div id="embed_options_wrapper">
                            <div id="refresh_button_div">
                                <button type="button" class="refresh_button" id="refresh_player_button" title="Rafraichir le player" >
                                    <img src='{% static "ldt/img/arrow_refresh.png" %}' id="refresh_player" ></img>
                                </button>
                            </div>
                            <div id="embed_options"><br> {% trans 'Integration mode' %} 
                                <input type="radio" id="type_embed_div" name="player_code_type" value="div" checked onClick="div_event()" > {% trans 'div' %} </input>
                                <input type="radio" id="type_embed_iframe" name="player_code_type" value="iframe" onClick="iframe_event()">  {% trans 'iframe' %} </input><br>
                            </div>
                        </div>
                        <div id="player_size">
                            {% trans 'Player Size : ' %}
                            <input type="text" class="number_area" id="player_width" onChange="put_new_code();"></input> x 
                            <input type="text" class="number_area" id="player_height" onChange="put_new_code();"></input>
                        </div>
                        <a id="displayPreMode" class="OptionsEmbedDisplay">
                            <span id= "preModeExpArrow" class="expArrow"></span>
                            <span id= "preModeCollArrow" class="collArrow"></span>
                            <span class="title">{% trans 'Preset Modes' %}</span>
                        </a><br>
                            <div id="iframe_div_premode" class="embedPersonnalisation">
                                <input type="radio" id="mode_1" name="embed_mode" value="mode1" checked onClick="mode1()" > {% trans 'Basic configuration' %} </input><br>
                                <input type="radio" id="mode_2" name="embed_mode" value="mode2" onClick="mode2()">  {% trans 'Polemic configuration' %} </input><br>
                                <input type="radio" id="mode_3" name="embed_mode" value="mode3" onClick="mode3()">  {% trans 'Polemic configuration with tagcloud, annotationsList and Social widgets' %} </input><br>
                                <br>
                            </div>
    
                        <a id="displayEmbedOptions" class="OptionsEmbedDisplay">
                            <span id= "optionsExpArrow" class="expArrow"></span>
                            <span id= "optionsCollArrow" class="collArrow"></span>
                            <span class="title">{% trans 'Create your own configuration' %}</span>
                        </a><br>
                            <div id="embed_personnalisation" class="embedPersonnalisation">
                                {% block embed_widget_config %}
                                {% endblock embed_widget_config %}
                            </div>
                    <textarea id="player_id_code" readonly="readonly" class="ldt_player_code"></textarea>
                </div>
            </div>
            <a id="displayPlayer" href="javascript:toggle();">{% trans 'Show Player' %}</a>
        </div>
        <div id="player_div" style="display:none">
            <div class="ldt_player" id="wrapper_{{player_id}}"></div>
        </div>
    {% endblock %}
    {% analytics %}