{% block vtkjs_viewer %}
  {% load static %}
  <style>
  .displayContent {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .progress {
    color: black;
    z-index: 100;
    background: rgba(128,128,128,.5);
    padding: 100px;
    border-radius: 10px;
    user-select: none;
    width: 25%;
    text-align: center;
    margin: 20% auto;
    position: relative;
  }
  </style>

  <div class="displayContent">
    <div id="vtkContainer">
    </div>
    <div class="progress" id="progressContainer">
      <h1>Loading...</h1>
    </div>
  </div>

  <script src="{% static 'rgd_3d/vtkjs_viewer.js' %}"></script>

  <script type="text/javascript">
    const progressContainer = document.getElementById('progressContainer');
    progressContainer.innerHTML = 'Loading...';

    // console.log(vtk.Rendering.OpenGL.vtkRenderWindow.newInstance().getGLInformations())
    const vtkContainer = document.getElementById("vtkContainer")

    function load (container, url) {
      emptyContainer(container);

      if (url) {
        createViewer(container);
        fetch(url)
          .then((resp) => resp.json())
          .then(function(data) {
            createPipeline(data.vtp_data)
            progressContainer.style.display = 'none'
            updateCamera(renderer.getActiveCamera());
          });
      }

    }


  </script>

{% endblock %}
