{% extends 'base.html' %}
{% load i18n home_tags  %}
{% block header %}
    <div class="w3-bar w3-dark-light">
        <a href="#" class="w3-bar-item w3-mobile w3-btn w3-hover-opacity w3-xlarge w3-text-yellow" onclick="toggleSidebar()" title="{% trans 'Barre de côté' %}">
           <i class="fa-solid fa-right-left"></i>
        </a>
        <a href="#" class="w3-bar-item w3-mobile w3-btn w3-hover-opacity w3-right w3-xlarge w3-text-green" onclick="goFullscreen()" title="{% trans 'Ecran plein' %}">
            <i class="fa-solid fa-maximize"></i>
        </a>
    </div>
{% endblock  %}
{% block sidebar %}
	<div class="w3-dark-xlight w3-border-bottom">
	    <div class="w3-large w3-bold"><a href="/" class="w3-btn w3-hover-opacity w100 w3-left-align">{{ app_title }}</a></div>
	    <div class="w3-padding">
	        <span class="w3-padding">{{ request.user.username }}</span>
		    <form method="post" action="{% url 'logout' %}" class="w3-right">
		        {% csrf_token %}
		        <button class="w3-bar-item w3-btn w3-hover-opacity" type="submit" title="{% trans 'Déconnexion' %}">
                    <i class="fa-solid fa-right-from-bracket"></i>
		        </button>
		    </form>
	    </div>
	</div>
	{% block system %}
	<div class="w3-light-blue w3-padding-large">
        <div id="shm-used" class="w3-green w3-round" style="height:0.5em; width: var(--shm-used, 0%);" title="{% trans 'Mémoire partagée' %}"></div>
        <div id="ramdisk-used" class="w3-purple w3-round" style="height:0.5em;width: var(--ramdisk-used, 0%); margin: 0.35em 0" title="{% trans 'Disque RAM' %}"></div>
        <div id="mem-used" class="w3-deep-orange w3-round" style="height:0.5em;width: var(--mem-used, 0%); margin: 0.35em 0" title="{% trans 'Mémoire RAM' %}"></div>
	    <div id="cpu-used" class="w3-indigo w3-round" style="height:0.5em;width: var(--cpu-used, 0%); margin: 0.35em 0" title="{% trans 'Charge CPU' %}"></div>
	    <div id="disk-used" class="w3-amber w3-round" style="height:0.5em;width: var(--disk-used, 0%); margin: 0.35em 0" title="{% trans 'Disque /' %}"></div>
	</div>
	{% endblock  %}
	{% block columns %}
	<div class="w3-dark-light">
        <div class=" w3-padding w3-border-bottom">
            <span>{% trans "Grille" %}</span><br>
            <span>
                {% x_range 2 6 as cols %}
                {% for c in cols %}
                <button id="swap-{{ c }}" class="w3-btn w3-badge w3-padding-small w3-sand w3-tiny" onclick="setGridColumns({{ c }})">{{ c }}</button>
                {% endfor %}
            </span>
        </div>
	</div>
	<script>
		function updateActiveButton(n) {
		    document.querySelectorAll('[id^="swap-"]').forEach(btn => {
		        btn.classList.remove('w3-blue', 'w3-sand'); btn.classList.add('w3-sand');
		    });
		    const active = sId('swap-'+ n);
		    if (active) { active.classList.remove('w3-sand'); active.classList.add('w3-blue');
		    }
		}
	</script>
	{% endblock  %}
	{% block sidebar_list %}
	<div class="w3-dark-light w3-padding-small">
        <a href="{% url 'relay:dashboard' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
            <i class="fa-solid fa-table-cells w3-text-green"></i> {% trans "Tableau de bord" %}
        </a>
        {% block sidebar_command %}{% endblock  %}

        <a href="{% url 'relay:admin' %}"  class="w3-bar-item w3-btn w3-hover-opacity w3-margin-top-6">
            <i class="fa-solid fa-gear w3-text-pink"></i> {% trans "Administration base de données" %}
        </a>
         <a href="{% url 'relay:supervisor' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
            <i class="fa-solid fa-gears w3-text-purple"></i> {% trans "Supervisor" %}
        </a>
	</div>
	{% endblock  %}
{% endblock  %}
{% block content %}{% endblock %}

{% block js_footer %}
    {{ block.super }}
    <script>
    const stats_endpoint =  "{% url 'relay:api_stats' %}";
    </script>
    <script src="/static/relay/js/stats.js"></script>
{% endblock %}