<%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="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>
</%block>

<%block name="content">

  <script type="text/template" id="new-asset-element">
    <tr data-id='{{url}}'>
      <td class="thumb-col">
        <div class="thumb">
          {{#thumb_url}}
          <img src="{{thumb_url}}">
          {{/thumb_url}}
        </div>
      </td>
      <td class="name-col">
        <a data-tooltip="Open/download this file" href="{{url}}" class="filename">{{displayname}}</a>
        <div class="embeddable-xml"></div>
      </td>
      <td class="date-col">
        {{uploadDate}}
      </td>
      <td class="embed-col">
        <input type="text" class="embeddable-xml-input" value='{{portable_url}}' readonly>
      </td>
      <td class="delete-col">
        <a href="#" data-tooltip="${_('Delete this asset')}" class="remove-asset-button"><span class="delete-icon"></span></a>
      </td>
    </tr>
  </script>

  <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" data-remove-asset-callback-url='${remove_asset_callback_url}'>
        <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">
          % for asset in assets:
            <tr data-id="${asset['url']}">
              <td class="thumb-col">
                <div class="thumb">
                  % if asset['thumb_url'] is not None:
                  <img src="${asset['thumb_url']}">
                  % endif
                </div>
              </td>
              <td class="name-col">
                <a data-tooltip="Open/download this file" href="${asset['url']}" class="filename">${asset['displayname']}</a>
                <div class="embeddable-xml"></div>
              </td>
              <td class="date-col">
                ${asset['uploadDate']}
              </td>
              <td class="embed-col">
                <input type="text" class="embeddable-xml-input" value="${asset['portable_url']}" readonly>
              </td>
              <td class="delete-col">
                <a href="#" data-tooltip="${_('Delete this asset')}" class="remove-asset-button"><span class="delete-icon"></span></a>
              </td>
            </tr>
          % endfor
          </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>