<!-- -*- mode:jinja2 -*- -->
{% extends "base.html" %}

{% block pagetitle %}
<i class="fa fa-cog"></i> <span class="ds-primary-title">{{config['DASHBOARD_APPNAME']}}</span> <span class="ds-secondary-title">{{title}}</span>
{% endblock %}

{% block content %}

<div class="container">

  <div>
    {% include "snippets/breadcrumbs.html" %}
  </div>


  <div class="row">
    <div class="col-md-8 col-md-offset-2">

      <div class="">
        <br/>
        <br/>

      <form class="form-horizontal">
        <fieldset>

          <div class="form-group">
            <label class="col-md-4 control-label" for="selectTimeZone">Import from local .json file</label>
            <div class="col-md-6">
              <input type="file" id="ds-import-filepicker">
              <button class="btn btn-default"
                      id="ds-import-filepicker-button">
                <i class="fa fa-file-text-o"> </i> Choose File...
              </button>
              <button class="btn btn-default"
                      id="ds-import-from-file-button"
                      data-toggle="tooltip"
                      disabled="disabled"
                      title="Import from Selected File">
                <i class="fa fa-upload"></i> Import
              </button>
              <div id="ds-import-filename"></div>
            </div>
            <div class="col-md-2">
            </div>
            <p class="help-block">Import a Tessera dashboard definition from a .JSON file.</p>
          </div>

        </fieldset>
      </form>

      </div>
    </div>
  </div>


  <div class="row">
  </div>

</div> <!-- container -->

<style>
 #ds-import-filepicker {
   display: none;
 }
 #ds-import-filename {
   margin-top: 1em;
 }
</style>

<script>
 $(document).on('click', '#ds-import-filepicker-button', function(e) {
   $('#ds-import-filepicker').click()
   e.preventDefault()
 })

$(document).on('change', '#ds-import-filepicker', function(e) {
  var file_list = this.files
  if (file_list.length > 0) {
    $('#ds-import-filename').text(file_list[0].name)
    $('#ds-import-from-file-button').removeAttr('disabled')
  }
})

 $(document).on('click', '#ds-import-from-file-button', function(e) {
   var file_list = $('#ds-import-filepicker')[0].files
   if (!file_list.length) {
     ts.manager.warning('Select a file to import first')
   } else {
     var file = file_list[0]
     var reader = new FileReader()
     reader.onload = function(e) {
       ts.manager.create(e.target.result, function(data) {
         ts.manager.success('Imported succeeded')
         window.location = data.view_href
       })
     }
     reader.readAsText(file)
   }
   return false
 })
</script>

{% endblock %}
