{% 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>Import an LCIA method</h1>
  <div class="span-15 colborder">
    <h3 id="fp-selected">Click to select the directory that the XML files are in, or a single XML file.</h3>
    <div id="fp"></div>
  </div>
  <div class="span-8 last">
    <form name="path-form">
      <input id="hidden-path" name="path" type="hidden" value="">
      <div id="missing-name"></div>
      <button id="submit-path" type="submit" style="">Import LCIA method(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 the LCIA method(s).</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() {        
  $("#in-submission").hide();

  $('#fp').fileTree({
    root: '/', 
    script: '{{ url_for('fp_api') }}?full=1', 
    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 ($("#hidden-path").val() != '') {
      $("#in-submission").show();
      $("#select-path").hide();
      $.ajax({
        type: "POST",
        url: '{{ url_for('import_method') }}',
        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</p>');
    }
  });
});
</script>
{% endblock %}