{% extends "course_flow/base.html" %}
<!-- -->
{% load static i18n %}
<!-- -->
{% block header %} {% endblock %}
<!-- -->
{% block title %}{% trans "Import" %} - CourseFlow{% endblock %}
<!-- -->
{% block metadescription %} {% endblock %}
<!-- -->
{% block body %}
<div class="splash-page">
  <div class="splash-wrapper">
    <button class="splash-image-wrapper">
      <img
        id="import-json"
        src="{% static 'course_flow/img/images_svg/open_basic.svg' %}"
      />
      <div>Import Project<br /><small>(May take some time)</small></div>
    </button>
  </div>
</div>
<!-- -->
{% endblock %}
<!-- -->
{% block foot %} {% endblock %}
<!-- -->
{% csrf_token %}
<!-- -->
{% block scripts %} {{ block.super }}
<script nonce="{{request.csp_nonce}}">


  $(".splash-page").detach().appendTo("#container");

  const iconpath = "{% static 'course_flow/img/images_svg/' %}";

  const user_id = {{ user.id }};
  const read_only=false;

  fileLoader = document.createElement('input');
  fileLoader.type="file";
  fileLoader.accept=".json";
  fileLoader.addEventListener('change',()=>{
      let loader = new renderers.Loader('body');
      let reader = new FileReader();
      reader.readAsText(fileLoader.files[0]);
      reader.onload = (evt)=>{
          let readData = evt.target.result;
          $.post("{% url 'course_flow:project-from-json' %}", {
              jsonData:readData
          }).done(function(data){
              loader.endLoad();
              if(data.action == "posted") window.location.href="{% url 'course_flow:home' %}";
              else console.log("Failed");
          });
      }
  });

  $("#import-json").on("click",()=>{
      fileLoader.click();
  });
</script>
{% endblock %}
