{% 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>
    {% if current_session.id and current_experiment.id %}
    <hr class="w3-bar-item divider w3-grey">
    <form method="post" class="w3-bar-item" action="{% url 'planarian:export-csv' %}">
        {% csrf_token %}
        <input type="hidden" name="_sid" value="{{ current_session.id }}">
        <input type="hidden" name="_expid" value="{{ current_experiment.id }}">       
        <button type="submit" class="w3-button w3-blue w3-round w3-padding w3-margin-top">📥 {% trans "Exporter CSV" %}</button>   
    </form>   
    {% endif %}    
{% 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
	        });
	    });
	</script>
{% endblock %}