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

{% block styles %}
    {{ block.super }}
    <link href="/static/relay/css/relay.css" rel="stylesheet">
{% endblock %}
{% block sidebar_command %}
    <div class="w3-row w3-border w3-margin-top">
        <div class="w3-third w3-center">
            <button id="start-all" class="w3-btn w3-blue w3-round w3-margin-2 w3-hover-opacity w3-block" title="{% trans "Tout démarrer" %}">
                {% trans "Marche" %}
            </button>
            <button id="stop-all" class="w3-btn w3-pink w3-round w3-margin-2 w3-hover-opacity w3-block w3-margin-top" title="{% trans "Tout arrêter" %}">
                {% trans "Arrêt" %}
            </button>

        </div>
        <div class="w3-twothird">
            <div class="w3-center">{% trans "Débit total" %}</div>
            <div class="w3-dark-xlight w3-border w3-padding w3-margin w3-right-align">
                <div id="flow-all" class="w3-wide w3-bold">0.00</div><div>litres</div>
            </div>
        </div>
    </div>
{% endblock  %}
{% block content %}
    <div id="relay-grid" class="w3-black">
        {% for dev in devices %}
        <div id="box-{{ dev.uuid }}" class="relay-box w3-border w3-round w3-round-large">
            <div class="w3-row-padding">
	            <div class="w3-col s4 w3-center">
	                <div class="w3-padding-small">{{ dev.label }}</div>
	                <img src="{{ dev.image.url }}" class="w3-circle" style="width:64px;">
	                <select id="duration-{{ dev.uuid }}">
	                   <option value="0" selected>{% trans 'Sans délai' %}</option>
	                   <option value="30">30 s</option>
	                   <option value="60">1 mn</option>
	                   <option value="120">2 mn</option>
	                   <option value="300">5 mn</option>
                        <option value="600">10 mn</option>
	                </select>
	            </div>
	            <div class="w3-col s3">
	                <div id="ts-{{ dev.uuid }}" class="w3-small w3-padding-small"></div>
                    <button id="start-{{ dev.uuid }}" class="w3-btn w3-blue w3-round w3-margin-2 w3-hover-opacity w3-block w3-padding-small">
                        {% trans "Marche" %}
                    </button>
                    <button id="stop-{{ dev.uuid }}" class="w3-btn w3-pink w3-round w3-margin-2 w3-hover-opacity w3-block w3-padding-small">
                        {% trans "Arrêt" %}
                    </button>
	            </div>
                <div class="w3-col s5">
                    <div class="w3-padding-small">{% trans "Débit" %}: <span id="rate-{{ dev.uuid }}" class="w3-small"></span>&nbsp;l/mn</div>
                    <div class="w3-dark-xlight w3-border w3-padding w3-right-align w100">
                        <div id="flow-{{ dev.uuid }}" class="w3-wide w3-bold"></div><div>litres</div>
                    </div>
                    <div id="remaining-{{ dev.uuid }}" class="w3-small"></div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

{% endblock %}

{% block js_footer %}
    {{ block.super }}
    <script src="/static/relay/js/relay.js"></script>
    <script>
    const container = sId("relay-grid");
    const ws_route = "{{ ws_route }}";
    const columns  = "{{ columns }}";
    const devices   = {{ relay|safe }};

    function setGridColumns(col) {
        container.style.setProperty("--grid-columns", col);
        updateActiveButton(col);
    }

    // ---- Point d'entrée ----
    (async () => {
        const manager = new RelayManager(container, devices);
        await manager.start();

        const protocol = location.protocol === "https:" ? "wss" : "ws";
        for (const uuid in manager.overlays) {
            const wsUrl = `${protocol}://${location.host}/${ws_route}/${uuid}`;

            const socket = new MetadataSocket(wsUrl, uuid);
            socket.setOverlayManager(manager);
            socket.connect();
            manager.registerSocket(uuid, socket);
        }
        setGridColumns(columns);
    })();
    </script>
{% endblock %}