<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="bodyclass">is-signedin course uploads</%block>
<%block name="title">Uploads &amp; Files</%block>

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

<%block name="jsextra">
<script src="${static.url('js/vendor/mustache.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='{{url}}' readonly>
      </td>
    </tr>
  </script>

  <div class="wrapper-mast wrapper">
    <header class="mast has-actions has-subtitle">
      <div class="title">
        <span class="title-sub">Course Content</span>
        <h1 class="title-1">Files &amp; Uploads</h1>        
      </div>

      <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="ss-icon ss-symbolicons-standard icon icon-create">&#xEB40;</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>
            </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['url']}" readonly>
              </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">
			</form>
		</div>
	</div>

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


</%block>