<%inherit file="../base.html" />
<%!
from django.utils.translation import ugettext as _
from videoproviders.forms import SubtitleForm, ThumbnailForm
%>
<%namespace name='static' file='../static_content.html'/>

<%block name="title">${_("Video Uploads")}</%block>

<%block name="header_extras">

<link rel="stylesheet" type="text/css" href="${static.url('fun/js/vendor/videojs/video-js.min.css')}" />
<style>
  .videoupload table, .modal-window.videoupload-parameters .modal-content table {
    background-color: #ffffff;
    width: 100%;
    text-align: left;
    table-layout: fixed;
  }
  .videoupload table th.preview {
      width: 350px;
  }
  .videoupload table tbody tr:nth-child(odd) {
    background: #eee;
  }
  .videoupload table th {
    font-weight: bold;
    padding-right: 20px;
    vertical-align: middle;
  }
  .videoupload table th.title {
    width: 180px;
  }
  .videoupload table th.actions,
  .videoupload table td.actions {
    width: 80px;
    text-align: center;
    padding-right: 0;
  }
  .videoupload table td {
    padding-right: 10px;
    vertical-align: middle;
  }
  .videoupload table td.title {
    max-width: 200px;
    word-break: break-all;
  }
  .videoupload table td.title input {
    max-width: 95%;
  }
  .videoupload table td.id {
    word-break: break-all;
  }
  .videoupload .invisible {
    display: none;
  }
  .videoupload .ui-widget-content {
    border: 1px solid #aaaaaa;
    background-color: #ffffff;
    color: #222222;
  }
  .videoupload .ui-widget-header {
    border: 1px solid #aaaaaa;
    background-color: #cccccc;
    color: #222222;
    font-weight: bold;
  }
  .videoupload .ui-corner-all {
    border-radius: 4px;
  }
  .videoupload .ui-corner-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .videoupload .actions-list .action-item {
    display: list-item;
  }
  [class*="view-"] .modal-actions {
    text-align: right;
  }
}
</style>

## Modal underscore templates
% for template_name in ['basic-modal', 'modal-button']:
<script type="text/template" id="${template_name}-tpl">
  <%static:include path="js/${template_name}.underscore" />
</script>
% endfor

## Load underscore templates for the various backbone views. These templates will be loaded via TemplateUtils.loadTemplate(name) calls.
## E.g: 'video' will be available as the 'videoupload-video' template.
% for template_name in ['modal-button', 'list', 'video', 'parameters', 'parameters-subtitle', 'parameters-thumbnail']:
<script type="text/template" id="videoupload-${template_name}-tpl">
  <%static:include path="videoupload/js/${template_name}.underscore" />
</script>
% endfor

<script type="text/template" id="videoupload-subtitle-form-tpl">
  ## Form for uploading new subtitles
  <form method="POST" enctype="multipart/form-data" onsubmit="return false;">
    <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
    <table>${SubtitleForm().as_table()}</table>
    <input type="submit" value="${_('Add')}">
  </form>
</script>
<script type="text/template" id="videoupload-thumbnail-form-tpl">
  ## Form for uploading a new thumbnail
  <form method="POST" enctype="multipart/form-data" onsubmit="return false;">
    <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
    <table>${ThumbnailForm().as_table()}</table>
    <input type="submit" value="${_('Change')}">
  </form>
</script>

</%block>

<%block name="requirejs">
  <%include file="js/videoupload.js"/>
</%block>

<%block name="bodyclass">is-signedin course view-videouploads</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-actions has-subtitle">
    <h1 class="page-header">
      ${_("Video uploads")}
      <small class="subtitle">${_("Add videos to your course")}</small>
    </h1>
  </header>
</div>

<div class="wrapper-content wrapper">
  <section class="content view-uploads">
    <article class="videoupload" role="main">
      <div id="videoupload-list"></div>
    </article>
  </section>
</div>
</%block>