{% extends "scanner/base.html" %}
{% load i18n home_tags scanner_tags %}

{% 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.name }}</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.multiwell }}</label>
            {% endfor %}       
        </div>
        {% if current_session.id and current_experiment %}
            {% multiwell_cards current_session.id current_experiment %}
        {% endif %}
    </form>
    {% if current_session.id %}
    <a href="{% url 'scanner:main' %}"  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>
    {% 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);
	            }, 5000); // 5 seconds
	        });
	    });
	</script>
{% endblock %}