{% extends "telemeta/mediaitem_detail.html" %}
{% load i18n %}
{% load telemeta_tags %}
{% load bootstrap3 %}

{% block title %}
<img src="{{ STATIC_URL }}telemeta/images/item.png" style="vertical-align:middle" /> Item : {{ item }}
{% endblock %}

{% block title_buttons %}
<div class="fixedWidthAsPlayer">
    <img id="wait-img" style="display:none" style="vertical-align:middle" alt="wait" src="{{ STATIC_URL }}telemeta/images/wait.gif" />
    {% block cancel %}
    <a id="cancel" href="{% url "telemeta-item-detail" item.public_id %}">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-remove"></span> {% trans "Cancel" %}
      </button>
    </a>
    {% endblock %}
    {% if perms.telemeta.change_mediaitem %}
    <a id="save" href="#" onclick="var d=document; d.getElementById('wait-img').style.display='inline'; $('#_editForm').submit();">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-floppy-disk"></span> {% trans "Save" %}
      </button>
    </a>
    {% endif %}
</div>
{% endblock %}

    {% block player %}

    {% if access == 'full' or perms.telemeta.can_play_all_items %}
    <div id="player_maximized" class="ts-skin-lab">
       <div id="player_header">
        <a href="#" class="toggle">Minimize</a>
        <a href="#" class="embed_player_frame">&lt;/&gt;</a>
       </div>
        <div class="wazing"></div>
    </div>
    <div id="rightcol">
        <div id="player_minimized" class="ts-skin-lab">
            <a href="#" class="toggle">Maximize</a>
            <a href="#" class="embed_player_frame">&lt;/&gt;</a>
            <div class="wazing"></div>
            <div id="player" class="ts-player">
            </div>
        </div>

    {% if "video" in mime_type %}
    <div>
    <video id="my_video_1" class="video-js vjs-default-skin" width="362" height="240" controls preload="auto" data-setup="{}">
        <!-- Hello Chrome and Firefox (and Opera?) -->
        <source src="{% url "telemeta-item-export" item.public_id mime_type|mime_to_ext %}" type="{{ mime_type }}" />
        </video>
        <!--<div id="videotime"></div>-->
    </div>
    <script>
    (function(){
        var v = document.getElementsByTagName('video')[0]
        var t = document.getElementById('videotime');
        v.addEventListener('timeupdate',function(event){
            t.innerHTML = v.currentTime;
            },false);
            })();
    </script>
    {% endif %}

    </div>

    {% else %}

    <div id="rightcol">
        <div id="no-sound-access">
            {% trans "You don't have access to the media of this item." %} {% trans "Please contact the administrators to get more rights." %} <a href="{% url "telemeta-flatpage" 'legal_notices' %}" target="_blank">{% trans "Click here" %}</a>
        </div>
    </div>

    {% endif %}

    {% endblock player %}

{% block infos %}
  <div>
    <form id="_editForm" method="post" action="" enctype="multipart/form-data" data-ajax="false">{% csrf_token %}

    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#general" role="tab" data-toggle="tab">{% trans "General" %}</a></li>
      <li><a href="#keyword_relations" role="tab" data-toggle="tab">{% trans "Keywords" %}</a></li>
      <li><a href="#performances" role="tab" data-toggle="tab">{% trans "Performance" %}</a></li>
      <li><a href="#tabs_container" role="tab" data-toggle="tab">{% trans "Markers" %}</a></li>
      <li><a href="#related" role="tab" data-toggle="tab">{% trans "Related media" %}</a></li>
      {% if perms.telemeta.change_mediaitemidentifier %}
      <li><a href="#identifiers" role="tab" data-toggle="tab">{% trans "Identifier" %}</a></li>
      {% endif %}
 <!-- <li><a href="#format" role="tab" data-toggle="tab">{% trans "Format" %}</a></li> -->
    </ul>

    <div class="tab-content">

      <div class="tab-pane fade in active" id="general">
        <script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
        <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
        <script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
        {{ form.media }}
        <div class="block-grey">
        {% bootstrap_form form %}
        {% trans "Collection access status" %} : {% trans item.collection.public_access %}<br />
        {% trans "Context access status" %} : {% trans access %}<br />
        </div>
      </div>

      {% for formset in inlines %}
      <div class="tab-pane" id="{{ formset.prefix }}">
          {{ formset.management_form }}
          {% for form in formset %}
           <div class="block-grey">
           {% bootstrap_form form %}
           </div>
          {% endfor %}
      </div>
      {% endfor %}

        <div class="tab-pane" id="tabs_container">
            <!-- this div will be hidden when everything is fully loaded-->
            <span id="loading_span" href="#"><img style="vertical-align:middle" alt="wait" src="{{ STATIC_URL }}telemeta/images/wait.gif" />&nbsp;
                <span id="loading_span_text">Loading...</span></span>
            <a id="tab_analysis" style="display:none" class ="tab" href="#">{% trans "File" %}</a><!--
             do not let space here as it appears in the document!!!!!
            --><a id="tab_markers" style="display:none" class="tab" href="#">{% trans "Markers" %}</a>

          <div class="markers" id="markers_div_id"></div>

          <div class="analyzer" id="analyzer_div_id">
            <table width="100%">
                <tr class="analyzer-title">
                    <td>{% trans "Property" %}</td>
                    <td>{% trans "Value" %}</td>
                    <td>{% trans "Unit" %}</td>
                </tr>
            </table>

          </div>
        </div>
    </div>

    <div align="center" style="margin-top:3ex;">
     {% block cancel2 %}
     <a id="cancel" href="{% url "telemeta-item-detail" item.public_id %}">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-remove"></span> {% trans "Cancel" %}
      </button>
     </a>
     {% endblock %}
     {% if perms.telemeta.change_mediaitem %}
     <a id="save" href="#" onclick="var d=document; d.getElementById('wait-img').style.display='inline'; $('#_editForm').submit();">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-floppy-disk"></span> {% trans "Save" %}
      </button>
     </a>
     {% endif %}
    </div>

   </form>
  </div>

{% endblock infos %}

{% block related %}
{% endblock %}

{% block dublincore %}
{% endblock dublincore %}

{% block delete %}
{% endblock %}
