<%! from django.utils.translation import ugettext as _ %>

% if display_name is not UNDEFINED and display_name is not None:
    <h2>${display_name}</h2>
% endif

<div
    id="video_${id}"
    class="videoalpha"

    % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
        data-streams="${youtube_streams}"
    % endif

    ${'data-sub="{}"'.format(sub) if sub else ''}
    ${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}

    % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
        ${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
        ${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
        ${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
    % endif

    data-caption-data-dir="${data_dir}"
    data-show-captions="${show_captions}"
    data-start="${start}"
    data-end="${end}"
    data-caption-asset-path="${caption_asset_path}"
    data-autoplay="${autoplay}"
>
    <div class="tc-wrapper">
        <article class="video-wrapper">
            <div class="video-player-pre"></div>

            <section class="video-player">
                <div id="${id}"></div>
            </section>

            <div class="video-player-post"></div>

            <section class="video-controls">
                <div class="slider" tabindex="0" title="Video position"></div>

                <div>
                    <ul class="vcr">
                        <li><a class="video_control" href="#" tabindex="0" title="${_('Play')}"></a></li>
                        <li><div class="vidtime">0:00 / 0:00</div></li>
                    </ul>
                    <div class="secondary-controls">
                        <div class="speeds">
                            <a href="#" tabindex="0" title="Speeds">
                                <h3 tabindex="-1">${_('Speed')}</h3>
                                <p tabindex="-1" class="active"></p>
                            </a>
                            <ol tabindex="-1" class="video_speeds"></ol>
                        </div>
                        <div class="volume">
                            <a href="#" tabindex="0" title="Volume"></a>
                            <div tabindex="-1" class="volume-slider-container">
                                <div tabindex="-1" class="volume-slider"></div>
                            </div>
                        </div>
                        <a href="#" class="add-fullscreen" tabindex="0" title="${_('Fill browser')}">${_('Fill browser')}</a>
                        <a href="#" class="quality_control" tabindex="0" title="${_('HD')}">${_('HD')}</a>

                        <a href="#" class="hide-subtitles" title="${_('Turn off captions')}">${_('Captions')}</a>
                    </div>
                </div>
            </section>
        </article>

        <ol class="subtitles" tabindex="0" title="Captions"><li></li></ol>
    </div>
</div>

% if sources.get('main'):
    <div class="video-sources">
        <p>${(_('Download video') + ' <a href="%s">' + _('here') + '</a>.') % sources.get('main')}</p>
    </div>
% endif

% if track:
    <div class="video-tracks">
        <p>${(_('Download subtitles') + ' <a href="%s">' + _('here') + '</a>.') % track}</p>
    </div>
% endif
