{% set selectionLength = records|length %}
{% set isVideo = 'false' %}

{% if selectionLength == 1 %}
    {% for record in records %}
        {% set subdefs = record.get_subdefs() %}
        {% if record.get_type() == 'video' %}
            {% set isVideo = 'true' %}
        {% endif %}
    {% endfor %}
{% endif %}

{% set overlapChapters = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'overlapChapters') %}

<div id='prod-tool-box' class="PNB10 video-edit">

    {# jquery Tabs #}
    <div id="tool-tabs" class="tabs PNB">
        {# jquery menu #}
        <div>
            <ul>
                <li>
                    <a href="#thumbExtractor">
                        {{ "video tool" | trans }}
                    </a>
                </li>
                <li>
                    <a href="#rangeExtractor">
                        {{ "video range extractor" | trans }}
                    </a>
                </li>
            </ul>
        </div>

        {% if selectionLength == 1 %}
            {% for record in records %}
                {% if record.get_type() == 'video' %}
                    <div id="thumbExtractor">

                        <div id="thumbExtractor-preview">
                            <div class="frame_video">
                                {% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
                                {% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
                                {% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
                                {% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}

                                {% set technical_info = record.get_technical_infos %}

                                {#Set the preview Ratio #}
                                {% set width = technical_info[dataW].value %}
                                {% set height = technical_info[dataH].value %}
                                {% set prevRatio = '' %}

                                {% if width and height %}
                                    {% set ratio =  (width / height)|number_format(2, '.') %}
                                {% endif %}

                                {#Set the document Ratio #}
                                {% for subdef in previewHtml5 %}

                                    {% set width = subdef.get_width()  %}
                                    {% set height = subdef.get_height() %}

                                    {% if width and height %}
                                        {% if subdef.get_name()=='preview' %}
                                            {% set prevRatio =  (width / height)|number_format(2, '.') %}
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}
                                <video id="thumb_video" controls="" preload="auto" data-ratio="{{ prevRatio }}">
                                    {% for subdef in previewHtml5 %}
                                        <source type="{{ subdef.get_mime() }}" src="{{ subdef.get_url() }}"/>
                                    {% endfor %}
                                    {{ 'No preview available' | trans }}
                                </video>

                            </div>

                            <div id="thumb_camera_button"></div>

                            <div class="vertical-divider"></div>

                            <div class="video-data-container">
                                <dl class="dl-horizontal">
                                    <dt>Ratio</dt>
                                    <dd>{{ ratio }}</dd>
                                    <dt>Type</dt>
                                    <dd>{{ record.get_mime() }}</dd>
                                    {% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
                                        <dt>{{ 'Images par secondes' | trans }}</dt>
                                        <dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }}ips
                                        </dd>
                                    {% endif %}
                                    {% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
                                        <dt>{{ 'Codec Audio' | trans }}</dt>
                                        <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
                                    {% endif %}
                                    <dt>{{ 'Size' | trans }}</dt>
                                    <dd>{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default
                                        (null) %}
                                        {% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %}
                                        {% if width is not none and height is not none %}
                                            {{ width ~ " x " ~ height }}
                                        {% endif %}</dd>
                                </dl>
                            </div>

                        </div>
                        <div class="horizontal-divider"></div>
                        <div id="thumbExtractor-screenshot">
                            <p id='thumb_info'>{{ "screenshot video" | trans }}</p>

                            <div id="frame">
                                <div class="frame_canva">
                                    <div id="thumb_delete_button"/>
                                    <div id="thumb_download_button"/>
                                    <div class="canvas-wrap">
                                        <canvas id="thumb_canvas"></canvas>
                                    </div>
                                    <div id="alt_canvas_container"
                                         style="position:absolute;overflow:hidden;top:-1200px;visibility: hidden; width:0!important;height:0!important">
                                        {% for subdef in outputFormats %}
                                            <canvas data-width="{{ subdef.get_width() }}"
                                                    data-height="{{ subdef.get_height() }}"
                                                    data-name="{{ subdef.get_name() }}"
                                                    class="alt_canvas" id="{{ subdef.get_name() }}" ></canvas>
                                        {% endfor %}
                                    </div>

                                </div>
                            </div>

                            <div id="grid">
                            </div>

                            {#<div id="thumb_slider">#}
                            {#<div id="thumb_wrapper">#}
                            {#</div>#}
                            {#</div>#}
                            <div class="thumb_submit_action">
                                <input type="hidden" value='{{ record.get_sbas_id() }}' name='sbas_id'>
                                <input type="hidden" value='{{ record.get_record_id() }}' name='record_id'>
                                <button id="thumb_validate_button" class="btn btn-inverse"
                                        type="button">{{ "validate" | trans }}</button>

                            </div>

                        </div>

                    </div>
                    <div id="rangeExtractor" class="">
                        <div class="video-range-editor-container"></div>
                    </div>
                {% endif %}
            {% endfor %}
        {% endif %}
    </div>

    {# hidden iframe to handle upload #}
    <iframe
            id="uploadHdsub"
            name="uploadHdsub"
            height="0"
            width="0"
            border="0"
    >
    </iframe>
</div>

<script type="text/javascript">
    var toolsConfig = {
        selectionLength: {{ selectionLength }},
        isVideo: '{{ isVideo }}',
        databaseId: {% if selectionLength == 1 %}{{ record.get_base_id }}{% else %}0{% endif %},
        databoxId: {% if selectionLength == 1 %}{{ record.get_sbas_id() }}{% else %}0{% endif %},
        recordId: {% if selectionLength == 1 %}{{ record.get_record_id }}{% else %}0{% endif %},
        translations: {
            alertTitle: '{{ "alert" | trans }}',
            noImgSelected: '{{ "no image selected" | trans }}',
            processing: '{{ "processing" | trans }}',
            thumbnailTitle: '{{ 'thumbnail validation' | trans }}',
            updateTitle: '{{ 'Successful update' | trans }}'
        },
        T_fields: {{ JSonFields|raw }},
        videoEditorConfig: {% if videoEditorConfig is not null %}{{ videoEditorConfig|json_encode()|raw }}{% else %}{}{% endif %},
        records: [

            {% for record in records %}
            {
                id: {{ record.get_record_id }},
                type: "{{ record.get_type() }}",
                {% if record.get_type() == 'video' %}
                {% if selectionLength == 1 %}
                {% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
                {% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
                {% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
                {% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}

                {% set technical_info = record.get_technical_infos %}
                {% set width = technical_info[dataW].value %}
                {% set height = technical_info[dataH].value %}

                {% if width and height %}
                {% set ratio = (width / height)|number_format(2, '.') %}
                {% else %}
                {% set ratio = '' %}
                {% endif %}

                sources: [
                    {% for subdef in previewHtml5 %}
                    {
                        ratio: '{{ ratio }}',
                        framerate: {{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }},
                        type: "{{ subdef.get_mime() }}",
                        src: "{{ subdef.get_url() }}"
                    }{% if not loop.last %},{% endif %}
                    {% endfor %}
                ]
                {% endif %}
                {% endif %}
            }{% if not loop.last %},{% endif %}
            {% endfor %}
        ],
        preferences: {
            overlapChapters: {% if overlapChapters != NULL %}{{ overlapChapters }}{% else %}0{% endif %},
        }

    };
</script>
