<%! from django.utils.translation import ugettext as _ %>
<%inherit file="base.html" />
<%namespace name='static' file='static_content.html'/>

<%! from django.core.urlresolvers import reverse %>
<%block name="title">${_("Course Import")}</%block>
<%block name="bodyclass">is-signedin course tools import</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
    <h1 class="page-header">
      <small class="subtitle">${_("Tools")}</small>
      <span class="sr">&gt; </span>${_("Course Import")}
    </h1>
  </header>
</div>

<div class="main-wrapper">
  <div class="inner-wrapper">
    <article class="import-overview">
      <div class="description">
        <p><strong>${_("Importing a new course will delete all content currently associated with your course and replace it with the contents of the uploaded file.")}</strong></p>
        ## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
        <p>${_("File uploads must be gzipped tar files (.tar.gz) containing, at a minimum, a {filename} file.").format(filename='<code>course.xml</code>')}</p>
        <p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p>
      </div>
      <form id="fileupload" method="post" enctype="multipart/form-data"
          class="import-form" url="${reverse('import_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}">
        <h2>${_("Course to import:")}</h2>
        <p class="error-block"></p>
        <a href="#" class="choose-file-button">${_("Choose File")}</a>
        <p class="file-name-block"><span class="file-name"></span><a href="#" class="choose-file-button-inline">${_("change")}</a></p>
        <input type="file" name="course-data" class="file-input" >
        <input type="submit" value="${_('Replace my course with the one above')}" class="submit-button" >
        <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
        <p class="status-block">Unpacking...</p>
        <div class="progress-bar">
          <div class="progress-fill"></div>
          <div class="percent">0%</div>
        </div>
      </form>
    </article>
  </div>
</div>
</%block>

<%block name="jsextra">
<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>
(function() {

var bar = $('.progress-bar');
var fill = $('.progress-fill');
var percent = $('.percent');
var status = $('#status');
var statusBlock = $('.status-block');
var submitBtn = $('.submit-button');


$('#fileupload').fileupload({

    dataType: 'json',
    type: 'POST',

    maxChunkSize: 20 * 1000000, // 20 MB

    autoUpload: false,

    add: function(e, data) {
        submitBtn.unbind('click');
        var file = data.files[0];
        if (file.name.match(/tar\.gz$/)) {
            submitBtn.click(function(e){
                e.preventDefault();
                submitBtn.hide();
                data.submit().complete(function(result, textStatus, xhr) {
                    if (result.status != 200) {
                        alert('${_("Your import has failed.")}\n\n' + JSON.parse(result.responseText)["ErrMsg"]);
                        submitBtn.show();
                        bar.hide();
                    } else {
                        if (result.responseText["ImportStatus"] == 1) {
                            bar.hide();
                            statusBlock.show();
                        }
                    }
                });
            });
        } else {
            data.files = [];
        }
    },

    progressall: function(e, data){
        var percentVal = parseInt(data.loaded / data.total * 100, 10) + "%";
        bar.show();
        fill.width(percentVal);
        percent.html(percentVal);
    },
    done: function(e, data){
        bar.hide();
        alert('${_("Your import was successful.")}');
        window.location = '${successful_import_redirect_url}';
    },
    sequentialUploads: true



});

})();
</script>
</%block>
