{% extends "index.base.template.html" %}
{% block scripts %}
  <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script>
  <script src="{{ static('js/drafter.pyodide.js') }}"></script>
{% endblock scripts %}
{% block initialization %}
  <script>
  (async () => {
    try {
  
      // 1) Load Pyodide
      await window.Drafter.setupPyodide({
        pyodideUrl: {{ system.app_common.pyodide_url | tojson }},
        systemPackages: {{ system.app_common.system_packages | tojson }},
      });

      // 4) Mount Drafter either locally or remotely based on configuration
      {% if system.app_common.mount_drafter_locally %}
        await window.Drafter.mountDrafterDirectory();
      {% else %}
        const url = {{ pyodide_drafter_path | tojson }};
        await window.Drafter.mountDrafterRemote(url);
      {% endif %}

      // Old debugging step to dump the output of drafter directory
      // await window.Drafter.runStudentCode({code: "import os; print(os.listdir('./drafter/'))"});

      // 4) Patch Drafter
      await window.Drafter.patchPythonFeatures();

      // 5) Initial run of student's code
      await window.Drafter.startPyodideAppServerSession({
        devWsUrl: {{ dev_ws_url | tojson }},
        pythonUrl: {{ python_url | tojson }},
        inlineCode: {% if inline_py %}document.getElementById('user-code')?.textContent || ''{% else %}undefined{% endif %},
        loadPackagesAutomatically: {{system.app_common.load_packages_automatically|tojson}},
        explicitPackageList: {{ system.app_common.project_packages | tojson }},
      });

      // All done!
      console.log("[Drafter AppServer Scaffolding] Student Code Initialized with Pyodide:");
    } finally {
      document.getElementById('--drafter-initial-loading-white-screen').remove();
    }
  })();
  </script>
{% endblock initialization %}