<%inherit file="base.html" />
<%!
  import json
  from django.core.serializers.json import DjangoJSONEncoder
  from django.utils.translation import ugettext as _
%>
<%block name="title">${_("Video Uploads")}</%block>
<%block name="bodyclass">is-signedin course view-uploads view-video-uploads</%block>

<%namespace name='static' file='static_content.html'/>

<%block name="header_extras">
% for template_name in ["active-video-upload-list", "active-video-upload", "previous-video-upload-list", "previous-video-upload"]:
<script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
</script>
% endfor
</%block>

<%block name="requirejs">
    require(["js/factories/videos_index"], function (VideosIndexFactory) {
        "use strict";
        var $contentWrapper = $(".content-primary");
        VideosIndexFactory(
            $contentWrapper,
            "${post_url}",
            ${concurrent_upload_limit},
            $(".nav-actions .upload-button"),
            $contentWrapper.data("previous-uploads")
        );
    });
</%block>

<%block name="content">

<div class="wrapper-mast wrapper">
    <header class="mast has-actions has-subtitle">
        <h1 class="page-header">
            <small class="subtitle">${_("Content")}</small>
            <span class="sr">&gt; </span>${_("Video Uploads")}
        </h1>

        <nav class="nav-actions">
            <h3 class="sr">${_("Page Actions")}</h3>
            <ul>
                <li class="nav-item">
                    <a href="#" class="button upload-button new-button"><i class="icon-plus"></i> ${_("Upload New File")}</a>
                </li>
            </ul>
        </nav>
    </header>
</div>

<div class="wrapper-content wrapper">
    <section class="content">
        <article class="content-primary" role="main" data-previous-uploads="${json.dumps(previous_uploads, cls=DjangoJSONEncoder) | h}"></article>

        <aside class="content-supplementary" role="complementary">
            <div class="bit">
                <h3 class="title-3">${_("Why upload video files?")}</h3>
                <p>${_("For a video to play on different devices, it needs to be available in multiple formats. After you upload an original video file in .mp4 or .mov format on this page, an automated process creates those additional formats and stores them for you.")}</p>
                <h3 class="title-3">${_("Monitoring files as they upload")}</h3>
                <p>${_("Each video file that you upload needs to reach the video processing servers successfully before additional work can begin. You can monitor the progress of files as they upload, and try again if the upload fails.")}</p>
                <h3 class="title-3">${_("Managing uploaded files")}</h3>
                <p>${_("After a file uploads successfully, automated processing begins. After automated processing begins for a file it is listed under Previous Uploads as {em_start}In Progress{em_end}. When the status is {em_start}Complete{em_end}, edX assigns a unique video ID to the video file and you can add it to your course. If something goes wrong, the {em_start}Failed{em_end} status message appears. Check for problems in the file and upload a replacement.").format(em_start='<strong>', em_end="</strong>")}</p>
                <h3 class="title-3">${_("How do I get the videos into my course?")}</h3>
                <p>${_("After processing is complete for the video file, you copy its unique video ID. On the Course Outline page, you create or locate a video component to play this video. Edit the video component to paste the ID into the Advanced {em_start}EdX Video ID{em_end} field.").format(em_start='<strong>', em_end="</strong>")}</p>
            </div>
        </aside>
    </section>
</div>

</%block>
