{% extends "base.html" %}

{% block extrahead %}
<link rel="stylesheet" href="{{ url_for('static', filename="jqueryFileTree/jqueryFileTree.css") }}" type="text/css" media="screen, projection">
{% endblock %}

{% block body %}
<div id="select-path">
  <h1>Importing a database</h1>
  <div class="span-15 colborder">
    <h3 id="fp-selected">1. Click to select the directory that the XML files are in, or a single XML file.</h3>
    <p>Note: Not all files are shown...</p>
    {% if windows %}
      <h3>Change the drive (Windows only)</h3>
      <select id="driveletter">
      {% for letter in drive_letters %}
        <option value="{{ letter }}" {% if letter[:2] == current_drive %}selected{% endif %}>{{ letter }}</option>
      {% endfor %}
      </select>
    {% endif %}
    <div id="fp"></div>
  </div>
  <div class="span-8 last">
    <form name="path-form">
      <h3>2. Then name the database:</h3>
      <input id="dir-file" name="name" type="text" value=""><br>
      <input id="hidden-path" name="path" type="hidden" value="">
      <div id="missing-name"></div>
      <button id="submit-path" type="submit" style="">Import these file(s)</button>
    </form>
  </div>
</div>

<div id="in-submission" class="span-24 clear">
  <h3>Your computer is now working as fast as it can importing your new database.</h3>
  <p>Please be patient... you will be redirected to the home page as soon as the import is finished.</p>
</div>

<script type="text/javascript">
function fpselector (a) {
  $("#fp-selected").text("Currently selected: " + a.attr('rel'));
  $("#hidden-path").val(a.attr('rel'));
};
</script>
<script src="{{ url_for('static', filename="jqueryFileTree/jqueryFileTree.js") }}"></script>
<script type="text/javascript">
$(document).ready( function() {
  $("#success").hide();

  $('#fp').fileTree({
    root: '/',
    script: '{{ url_for('fp_api') }}',
    folderEvent: 'click',
    multiFolder: false
    },
    function(file) {
      $("#fp-selected").text("Currently selected: " + file);
      $("#hidden-path").val(file);
    }
  );

  $('form[name=path-form]').submit( function (e) {
    e.preventDefault();
    if (($("#dir-file").val() != '') && ($("#hidden-path").val() != '')) {
      $("#in-submission").show();
      $("#select-path").hide();
      $.ajax({
        type: "POST",
        url: '{{ url_for('import_database') }}',
        data: $(this).serialize(),
        success: function () {
          document.location.href='{{ url_for('index') }}';
        }
      });
    } else {
      $("#missing-name").html('<p style="color: red">You must first select both a file/directory and enter a name</p>');
    }
  });
});

$(function() {
  $("#driveletter").change(function() {
      var letter = $(this).val();
      $('#fp').html("");
      $('#fp').fileTree({
        root: letter,
        script: '/fp-api',
        folderEvent: 'click',
        multiFolder: false
        },
        function(file) { console.log(file); }
      );
  })
});
</script>
{% endblock %}
