<%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 view-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 type="text/javascript">
require(["domReady", "jquery", "gettext", "js/models/asset", "js/collections/asset",
         "js/views/assets", "js/views/feedback_prompt",
         "js/views/feedback_notification", "jquery.fileupload"],
        function(domReady, $, gettext, AssetModel, AssetCollection, AssetsView, PromptView, NotificationView) {

    var assets = new AssetCollection(${asset_list});
    assets.url = "${update_asset_callback_url}";
    var assetsView = new AssetsView({collection: assets, el: $('#asset_table_body')});
    var $modal = $(".upload-modal");
    var $modalCover = $(".modal-cover");


    var hideModal = function (e) {
        if (e) {
            e.preventDefault();
        }
        $('.file-input').unbind('change.startUpload');
        $modal.hide();
        $modalCover.hide();
    }

    var showUploadModal = function (e) {
        e.preventDefault();
        resetUploadModal();
        $modal.show();
        $('.file-input').bind('change', startUpload);
        $('.upload-modal .file-chooser').fileupload({
            dataType: 'json',
            type: 'POST',
            maxChunkSize: 100 * 1000 * 1000,      // 100 MB
            autoUpload: true,
            progressall: function(e, data) {
                var percentComplete = parseInt((100 * data.loaded) / data.total, 10);
                showUploadFeedback(e, percentComplete);
            },
            maxFileSize: 100 * 1000 * 1000,   // 100 MB
            maxNumberofFiles: 100,
            add: function(e, data) {
                data.process().done(function () {
                    data.submit();
                });
            },
            done: function(e, data) {
                displayFinishedUpload(data.result);
            }

        });

        $modalCover.show();
    };

    var showFileSelectionMenu = function(e) {
        e.preventDefault();
        $('.file-input').click();
    };

    var startUpload = function (e) {
        var file = e.target.value;

        $('.upload-modal h1').html(gettext('Uploading…'));
        $('.upload-modal .file-name').html(file.substring(file.lastIndexOf("\\") + 1));
        $('.upload-modal .choose-file-button').hide();
        $('.upload-modal .progress-bar').removeClass('loaded').show();
    };

    var resetUploadModal = function () {
        // Reset modal so it no longer displays information about previously
        // completed uploads.
        var percentVal = '0%';
        $('.upload-modal .progress-fill').width(percentVal);
        $('.upload-modal .progress-fill').html(percentVal);
        $('.upload-modal .progress-bar').hide();

        $('.upload-modal .file-name').show();
        $('.upload-modal .file-name').html('');
        $('.upload-modal .choose-file-button').html(gettext('Choose File'));
        $('.upload-modal .embeddable-xml-input').val('');
        $('.upload-modal .embeddable').hide();
    };

    var showUploadFeedback = function (event, percentComplete) {
        var percentVal = percentComplete + '%';
        $('.upload-modal .progress-fill').width(percentVal);
        $('.upload-modal .progress-fill').html(percentVal);
    };

    var displayFinishedUpload = function (resp) {
        var asset = resp.asset;

        $('.upload-modal h1').html(gettext('Upload New File'));
        $('.upload-modal .embeddable-xml-input').val(asset.portable_url);
        $('.upload-modal .embeddable').show();
        $('.upload-modal .file-name').hide();
        $('.upload-modal .progress-fill').html(resp.msg);
        $('.upload-modal .choose-file-button').html(gettext('Load Another File')).show();
        $('.upload-modal .progress-fill').width('100%');

        assetsView.addAsset(new AssetModel(asset));
    };

    domReady(function() {
        $('.uploads .upload-button').bind('click', showUploadModal);
        $('.upload-modal .close-button').bind('click', hideModal);
        $('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
    });

}); // end of require()
    </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>


</%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>
