{% extends "course_flow/base.html" %}
<!-- -->
{% load static i18n %}
<!-- -->
{% block header %} {% endblock %}
<!-- -->
{% block title %}{% trans "Import" %} - CourseFlow{% endblock %}
<!-- -->
{% block metadescription %} {% endblock %}
{% block container %}
  <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 }}">

    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 %}
