{% extends "theend/home.html" %}
{% load static %}

{% block title_page_specific %}Mot-clé "{{tag}}"{% endblock %}

{% block body_class %}player{% endblock %}

{% block js_declare %}
        <script type="text/javascript" src="{% static 'theend/js/init.js' %}"></script>
        <script type="text/javascript" src="{% static 'theend/js/model.js' %}"></script>
        <script type="text/javascript" src="{% static 'theend/js/ldt-serializer.js' %}"></script>
        <script type="text/javascript" src="{% static 'theend/js/ldt-annotate.js' %}"></script>
        
    {% block js_page_specific %}
        <script type="text/javascript" src="{% static 'theend/js/tagplayer.js' %}"></script>
        <script type="text/javascript">
            IriSP.endpoints = {
                mashup_by_tag : "{% url ldt.ldt_utils.views.json.mashup_by_tag %}",
                annotations_by_timecode : "{% url segment_api resource_name='segments' api_name='1.0' iri_id='__CONTENT_ID__' begin='__BEGIN__' end='__END__' %}",
                post_annotation : "{% url api_dispatch_list resource_name='annotations' api_name='1.0' %}",
                tag_page : "{% url level2_tag tag='__TAG__' %}"
            };
            $(function() {
                IriSP.tagplayer({
                    tag : "{{tag}}"
                });
            });
        </script>
    {% endblock %}

{% endblock %}

{% block main_content %}
        <header>
            <div id="title_vp">
                <a href="{% url level2_home %}" class= "link_prev link_img">
                    <img alt="Retour" src="{% static 'theend/img/retour.png' %}" />
                </a>
                <h1>{% block h1 %}{{tag}}{% endblock %}</h1>
            </div>
        </header>

        <section>

            <div id="title_sequence" class="float_sequence">
                <ul></ul>
            </div>

            <!-- Video -->
            <div class="video_wrap">
                <div id="video_sequence">
                    <div class="video-wait"></div>
                </div>
            </div>
            <!-- /Video -->

            <div id="tag_container">

                <form id="form_tag">
                    <input type="text" name="tag" placeholder="Entrez vos mots-clés ici" />
                    <input type="submit" value="OK" />
                </form>

                <div id="tag_sequence" class="float_sequence">
                    <ul></ul>
                </div>

            </div>
        </section>

        <!-- Controls container -->
        <footer id="controlContainer">
            <section id="controlbar">
                <a id="btnInfo" class="btn" href="#" title="Mode d’emploi"></a>

                <div class="sdhdgroup">
                    <a id="btnSD" class="sdhdbtn" href="#" title="SD"></a>
                    <div class="sdhdbtn sdhdsep"></div>
                    <a id="btnHD" class="sdhdbtn" href="#" title="HD"></a>
                </div>

                <div id="progressContainer">
                    <div id="progressBar"></div>
                    <ul id="progressTime">
                        <li id="current" class="floatL">
                            00:00
                        </li>
                        <li id="duration" class="floatR">
                            00:00
                        </li>
                    </ul>
                </div>
    
    {% block prev_button %}
                <a id="btnBck" class="btn txt_hidden" href="#" title="Segment précédent"></a>
    {% endblock %}

                <a id="btnPlayPause" class="btn txt_hidden" href="#" title="Lecture/Pause"></a>
                
    {% block next_button %}
                <a id="btnFwd" class="btn txt_hidden" href="#" title="Segment suivant"></a>
    {% endblock %}
    
                <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition-the-end-etc.html" title="Retour au menu principal"></a>
            </section>
            <!-- /Controlbar container -->
        </footer>
{% endblock %}