{% extends "planarian/base.html" %}
{% load i18n %}

{% block content %}
<div class="w3-container w3-padding" style="max-width:760px; margin:auto;">
{% if current_session and current_experiment %}
    {% include "inc/alert.html" %}
    <!-- Explication -->
    <div class="w3-panel w3-pale-blue w3-round w3-margin-bottom">
        <p>
            {% trans "Sélectionnez l'expérience, le puits et le type d'enregistrement à exporter." %}
            {% trans "Le fichier CSV sera généré depuis ReductStore et téléchargé directement." %}
        </p>
        <p class="w3-small w3-text-grey" style="margin:0;">
            {% trans "Colonnes exportées compatibles EthoVision XT : distance, vitesse, états de mobilité, thigmotactisme." %}
        </p>
    </div>
    <!-- Formulaire -->
    <form method="post" novalidate>
        {% csrf_token %}
        <input type="hidden" id="_sid" name="_sid" value="{{ current_session.id }}">
        <input type="hidden" id="_expid" name="_expid" value="{{ current_experiment.id }}">
        
        <div class="w3-card-4 w3-border w3-round w3-round-large">
            <header class="w3-container w3-blue w3-round w3-round-top-large">
                <h3 class="w3-text-white">{% trans "Paramètres d'export" %}</h3>
            </header>
            <div class="w3-container w3-padding-24">
                <!-- Ligne 1 : expérience + puits -->
                <div class="w3-row-padding w3-margin-bottom">

                    <div class="w3-col m7 s12 w3-margin-bottom">
                        <label class="w3-text-blue"><b>{% trans "Expérience" %}</b></label>
                        <input type="text" name="experiment" value="{{ current_experiment.identifier }}" readonly/>
                    </div>
                    <div class="w3-col m5 s12 w3-margin-bottom">
                        <label class="w3-text-blue"><b>{% trans "Puits" %}</b></label>
                        <select name="well">
                            {% for well in well_choices %}
                            <option value="{{ well.name }}">{{ well.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <!-- Ligne 2 : planaire + type d'enregistrement -->
                <div class="w3-row-padding w3-margin-bottom">
                    <div class="w3-col m4 s12 w3-margin-bottom">
                        <label class="w3-text-blue"><b>{% trans "Index planaire" %}</b></label>        
                        <p class="w3-small w3-text-light-grey" style="margin:0 0 4px;">
                            {% trans "Index du planaire dans le puits (commence à 0)" %}
                        </p>
                        <input type="number" name="planarian" step="1"  min="0" max="20" value="{{ planarian }}" />
                    </div>
                    <div class="w3-col m8 s12 w3-margin-bottom">
                        <label class="w3-text-blue"><b>{% trans "Type d'enregistrement" %}</b></label>
                        <p class="w3-small w3-text-light-grey" style="margin:0 0 4px;">
                            {% trans "Frame par frame : une ligne par image. Résumé : métriques agrégées de la session." %}
                        </p>
                        <select name="record_type">
                            <option value="frame">{% trans "Frame par frame" %}</option>
                            <option value="summary">{% trans "Résumé" %}</option>
                        </select>                       
                    </div>
                </div>
                <!-- Ligne 3 : plage temporelle (optionnel) -->
                <div class="w3-border-top w3-padding-top w3-margin-top">
                    <p class="w3-text-blue-grey">
                        <b>{% trans "Plage temporelle" %}</b>
                        <span class="w3-small w3-text-grey w3-margin-left">
                            {% trans "(optionnel — laisser vide pour exporter toute la session)" %}
                        </span>
                    </p>
                    <div class="w3-row-padding">
                        <div class="w3-col m6 s12 w3-margin-bottom">
                            <label class="w3-text-blue-grey">{% trans "Début (UTC)" %}</label>
                            <input type="datetime-local" class="datetime" name="start_dt">
                        </div>
                        <div class="w3-col m6 s12 w3-margin-bottom">
                            <label class="w3-text-blue-grey">{% trans "Fin (UTC)" %}</label>
                            <input type="datetime-local" class="datetime" name="stop_dt">
                        </div>
                    </div>
                </div>
            </div><!-- fin padding -->
        </div><!-- fin card -->

        <!-- Boutons -->
        <div class="w3-row-padding w3-margin-top">
            <div class="w3-col s12">
                <button type="submit" name="valid" class="w3-button w3-blue w3-large w3-padding-large" value="ok">
                    📥 {% trans "Générer et télécharger le CSV" %}
                </button>
                <a href="/"
                   class="w3-button w3-light-grey w3-round w3-large w3-padding-large w3-margin-left">
                    ✖ {% trans "Annuler" %}
                </a>
            </div>
        </div>

    </form>
    <!-- Rappel des colonnes exportées -->
    <div class="w3-card w3-round-large w3-margin-top w3-border w3-round w3-round-large w3-margin-bottom">
        <header class="w3-container w3-blue-grey w3-round w3-round-top-large">
            <h4 class="w3-text-white" style="margin:8px 0;">
                {% trans "Colonnes du fichier CSV exporté" %}
            </h4>
        </header>
        <div class="w3-container w3-padding-16">
            <div class="w3-row-padding">

                <div class="w3-col m6 s12">
                    <p class="w3-text-blue-grey w3-small"><b>{% trans "Identification / position" %}</b></p>
                    <ul class="w3-ul w3-small w3-border w3-round">
                        <li><code>timestamp</code></li>
                        <li><code>x_mm</code> / <code>y_mm</code></li>
                        <li><code>cx_px</code> / <code>cy_px</code></li>
                        <li><code>area_px</code></li>
                        <li><code>axial_pos</code> / <code>axial_speed</code></li>
                    </ul>
                </div>

                <div class="w3-col m6 s12">
                    <p class="w3-text-blue-grey w3-small"><b>{% trans "Métriques EthoVision XT" %}</b></p>
                    <ul class="w3-ul w3-small w3-border w3-round">
                        <li><code>velocity_mm_s</code> — {% trans "vitesse instantanée" %}</li>
                        <li><code>total_distance_mm</code> — {% trans "distance cumulée" %}</li>
                        <li><code>moving</code> / <code>duration_moving_s</code></li>
                        <li><code>mobility_state</code> — {% trans "Immobile / Mobile / Highly mobile" %}</li>
                        <li><code>dist_to_wall_mm</code> / <code>near_wall</code></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div><!-- fin container -->
<style>
    input[type="text"],
    input[type="number"],
    input[type="datetime-local"],
    select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 15px;
        box-sizing: border-box;
        background-color: #fafafa;
        transition: border-color 0.2s;
    }
    input:focus, select:focus {
        border-color: #2196F3;
        outline: none;
        background-color: #fff;
    }
</style>
{% else %}
<div class="w3-container w3-padding-64 w3-margin" style="max-width:760px; margin:auto;">
    <h3 class="w3-panel w3-blue w3-round-xlarge w3-padding-64 w3-center"> {% trans "Choisir une session" %}</h3>
</div>
{% endif %}
{% endblock %}