{%extends "basedialog.html"%}
{%import "commonExecuteCallback.js" as commons%}

{%block title %}Download as File{%endblock%}

{%block body%}
<p style="font-size: 1.25em;margin: 5px 0 25px;">Select the file type to download and the number of documents to include</p>
<form role="form">
  <div class="form-group">
    <label for="filetype">Download Format:</label>
    <select class="form-control" id="filetype" style="margin:0;">
      <option value="csv">Comma-separated values (CSV) file</option>
      <option value="xml">XML file</option>
      <option value="json">JSON formatted file</option>
      <option value="txt">Plain text file</option>
      <option value="html">HTML table fragment</option>
      <option value="md">Markdown formatted table</option>
    </select>
  </div>
  <div class="form-group">
    <label for="numrows">Number of Rows to Download ({{totalDocs}} rows available)</label>
    <input type="number" class="form-control" id="numrows" min="1" max="{{totalDocs}}">
  </div>
</form>
{%endblock%}

{%block onOK%}
global.downloadtype=$('#filetype').val();
global.downloadcount=$('#numrows').val();
{% call(results) commons.ipython_execute(this._genDisplayScript(addOptionDict={}),prefix,extraCommandOptions="{'doDownload':global.downloadtype, 'doDownloadCount':global.downloadcount}") %}
    $('#results{{prefix}}').html({{results["error"] or results}});
    $('#loading{{prefix}}').css('display','none');
{% endcall %}
{%endblock%}

{%block onDialogShown%}
var btnok = $('.btn-ok');
var setOkBtnStatus = function() {
	if ($('#numrows').length && Number($('#numrows').val()) <= 0) {
    btnok.attr('disabled', 'disabled');
  } else {
    btnok.attr('disabled', null);
  }
}
$('#numrows').val(Math.min(100, {{totalDocs}}));

$('#numrows').on('input', function () {
  setOkBtnStatus();
});
setOkBtnStatus();
{%endblock%}

{%block cellOuputHTML%}
<div id="loading{{prefix}}" style="display:none">
    <div style="width:100px;height:60px;left:47%;position:relative">
        <i class="fa fa-circle-o-notch fa-spin" style="font-size:48px"></i>
    </div>
    <div style="text-align:center">Saving data to file. Please wait...</div>
</div>
<div id="results{{prefix}}"></div>
{%endblock%}