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

{% block styles %}
    {{ block.super }}
    <link href="/static/scanner/css/main.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: 20%">
        <div class="w3-col">
            <div>{% trans "Choix de la session" %}</div>
            <select id="_session" class="w3-select">
                {% for s in sessions %}
                <option value="{{ s.id }}">{{ s.name }}</option>
                {% endfor %}
            </select>
        </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-col"> 
	        <button id="_median" class="w3-button w3-dark-xlight w3-round-large w3-padding-small w3-block">
	             {% trans 'Axes' %}&nbsp;<br><i class="fa-solid fa-crosshairs w3-text-amber w3-xlarge"></i>
	        </button>  
        </div>
        <div class="w3-col">     
	        <button id="_crop" class="w3-button w3-dark-xlight w3-round-large w3-padding-top w3-margin-top w3-block">
	            {% trans 'Recadrer' %}<br><i class="fa-solid fa-crop w3-text-amber w3-xlarge"></i>
	        </button>
        </div>
        <div class="w3-col">             
	        <button id="_scan" class="w3-button w3-dark-xlight w3-round-large w3-margin-top w3-block">
	            {% trans 'Lancer le balayage' %}<br><i class="fa-solid fa-circle-check w3-text-orange w3-xlarge"></i>
	        </button>
        </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 class="w3-col">
           <div class="w3-margin-top w3-padding w3-small">
               <span id="_ts"></span>
           </div>
        </div>                      
    </div>
    <div class="w3-col" style="width: 80%"> 
       {% 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"),
            uuid: sId("_uuid")
        };                      
    </script>        
    <script src="/static/scanner/js/main.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 %}