{% load static %}
{% load thumbnail %}
{% load composer_tags %}
<div class="row">
    <div class="span3">
        <ul class="modal-menu">
            <li class="bibliotheque-link"><a data-type-media="video" data-title="Bibliothèque" class="btn open-modal" href="{% url 'composer_modal_content_library' branding=branding %}"><i class="icon-folder-open"></i> Bibliothèque</a></li>
            <li><a class="btn active" tabindex="-1" href="#"><i class="icon-plus-sign"></i> Ajouter une video</a></li>
        </ul>
    </div>
    <div class="span8 popup-content">

    <form class="row" action="{% if content %}{% url 'composer_modal_content' branding=branding iri_id=content.iri_id %}{% else %}{% url 'composer_modal_content' branding=branding %}{% endif %}" enctype="multipart/form-data" method="post">
        <h4 class="span8">Informations sur la vidéo</h4>
        <div class="span4">
            {% csrf_token %}
            <label for="id_content-title">Titre :</label>
            <input type="text" name="content-title" id="id_content-title" {% if content %}value="{{ content.title }}"{% endif %}/>
            <label for="id_content-description">Description :</label>
            <textarea name="content-description" id="id_content-description">{% if content %}{{ content.description }}{% endif %}</textarea>
            <input type="hidden" name="content-duration" id="id_content-duration" {% if content %}value="{{ content.duration }}"{% endif %}/>
            <input type="hidden" name="content-media_input_type" id="id_content-media_input_type" value="create" />
            <input type="hidden" name="content-iri_id" id="id_content-iri_id" value="{{ iri_id }}"/>
            <input type="checkbox" name="media-media_public" id="id_media-media_public" checked="checked" style="display:none" />
        </div>
        <div class="span4">
            <label for="">Durée de la vidéo :</label>
            <div class="select-duration">
                <input pattern="[0-9]*" name="" type="text" id="video-hour" class="number-spin span1" value="{% if content %}{{ content.duration|to_hours }}{% else %}0{% endif %}">
                <label for="video-hour">H</label>
                <input pattern="[0-9]*" name="" type="text" id="video-minute" class="number-spin span1" value="{% if content %}{{ content.duration|to_minutes }}{% else %}10{% endif %}">
                <label for="video-minute">M</label>
                <input pattern="[0-9]*" name="" type="text" id="video-seconde" class="number-spin span1" value="{% if content %}{{ content.duration|to_seconds }}{% else %}0{% endif %}">
                <label for="video-seconde">S</label>
            </div>
            <label for="">Vignette de la vidéo (jpg, png, 1Mo max) :</label>
            <input type="file" name="image" id="id_image" accept="image/jpeg, image/png" />
            {% if content %}
            <p>Image actuelle :</p>
            {% thumbnail content.image "x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}
            {% endif %}
        </div>
        <div class="span8">
            <h4>Source de la vidéo</h4>
            <label for="">URL de la vidéo :</label>
            <input type="text" class="input-xxlarge" placeholder="http://youtu.be" name="media-src" id="id_media-src" {% if content %}value="{{ content.media_obj.src }}"{% endif %}/>
            <div class="control-group">
                <div class="controls">
                    <a href="#" class="btn-cancel btn btn-inverse"><i class="icon-reply" data-dismiss="modal" aria-hidden="true"></i> Annuler</a>
                    <button type="submit" class="btn btn-success"><i class="icon-save"></i> Sauvegarder</button>
                </div>
            </div>
        </div>
    </form>
    </div>
</div>
<script type="text/javascript">
$('.select-duration .number-spin').spin({
    imageBasePath :"{% static 'metadatacomposer/lib/spin/img/' %}",
    max:60,
    min:0
});
// Update time input in milliseconds
$('.select-duration .number-spin').change(function(){
    $("#id_content-duration").val( (parseInt($("#video-hour").val()) * 3600000) + (parseInt($("#video-minute").val()) * 60000) + (parseInt($("#video-seconde").val()) * 1000) );
    console.log($("#id_content-duration").val());
});
</script>