{% extends "scanner/base.html" %}
{% load i18n home_tags scanner_tags %}
{% block styles %}
    {{ block.super }}
    <link href="/static/planarian/css/planarian.css" rel="stylesheet">
{% endblock %}
{% block columns %}{% endblock %}

{% block sidebar_list %}
    <a href="/"  class="w3-bar-item w3-btn w3-hover-opacity"><i class="fa-solid fa-house w3-text-orange w3-xlarge"></i> {% trans "Retour accueil" %}</a>
    <form method="post" class="w3-bar-item" action="">
        {% csrf_token %}
        <select id="_sid" name="_sid" class="w3-select w3-margin-bottom" onchange="this.form.submit()" title="{% trans "Ensemble d'expériences" %}">
            <option value="0">---- {% trans "Session" %}</option>
            {% for s in sessions %}
            <option value="{{ s.id }}" {% if s.id == current_session.id %}selected{% endif %}>{{ s }}</option>
            {% endfor %}
        </select>
        <div class="w3-margin-left w3-margin-bottom">
            {% for ss in experiments %}
            <input class="" type="radio" name="_expid" value="{{ ss.id }}" {% if ss.id == current_experiment.id %}checked{% endif %} onchange="this.form.submit()" >
            <label>{{ ss }}</label>
            {% endfor %}       
        </div>
    </form>
    {% block export_csv %}
	    {% if current_session and current_experiment %}
	    {% url "planarian:api-export-csv"  as url_export %}
	    <a href="#" class="w3-bar-item w3-btn w3-hover-opacity" onclick="export_csv('{{ url_export }}', {{ current_experiment.id }}, 'experiment_csv')">
	        <i class="fa-solid fa-file-export w3-text-red w3-xlarge"></i> {% trans "Exporter les metrics de l'expérience" %}<br>
	        <span class="w3-margin-left-5">&nbsp;$> {{ export_csv_destination }}
	    </a>
	    {% endif %}   
    {% endblock %}
{% endblock %}

{% block js_footer %}
    {{ block.super }}
	<script>
	    // Auto-dismiss messages after 5 seconds
	    document.addEventListener('DOMContentLoaded', function() {
	        const messages = document.querySelectorAll('.alert');
	        messages.forEach(function(message) {
	            setTimeout(function() {
	                // Fade out effect
	                message.style.transition = 'opacity 0.5s ease-out';
	                message.style.opacity = '0';
	                
	                // Remove from DOM after fade
	                setTimeout(function() {
	                    message.remove();
	                }, 500);
	            }, 15000); // 15 seconds
	        });
	    });
	    function export_csv(url, pid, mode) {
	        fetch(url, {
	            method: 'POST',
	            headers: { 'Content-Type': 'application/json' },
	            body: JSON.stringify({
	                action: mode,
	                pid: pid,
	            })
	        })
	        .then(response => response.json())
	        .then(res      => { alert(res.msg);  })
	        .catch(error   => { console.error('Erreur:', error); });       
	    }
   
	   
	</script>
{% endblock %}