{% extends 'scanner/base.html' %}
{% load i18n %}
{% block columns %}{% endblock %}

{% block styles %}
    {{ block.super }}
	<link rel="stylesheet" href="/static/css/doc_database.css">
	<link rel="stylesheet" href="/static/css/doc_calibration.css>
	<link rel="stylesheet" href="/static/css/doc_experiments.css">
{% endblock %}

{% block content %}
<div class="doc-wrapper">

    <!-- ─── En-tête ─── -->
    <header class="doc-header">
        <div class="doc-header-inner">
            <div class="doc-header-icon" style="background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));">
                <i class="fas fa-flask"></i>
            </div>
            <div>
                <h1 class="doc-title">{% trans "Démarrer des expériences" %}</h1>
                <p class="doc-subtitle">{% trans "Sessions, expériences, configurations et import CSV — interface Administration Django" %}</p>
            </div>
        </div>
    </header>

    <!-- ─── Navigation latérale ─── -->
    <nav class="doc-sidenav" id="sidenav">
        <p class="nav-section-label">{% trans "Navigation" %}</p>
        <a href="#section-intro"       class="nav-link active"><i class="fas fa-info-circle"></i>   {% trans "Présentation" %}</a>
        <a href="#section-workflow"    class="nav-link">       <i class="fas fa-random"></i>         {% trans "Ordre de création" %}</a>
        <a href="#section-session"     class="nav-link">       <i class="fas fa-play-circle"></i>    {% trans "Session" %}</a>
        <a href="#section-session-data"  class="nav-link nav-sub"><i class="fas fa-table"></i>      {% trans "Données" %}</a>
        <a href="#section-session-tasks" class="nav-link nav-sub"><i class="fas fa-clock"></i>      {% trans "Tâches périodiques" %}</a>
        <a href="#section-experiment"  class="nav-link">       <i class="fas fa-vial"></i>           {% trans "Expérience" %}</a>
        <a href="#section-exp-data"    class="nav-link nav-sub"><i class="fas fa-table"></i>        {% trans "Données" %}</a>
        <a href="#section-exp-create"  class="nav-link nav-sub"><i class="fas fa-magic"></i>        {% trans "Création automatique" %}</a>
        <a href="#section-metrics"     class="nav-link nav-sub"><i class="fas fa-chart-line"></i>   {% trans "Métriques" %}</a>
        <a href="#section-config"      class="nav-link">       <i class="fas fa-cog"></i>            {% trans "Configuration puits" %}</a>
        <a href="#section-csv"         class="nav-link">       <i class="fas fa-file-csv"></i>       {% trans "Import CSV" %}</a>
    </nav>

    <!-- ─── Contenu principal ─── -->
    <main class="doc-content">

        <!-- ============================================================ -->
        <!-- SECTION 1 : Présentation                                      -->
        <!-- ============================================================ -->
        <section class="doc-section" id="section-intro">
            <div class="section-header">
                <span class="section-badge badge-green">{% trans "Administration Django" %}</span>
                <h2><i class="fas fa-flask"></i> {% trans "Démarrer des expériences" %}</h2>
                <p class="section-desc">
                    {% trans "C'est l'interface Administration Django qui est chargée de créer les données." %}
                </p>
            </div>

            <div class="info-row">
                <div class="info-card card-accent-green full-width">
                    <div class="card-icon"><i class="fas fa-th-large"></i></div>
                    <div class="card-body">
                        <h4>{% trans "Principe général" %}</h4>
                        <ul class="doc-list">
                            <li>
                                <i class="fas fa-link text-green"></i>
                                {% trans "Une expérience est toujours affectée à un multi-puits." %}
                            </li>
                            <li>
                                <i class="fas fa-th text-green"></i>
                                {% trans "Il y a 4 emplacements multi-puits, donc" %}
                                <strong>{% trans "4 expériences maximum par session." %}</strong>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- ============================================================ -->
        <!-- SECTION 2 : Ordre de création                                 -->
        <!-- ============================================================ -->
        <section class="doc-section" id="section-workflow">
            <div class="section-header">
                <span class="section-badge badge-blue">{% trans "Workflow" %}</span>
                <h2><i class="fas fa-random"></i> {% trans "Ordre de création" %}</h2>
                <p class="section-desc">{% trans "Les deux approches sont équivalentes — au choix." %}</p>
            </div>

            <div class="info-row">
                <!-- Option A -->
                <div class="info-card card-accent-indigo">
                    <div class="card-icon"><i class="fas fa-list-ol"></i></div>
                    <div class="card-body">
                        <h4><i class="fas fa-play-circle text-indigo"></i> {% trans "Option A — Session en premier" %}</h4>
                        <ol class="doc-steps">
                            <li><i class="fas fa-plus-circle"></i> {% trans "Créer la session" %}</li>
                            <li><i class="fas fa-vial"></i> {% trans "Créer les expériences (4 maxi)" %}</li>
                            <li><i class="fas fa-link"></i> {% trans "Revenir sur la session et ajouter les expériences" %}</li>
                        </ol>
                    </div>
                </div>

                <!-- Option B -->
                <div class="info-card card-accent-blue">
                    <div class="card-icon"><i class="fas fa-list-ol"></i></div>
                    <div class="card-body">
                        <h4><i class="fas fa-vial text-blue"></i> {% trans "Option B — Expériences en premier" %}</h4>
                        <ol class="doc-steps">
                            <li><i class="fas fa-vial"></i> {% trans "Créer les expériences" %}</li>
                            <li><i class="fas fa-plus-circle"></i> {% trans "Créer la session" %}</li>
                            <li><i class="fas fa-link"></i> {% trans "Ajouter les expériences à la session" %}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <!-- ============================================================ -->
        <!-- SECTION 3 : Session                                           -->
        <!-- ============================================================ -->
        <section class="doc-section" id="section-session">
            <div class="section-header">
                <span class="section-badge badge-purple">scanner_session</span>
                <h2><i class="fas fa-play-circle"></i> {% trans "Session" %}</h2>
            </div>

            <!-- Données importantes -->
            <div class="sub-subsection" id="section-session-data">
                <h4 class="table-title">
                    <i class="fas fa-table"></i> {% trans "Données importantes" %}
                </h4>
                <div class="info-row">
                    <div class="info-card card-accent-purple">
                        <div class="card-icon"><i class="fas fa-id-card"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Identification" %}</h4>
                            <ul class="doc-list">
                                <li><i class="fas fa-heading text-purple"></i> {% trans "Titre" %}</li>
                                <li><i class="fas fa-user text-purple"></i> {% trans "Auteur" %}</li>
                            </ul>
                        </div>
                    </div>

                    <!-- Expériences de la session -->
                    <div class="info-card card-accent-indigo">
                        <div class="card-icon"><i class="fas fa-layer-group"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Expériences d'une session" %}</h4>
                            <p>{% trans "Ajouter les expériences à la suite dans l'inline" %} <code>scanner_sessionexperiment</code>.</p>
                            <div class="tag-list">
                                <span class="tag tag-blue">{% trans "4 maximum" %}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tâches périodiques -->
            <div class="sub-subsection" id="section-session-tasks">
                <h4 class="table-title">
                    <i class="fas fa-clock"></i> {% trans "Options tâches périodiques" %}
                </h4>
                <div class="info-row">
                    <div class="info-card card-accent-orange">
                        <div class="card-icon"><i class="fas fa-file-export"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Date d'exportation" %}</h4>
                            <p>{% trans "Crée une tâche différée pour exporter automatiquement les images et vidéos à la date choisie." %}</p>
                            <div class="tag-list">
                                <span class="tag tag-orange">export_session</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-card card-accent-teal">
                        <div class="card-icon"><i class="fas fa-calendar-alt"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Date du balayage" %}</h4>
                            <p>{% trans "Planifie le déclenchement du balayage de la session à une date ultérieure." %}</p>
                            <div class="tag-list">
                                <span class="tag tag-teal">scanning_session</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ============================================================ -->
        <!-- SECTION 4 : Expérience                                        -->
        <!-- ============================================================ -->
        <section class="doc-section" id="section-experiment">
            <div class="section-header">
                <span class="section-badge badge-green">scanner_experiment</span>
                <h2><i class="fas fa-vial"></i> {% trans "Expérience" %}</h2>
            </div>

            <!-- Données -->
            <div class="sub-subsection" id="section-exp-data">
                <h4 class="table-title"><i class="fas fa-table"></i> {% trans "Données" %}</h4>
                <div class="info-row">
                    <div class="info-card card-accent-green">
                        <div class="card-icon"><i class="fas fa-id-card"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Identification" %}</h4>
                            <ul class="doc-list">
                                <li><i class="fas fa-heading text-green"></i> {% trans "Titre" %}</li>
                                <li><i class="fas fa-user text-green"></i> {% trans "Auteur" %}</li>
                                <li><i class="fas fa-comment-alt text-green"></i> {% trans "Commentaires" %}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="info-card card-accent-red">
                        <div class="card-icon"><i class="fas fa-exclamation-circle"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Paramètres critiques" %} <span class="badge-important">{% trans "IMPORTANT" %}</span></h4>
                            <ul class="doc-list">
                                <li>
                                    <i class="fas fa-th text-red"></i>
                                    {% trans "Choix du multi-puits" %}
                                </li>
                                <li>
                                    <i class="fas fa-stopwatch text-red"></i>
                                    {% trans "Durée de la prise de vue (secondes)" %}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Création automatique -->
            <div class="sub-subsection" id="section-exp-create">
                <h4 class="table-title">
                    <i class="fas fa-magic"></i> {% trans "Fonctionnement à la création" %}
                </h4>
                <div class="info-row">
                    <!-- experimentwell -->
                    <div class="info-card card-accent-blue">
                        <div class="card-icon"><i class="fas fa-circle-notch"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Création/MAJ" %} <code>scanner.experimentwell</code></h4>
                            <ul class="doc-list">
                                <li>
                                    <i class="fas fa-plus text-blue"></i>
                                    {% trans "Création de chaque puit individuel." %}
                                </li>
                                <li>
                                    <i class="fas fa-check-circle text-green"></i>
                                    {% trans "Par défaut, tous les puits sont actifs." %}
                                </li>
                            </ul>
                            <div class="alert-box alert-info">
                                <i class="fas fa-info-circle"></i>
                                {% trans "Il est possible d'ignorer le balayage d'un ou plusieurs puits au choix." %}
                            </div>
                        </div>
                    </div>

                    <!-- experimentconfig -->
                    <div class="info-card card-accent-cyan">
                        <div class="card-icon"><i class="fas fa-sliders-h"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Création/MAJ" %} <code>planarian.experimentconfig</code></h4>
                            <p>{% trans "Paramètres d'une expérience PlanarianScanner." %}</p>
                            <ul class="doc-list">
                                <li>
                                    <i class="fas fa-user-cog text-cyan"></i>
                                    {% trans "Créé depuis Django admin" %}
                                </li>
                                <li>
                                    <i class="fas fa-file-csv text-cyan"></i>
                                    {% trans "Ou import CSV depuis l'admin" %}
                                </li>
                                <li>
                                    <i class="fas fa-pencil-alt text-muted"></i>
                                    <em>{% trans "Données descriptives supplémentaires (à définir)" %}</em>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Métriques -->
            <div class="sub-subsection" id="section-metrics">
                <h4 class="table-title">
                    <i class="fas fa-chart-line"></i>
                    {% trans "Intégration métriques EthoVision XT + comportementales" %}
                </h4>

                <!-- Métriques par frame -->
                <h5 class="metrics-group-title">
                    <i class="fas fa-film"></i> {% trans "Métriques par frame" %}
                </h5>
                <div class="info-row">
                    <div class="info-card card-accent-blue metrics-card">
                        <div class="card-icon"><i class="fas fa-running"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Mobilité" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-blue">velocity</span>
                                <span class="tag tag-blue">distance</span>
                                <span class="tag tag-blue">moving</span>
                                <span class="tag tag-blue">mobility_state</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-card card-accent-orange metrics-card">
                        <div class="card-icon"><i class="fas fa-border-style"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Thigmotaxie" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-orange">dist_to_wall_mm</span>
                                <span class="tag tag-orange">near_wall</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-card card-accent-yellow metrics-card">
                        <div class="card-icon"><i class="fas fa-sun"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Phototaxie" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-yellow">dist_to_light_mm</span>
                                <span class="tag tag-yellow">heading_to_light_deg</span>
                                <span class="tag tag-yellow">fleeing_light</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-card card-accent-green metrics-card">
                        <div class="card-icon"><i class="fas fa-utensils"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Chimiotaxie" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-green">dist_to_food_mm</span>
                                <span class="tag tag-green">heading_to_food_deg</span>
                                <span class="tag tag-green">approaching_food</span>
                                <span class="tag tag-green">in_food_zone</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-card card-accent-purple metrics-card">
                        <div class="card-icon"><i class="fas fa-users"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Social" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-purple">nearest_neighbour_mm</span>
                                <span class="tag tag-purple">in_avoid_zone</span>
                                <span class="tag tag-purple">in_aggreg_zone</span>
                                <span class="tag tag-purple">chem_repulsion_level</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Métriques résumé -->
                <h5 class="metrics-group-title" style="margin-top:20px;">
                    <i class="fas fa-clipboard-list"></i> {% trans "Métriques résumé (summary)" %}
                </h5>
                <div class="info-row">
                    <div class="info-card card-accent-blue metrics-card">
                        <div class="card-icon"><i class="fas fa-running"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Mobilité" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-blue">movedCenter_pointTotal_mm</span>
                                <span class="tag tag-blue">velocity_mean_mm_s</span>
                                <span class="tag tag-blue">{% trans "durations par état" %}</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-card card-accent-orange metrics-card">
                        <div class="card-icon"><i class="fas fa-border-style"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Thigmotaxie" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-orange">thigmotaxis_pct_time_near_wall</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-card card-accent-yellow metrics-card">
                        <div class="card-icon"><i class="fas fa-sun"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Phototaxie" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-yellow">photo_pct_time_fleeing</span>
                                <span class="tag tag-yellow">photo_mean_dist_mm</span>
                                <span class="tag tag-yellow">photo_latency_s</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-card card-accent-green metrics-card">
                        <div class="card-icon"><i class="fas fa-utensils"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Chimiotaxie" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-green">chemo_pct_time_approaching</span>
                                <span class="tag tag-green">chemo_pct_time_in_zone</span>
                                <span class="tag tag-green">chemo_latency_s</span>
                                <span class="tag tag-green">chemo_mean_dist_mm</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-card card-accent-purple metrics-card">
                        <div class="card-icon"><i class="fas fa-users"></i></div>
                        <div class="card-body">
                            <h4>{% trans "Social" %}</h4>
                            <div class="metric-tags">
                                <span class="tag tag-purple">social_pct_time_avoiding</span>
                                <span class="tag tag-purple">social_pct_time_aggregating</span>
                                <span class="tag tag-purple">social_mean_nn_mm</span>
                                <span class="tag tag-purple">social_contact_events</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ============================================================ -->
        <!-- SECTION 5 : Configuration des puits                           -->
        <!-- ============================================================ -->
        <section class="doc-section" id="section-config">
            <div class="section-header">
                <span class="section-badge badge-teal">{% trans "Interface Scanner" %}</span>
                <h2><i class="fas fa-cog"></i> {% trans "Configuration des expériences" %}</h2>
                <p class="section-desc">{% trans "Sélectionner l'expérience et le puit à modifier pour compléter la fiche." %}</p>
            </div>
            <div class="info-row">
                <div class="info-card card-accent-teal full-width">
                    <div class="card-icon"><i class="fas fa-edit"></i></div>
                    <div class="card-body">
                        <h4>{% trans "Procédure" %}</h4>
                        <ol class="doc-steps">
                            <li><i class="fas fa-mouse-pointer"></i> {% trans "Sélectionner l'expérience dans la liste" %}</li>
                            <li><i class="fas fa-circle"></i> {% trans "Sélectionner le puit à modifier" %}</li>
                            <li><i class="fas fa-pen"></i> {% trans "Compléter la fiche de configuration" %}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <!-- ============================================================ -->
        <!-- SECTION 6 : Import CSV                                        -->
        <!-- ============================================================ -->
        <section class="doc-section" id="section-csv">
            <div class="section-header">
                <span class="section-badge badge-orange">{% trans "Import" %}</span>
                <h2><i class="fas fa-file-csv"></i> {% trans "Importer des configurations depuis CSV" %}</h2>
            </div>

            <div class="info-row">
                <!-- Menu gauche -->
                <div class="info-card card-accent-indigo">
                    <div class="card-icon"><i class="fas fa-bars"></i></div>
                    <div class="card-body">
                        <h4>{% trans "Menu gauche" %}</h4>
                        <ol class="doc-steps">
                            <li><i class="fas fa-play-circle"></i> {% trans "Sélectionner la session" %}</li>
                            <li><i class="fas fa-check-square"></i> {% trans "Cocher l'expérience souhaitée" %}</li>
                        </ol>
                    </div>
                </div>

                <!-- Zone de dépôt -->
                <div class="info-card card-accent-blue">
                    <div class="card-icon"><i class="fas fa-cloud-upload-alt"></i></div>
                    <div class="card-body">
                        <h4>{% trans "Zone d'import" %}</h4>
                        <ol class="doc-steps">
                            <li><i class="fas fa-file-csv"></i> {% trans "Glisser-déposer le fichier CSV" %}</li>
                            <li><i class="fas fa-upload"></i> {% trans "Cliquer sur Importer" %}</li>
                        </ol>
                    </div>
                </div>
            </div>

            <!-- Astuce CSV -->
            <div class="info-row">
                <div class="info-card card-accent-yellow full-width">
                    <div class="card-icon"><i class="fas fa-lightbulb"></i></div>
                    <div class="card-body">
                        <h4>{% trans "Astuce — Générer le template CSV depuis Django admin" %}</h4>
                        <ol class="doc-steps">
                            <li>
                                <i class="fas fa-th-list"></i>
                                {% trans "Aller dans" %}
                                <strong>{% trans "Planarian › Configurations des expériences" %}</strong>
                            </li>
                            <li>
                                <i class="fas fa-check-square"></i>
                                {% trans "Cocher le puit de l'expérience ou un groupe d'expériences" %}
                            </li>
                            <li>
                                <i class="fas fa-bolt"></i>
                                {% trans "Action :" %} <strong>{% trans "Exporter un template CSV…" %}</strong>
                            </li>
                            <li>
                                <i class="fas fa-download"></i>
                                {% trans "Vérifier l'emplacement du fichier téléchargé (dossier Download)." %}
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

    </main>
</div>
{% endblock %}

{% block js_footer %}
    {{ block.super }}
    <script>
	/* Mise en évidence du lien actif dans la navigation latérale */
	(function () {
	    const links    = document.querySelectorAll('.nav-link');
	    const sections = document.querySelectorAll('[id^="section-"]');
	
	    const observer = new IntersectionObserver(
	        (entries) => {
	            entries.forEach(entry => {
	                if (entry.isIntersecting) {
	                    links.forEach(l => l.classList.remove('active'));
	                    const target = document.querySelector(`.nav-link[href="#${entry.target.id}"]`);
	                    if (target) target.classList.add('active');
	                }
	            });
	        },
	        { rootMargin: '-10% 0px -80% 0px' }
	    );
	
	    sections.forEach(s => observer.observe(s));
	})();
	</script>
{% endblock %}
