{% extends 'scanner/base.html' %}
{% load i18n home_tags  %}

{% block styles %}
    {{ block.super }}
    <style>
    :root {
        --well-columns: 6; 
    }
    </style>   
    <link href="/static/scanner/css/scanning.css" rel="stylesheet">
{% endblock %}
{% block columns %}{% endblock %}

{% block content %}
 <div class="w3-row w3-row-padding w3-black">
    <div class="w3-col w3-center" style="width: 30%">
        <div class="w3-col">
            <div>{% trans "Choix de la session" %}</div>
            <form method="post" class="w3-bar-item" action="">
                {% csrf_token %}
                <select id="_session" name="_session" class="w3-select" onchange="this.form.submit()">
                    {% for s in sessions %}
                    <option value="{{ s.id }}" {% if s.id == cursid %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
            </form>

        </div>
	    <div class="w3-col">     
	        <div class="w3-row w3-bold">
	            <div class="w3-half">X<br><span id="_x"></span></div>
	            <div class="w3-half">Y<br><span id="_y"></span></div>
	            <div class="w3-col w3-padding"><span id="_uuid"></span></div>
	        </div>     
	    </div>
        <div class="w3-row w3-row-padding">
		    <div class="w3-half"> 
		        <button id="_median" class="w3-button w3-dark-xlight w3-round-large w3-block">
		             <span class="median">{% trans 'Axes' %}</span><br><i class="fa-solid fa-crosshairs w3-text-amber w3-xlarge"></i>
		        </button>  
	        </div>
	        <div class="w3-half">     
		        <button id="_crop" class="w3-button w3-dark-xlight w3-round-large w3-block">
		            <span class="crop" style="color: red">{% trans 'Recadrer' %}</span><br><i class="fa-solid fa-crop w3-text-amber w3-xlarge"></i>
		        </button>
	        </div>
        </div>
        <div class="w3-row w3-row-padding">
	        <div class="{% if conf.scan_simulation %}w3-twothird{% else %}w3-col{% endif %} w3-center">             
		        <button id="_scan" class="w3-button w3-light-blue w3-round-large w3-margin-top w3-block">
		            <span class="w3-bold">{% trans 'Lancer' %}<br>{% trans 'le balayage' %}</span><br><i class="fa-solid fa-circle-check w3-text-blue w3-xlarge"></i>
		        </button>
	        </div>  
	        {% if conf.scan_simulation %}
	        <div class="w3-third w3-center">             
	            <button id="_simulate" class="w3-button w3-dark-xlight w3-round-large w3-margin-top w3-block">
	                <span class="w3-bold">{% trans 'Simuler' %}<br>{% trans 'le balayage' %}</span><br><i class="fa-solid fa-triangle-exclamation w3-text-orange w3-xlarge"></i>
	            </button>
	        </div>
	        {% endif %}
	        <div class="w3-col">
	            <div id="_well_state" class="w3-margin-top w3-small w3-text-amber w3-justify"></div>
	            <div id="_well_btn"></div>  	
	        </div>         
            <div class="w3-col">  
	            <button id="_halt" class="w3-button w3-red w3-round-large w3-margin-top w3-block">
	                {% trans 'ARRET' %}<br><i class="fa-solid fa-hand w3-xlarge"></i>
	            </button>
	        </div>        
        </div>
        <div class="w3-col">
           <div class="w3-margin-top w3-padding-small w3-small">
               <span id="_ts"></span>
           </div>
           <div class="w3-margin-top w3-small">
               <span id="_scan_state" class="w3-text-amber w3-padding w3-justify"></span>
           </div>    
        </div>                      
    </div>
    <div class="w3-col" style="width: 70%"> 
       {% include 'scanner/scan-image.html' %}    
    </div>	    
</div>
 <ul id="_debug" class="w3-scroll-y" style="height: 50vh"></ul>
{% endblock %}

{% block js_footer %}
    {{ block.super }}
    <script>
        const container = sId("scan-img");
        const ws_route  = "{{ ws_route }}";
        const use_tracking = "{{ use_tracking }}" == "True";
        const options = {
            ts: sId("_ts"),
            cx: sId("_cx"),
            cy: sId("_cy"),
            x : sId("_x"),
            y : sId("_y"),
            session: sId("_session"),
            scan   : sId("_scan"),
            halt   : sId("_halt"),
            debug  : sId("_debug"),
            median : sId("_median"),
            crop   : sId("_crop"), 
            speed_px_s  : sId("_speed_px_s"),
            axial_speed : sId("_axial_speed"),
            axial_pos   : sId("_axial_pos"),
            area_px     : sId("_area_px"),
            frame_count : sId("_count"),
            scan_state  : sId("_scan_state"),
            simulate    : sId("_simulate"),
            well_btn    : sId("_well_btn"),
            well_state    : sId("_well_state")

        };                      
    </script>        
    <script src="/static/scanner/js/scanning.js"></script>
    <script>
        const manager  = new ScannerManager(container, options);
        const protocol = location.protocol === "https:" ? "wss" : "ws";
        const wsUrl    = `${protocol}://${location.host}/${ws_route}`;
        const socket   = new MetadataSocket(wsUrl);
        socket.setManager(manager);
        socket.connect();
        manager.registerSocket(socket);
    </script>
{% endblock %}