{% load i18n %}
<table>
  <tr>
    <td style="vertical-align:top; padding: 15px">
      <button type="submit" class="btn btn-primary" id="import" onclick="import_show('{% trans "Import a spreadsheet" %}',null,true,uploadspreadsheetajax)" value="{% trans "import"|capfirst %}">{% trans "import"|capfirst %}</button>
    </td>
    <td style="padding: 15px 15px 0 15px">
      <p>{% trans "Import input data from a spreadsheet.</p><p>The spreadsheet must match the structure exported with the task above." %}</p>
    </td>
  </tr>
</table>
<script>
var xhr = {abort: function () {}};

var uploadspreadsheetajax = {
  url: '{{request.prefix}}/execute/launch/importworkbook/',
  success: function (data) {
    var el = $('#uploadResponse');
    el.html(data);
    if (el.attr('data-scrolled')!== "true") {
      el.scrollTop(el[0].scrollHeight - el.height());
    }
    $('#cancelbutton').html("{% trans 'Close' %}");
    $('#importbutton').hide();
    $("#animatedcog").css('visibility','hidden');
    $('#cancelimportbutton').hide();
    if (document.queryCommandSupported('copy')) {
      $('#copytoclipboard').show();
    }
    $("#grid").trigger("reloadGrid");
  },
  xhrFields: {
    onprogress: function (e) {
      var el = $('#uploadResponse');
      el.html(e.currentTarget.response);
      var progress = el.find(".recordcount").last();
      var records = el.find("[data-cnt]").last().attr("data-cnt");
      progress.text(interpolate(gettext("%s records processed"), [records]));
      if (el.attr('data-scrolled')!== "true") {
        el.attr('data-scrolled', el[0].scrollHeight - el.height());
        el.scrollTop(el[0].scrollHeight - el.height());
      }
    }
  },
  error: function(result, stat, errorThrown) {
    if (result.status == 401) {
      location.reload();
      return;
    }
    $('#cancelimportbutton').hide();
    $('#copytoclipboard').show();
    $("#animatedcog").css('visibility','hidden');
    $("#uploadResponse").scrollTop($("#uploadResponse")[0].scrollHeight);
  }
};
</script>