<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%! from django.utils.translation import ugettext as _ %>
<%block name="bodyclass">is-signedin course uploads</%block>
<%block name="title">${_("Files &amp; Uploads")}</%block>

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

<%block name="header_extras">
    <script type="text/template" id="asset-tpl">
        <%static:include path="js/asset.underscore"/>
    </script>
</%block>

<%block name="jsextra">
    <script src="${static.url('js/vendor/mustache.js')}"></script>
    <script src="${static.url('js/vendor/jQuery-File-Upload/js/jquery.iframe-transport.js')}"> </script>
    <script src="${static.url('js/vendor/jQuery-File-Upload/js/jquery.fileupload.js')}"> </script>

    <script type="text/javascript">
        var assets = new CMS.Models.AssetCollection(${asset_list});
        assets.url = "${update_asset_callback_url}";
        // TODO remove setting on window object after RequireJS.
        window.assetsView = new CMS.Views.Assets({collection: assets, el: $('#asset_table_body')});
    </script>
</%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>${_("Files &amp; 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="main-wrapper">
    <div class="inner-wrapper">
      <div class="page-actions">
        <input type="text" class="asset-search-input search wip-box" placeholder="search assets" style="display:none"/>
      </div>
      <article class="asset-library">
        <table>
          <thead>
            <tr>
              <th class="thumb-col"></th>
              <th class="name-col">Name</th>
              <th class="date-col">Date Added</th>
              <th class="embed-col">URL</th>
              <th class="delete-col"></th>
            </tr>
          </thead>
          <tbody id="asset_table_body" >

          </tbody>
        </table>
        <nav class="pagination wip-box">
          Page:
          <ol class="pages">
            <li>1</li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
          </ol>
          <a href="#" class="next">»</a>
        </nav>
      </article>
    </div>
  </div>

  <div class="upload-modal modal">
    <a href="#" class="close-button"><span class="close-icon"></span></a>
      <div class="modal-body">
        <h1>${_("Upload New File")}</h1>
        <p class="file-name"></a>
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
      <div class="embeddable">
        <label>URL:</label>
        <input type="text" class="embeddable-xml-input" value='' readonly>
      </div>
        <form class="file-chooser" action="${upload_asset_callback_url}"
                                method="post" enctype="multipart/form-data">
          <a href="#" class="choose-file-button">${_("Choose File")}</a>
          <input type="file" class="file-input" name="file" multiple>
        </form>
      </div>
    </div>

    <div class="modal-cover"></div>


</%block>

<%block name="view_alerts">
<!-- alert: save confirmed with close -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
  <div class="alert confirmation">
    <i class="icon-ok"></i>

    <div class="copy">
      <h2 class="title title-3">${_('Your file has been deleted.')}</h2>
    </div>

    <a href="" rel="view" class="action action-alert-close">
      <i class="icon-remove-sign"></i>
      <span class="label">${_('close alert')}</span>
    </a>
  </div>
</div>
</%block>
