{% 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>
        <div class="w3-bar-item w3-btn w3-hover-opacity w3-xlarge">
             {{ choice_title }}
        </div>
        <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 class="w3-dropdown-hover w3-right">	    
		    <button class="w3-button w3-dark-plus">&#9776;&nbsp;<span>{{ request.user.username }}</span></button>
		    <div class="w3-dropdown-content w3-bar-block w3-border w3-dark-low"  style="right:.25em;">
                {% if request.user.is_superuser %}
	                <a href="{% url 'scanner:admin' %}"  class="w3-bar-item w3-btn w3-hover-opacity" title="{% trans "Accès django" %}">
	                    <i class="fa-solid fa-gear w3-text-pink"></i> {% trans "Base de données" %}
	                </a>
                    <a href="{% url 'scanner:supervisor' %}"  class="w3-bar-item w3-btn w3-hover-opacity" target="_blank" title="{% trans "Accès système" %}">
                         <i class="fa-solid fa-gears w3-text-purple"></i> {% trans "Supervision des services" %}
                    </a>
                    	          
	                <a href="{% url 'scanner:reductstore' %}"  class="w3-bar-item w3-btn w3-hover-opacity" target="_blank" title="{% trans "Accès système" %}">
	                    <img class="w3-no-padding" src="/static/img/reductstore.png" style="width: 24px"> {% trans "Base de données Reductstore" %}
	                </a>
	                <a href="{% url 'scanner:adminer' %}"  class="w3-bar-item w3-btn w3-hover-opacity" target="_blank" title="{% trans "Accès système" %}">
	                    <img class="w3-no-padding" src="/static/img/adminer.png" style="width: 28px"> {% trans "Base de données mariadb" %}
	                </a>
	                <a href="{% url 'scanner:logs_scheduler' %}"  class="w3-bar-item w3-btn w3-hover-opacity" target="_blank">
	                     <i class="fa-regular fa-file-lines w3-text-orange"></i> {% trans "Logs des planifications" %}
	                </a>   
	                <a href="{% url 'scanner:logs_worker' %}"  class="w3-bar-item w3-btn w3-hover-opacity" target="_blank">
	                     <i class="fa-regular fa-file-lines w3-text-amber"></i> {% trans "Logs des services" %}
	                </a>    		        
                {% endif %}      
		        <div class="w3-bar-item w3-blue-grey"><i class="fa-solid fa-circle-question w3-text-amber"></i> {% trans "Guides" %}</div>
                <a href="{% url 'scanner:documentation' 'doc_database' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                     <i class="fa-solid fa-book w3-text-green"></i> {% trans "Descriptif des données" %}
                </a>             
                <a href="{% url 'scanner:documentation' 'doc_calibration' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                     <i class="fa-solid fa-book w3-text-pink"></i> {% trans "Calibration des multi-puits" %}
                </a>   
                <a href="{% url 'scanner:documentation' 'doc_experiment' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                     <i class="fa-solid fa-book w3-text-khaki"></i> {% trans "Démarrer des expériences" %}
                </a> 
                 <a href="{% url 'scanner:documentation' 'doc_scanning' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                     <i class="fa-solid fa-book w3-text-orange"></i> {% trans "Balayage des puits" %}
                </a>                               
                <a href="{% url 'scanner:documentation' 'doc_results' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                     <i class="fa-solid fa-book w3-text-amber"></i> {% trans "Exploiter les résultats des expériences" %}
                </a>         
                 <a href="{% url 'scanner:documentation' 'doc_medias' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                     <i class="fa-solid fa-photo-film w3-text-purple"></i> {% trans "Gestionnaires des médias" %}
                </a>                             
                <hr class="w3-bar-item divider w3-grey">       	        
		        <form method="post" action="{% url 'logout' %}">
		            {% csrf_token %}
		            <button class="w3-bar-item w3-btn w3-hover-opacity" type="submit">
		               <i class="fa-solid fa-right-from-bracket w3-text-red"></i> {% trans 'Déconnexion' %}
		            </button>
		        </form>
		    </div>
         </div>

    </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 }}<br>
	           <span class="w3-tiny">{{ app_sub_title }}</span>
	       </a>
	    </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="swap-used" class="w3-deep-purple w3-round" style="height:0.5em;width: var(--swap-used, 0%); margin: 0.35em 0" title="{% trans 'Swap disk' %}"></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">
            <div>{% trans "Grille" %}</div>
            <div style="width:100%">
                {% x_range 1 13 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 %}
            </div>
        </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">
        {% block sidebar_command %}{% endblock  %}
        {% block sidebar_smenu %}
            {% if request.user.is_superuser or request.user.is_staff %}
                <a href="{% url 'scanner:session_view' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                    <i class="fa-solid fa-gear w3-text-purple w3-xlarge"></i> {% trans "Création de sessions d'expériences" %}
                </a>
                <hr class="w3-bar-item divider w3-grey">          
                <a href="{% url 'scanner:experiment_view' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                    <i class="fa-solid fa-gear w3-text-pink w3-xlarge"></i> {% trans "Gestions des expériences" %}
                </a>             
                <a href="{% url 'scanner:experimentconfig_view' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                    <i class="fa-solid fa-gears w3-text-pink w3-xlarge"></i> {% trans "Configuration des expériences" %}
                </a>
                {% if conf.tracking %} 
                <a href="{% url 'planarian:import-params' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                     <i class="fa-solid fa-file-import w3-text-lime w3-xlarge"></i> {% trans "Importer des configurations depuis CSV" %}
                </a>   
                {% endif %}                   
                <a href="{% url 'scanner:calibration' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                    <i class="fa-solid fa-wrench w3-text-orange w3-xlarge"></i> {% trans "Calibration" %}
                </a>
                <hr class="w3-bar-item divider w3-grey w3-margin-bottom"> 
            {% endif %}
            <a href="{% url 'scanner:scanning' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                <i class="fa-solid fa-film w3-text-green w3-xlarge""></i> {% trans "Balayage multi-puits" %}
            </a>
            <div class="w3-bar-item w3-blue-grey"><i class="fa-solid fa-square-poll-vertical w3-text-amber"></i> {% trans "Résultats " %}</div>
            {% if conf.tracking %}
            <a href="{% url 'planarian:export-csv' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                <i class="fa-solid fa-file-export w3-text-lime w3-xlarge"></i> {% trans "Export CSV des expériences" %}
            </a>    
            {% endif %}               
            <a href="{% url 'scanner:images' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                 <i class="fa-regular fa-images w3-text-cyan w3-xlarge" w3-xlarge""></i> {% trans "Gestionnaire d'images" %}
            </a>
            <a href="{% url 'scanner:replay' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                <i class="fa-solid fa-podcast w3-text-amber w3-xlarge"r"></i>  {% trans "Redifusion vidéos" %}
            </a>
            <a href="{% url 'scanner:export_medias' %}"  class="w3-bar-item w3-btn w3-hover-opacity">
                <i class="fa-solid fa-file-export w3-text-pink w3-xlarge"></i> {% trans "Exporter les fichiers multimédias" %}
            </a>            
            
        {% endblock %}
	</div>
	{% endblock %}
{% endblock  %}
{% block content %}{% endblock %}

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


