<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%! from django.utils.translation import ugettext as _ %>

<%block name="title">${_("Files &amp; Uploads")}</%block>
<%block name="bodyclass">is-signedin course 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="wrapper-content wrapper">
    <section class="content">
        <article class="asset-library content-primary" role="main">
            <table>
                <caption class="sr">${_("List of uploaded files and assets in this course")}</caption>
                <colgroup>
                  <col class="thumb-cols" />
                  <col class="name-cols" />
                  <col class="date-cols" />
                  <col class="embed-cols" />
                  <col class="actions-cols" />
                </colgroup>
                <thead>
                <tr>
                    <th class="thumb-col">${_("Preview")}</th>
                    <th class="name-col">${_("Name")}</th>
                    <th class="date-col">${_("Date Added")}</th>
                    <th class="embed-col">${_("URL")}</th>
                    <th class="actions-col"><span class="sr">${_("Actions")}</span></th>
                </tr>
                </thead>
                <tbody id="asset_table_body" >

                </tbody>
            </table>
        </article>

        <aside class="content-supplementary" role="complimentary">
            <div class="bit">
                <h3 class="title-3">${_("What files are included here?")}</h3>
                <p>${_("Any file you upload to the course will be listed here, including your course image, textbook chapters, and any files you add directly to this page.")}</p>
            </div>
            <div class="bit">
                <h3 class="title-3">${_("What can I do on this page?")}</h3>
                <p>${_("You can click the file name to view or download the file, upload a new file, delete a file, and lock a file to prevent people who are not enrolled from accessing that specific file. You can also copy the location (URL) of a file to use elsewhere in your course.")}</p>
            </div>
        </aside>
    </section>
</div>

<div class="upload-modal modal">
    <a href="#" class="close-button"><i class="icon-remove-sign"></i> <span class="sr">${_('close')}</span></a>
    <div class="modal-body">
        <h1 class="title">${_("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>
