{% extends "base.html" %}

{% block content %}
<section class="section">
    <div class="container">
        <h1 class="title">Visualisation de l'étalonnage</h1>
        <div id="visualiser-container">
            <div id="visualiser">
                <div id="info">
                    Objet sélectionné : <span id="selected-object">aucun</span>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock content %}

{% block extracss %}
<style>
    #visualiser-container {
        height: 50vh;
        border-color: var(--bulma-title-color);
        border-width: 1px;
        border-style: solid;
    }

    #visualiser {
        height: 100%;
    }

    #info {
        position: absolute;
        width: 100%;
        z-index: 100;
        display:block;
        padding: 1em;
    }
</style>
{% endblock extracss %}

{% block extrajs %}
<script type="importmap">{ "imports": {
    "three": "/static/three.module.js",
    "orbit-controls": "/static/orbit-controls.js",
    "calibration-visualiser": "/static/calibration-visualiser.js"
} }</script>
<script type="module">
    import { init } from 'calibration-visualiser';
    init('coucou', document.getElementById('visualiser'));
</script>
{% endblock extrajs %}