{% extends "base.html" %}
{% block titre %}{{ v.titre }}{% endblock %}
{% block tete %}<link rel="stylesheet" href="{{ base }}/static/leaflet.css"><script src="{{ base }}/static/leaflet.js"></script>{% endblock %}
{% block fin %}<script src="{{ base }}/static/editeur.js"></script>{% endblock %}
{% block contenu %}
<div class="entete-page">
  <div>
    <p class="fil"><a href="{{ base }}/">Mes voyages</a> › {{ v.rubrique }}</p>
    <h1>{{ v.titre }}</h1>
    <p class="discret">{{ [periode(v.debut, v.fin), v.moto]|select|join(" · ") }} <code>{{ v.chemin }}</code></p>
  </div>
  <div class="actions">
    {% if v.genere %}<a class="bouton" href="{{ base }}/site/{{ v.chemin }}/index.html" target="_blank">Voir la page ↗</a>{% endif %}
  </div>
</div>

<nav class="onglets">
  <a href="#journees">Journées</a>
  <a href="#carte">Carte et corrections</a>
  <a href="#sources">Sources</a>
  <a href="#infos">Infos et récit</a>
  <a href="#generer">Générer</a>
</nav>

<section class="onglet" id="onglet-journees">
  <div class="onglet-aide"><button class="bouton-aide" hx-get="{{ base }}/aide/journees?panneau=1" hx-target="#aide-contenu" data-ouvrir-aide title="Aide">? Aide</button></div>
  <div id="analyse" hx-get="{{ base }}/voyage/analyse?v={{ v.chemin|url }}" hx-trigger="load, sources-modifiees from:body, tache-finie from:body">
    <p class="chargement">Lecture des traces…</p>
  </div>
</section>

<section class="onglet" id="onglet-carte">
  <div class="onglet-aide"><button class="bouton-aide" hx-get="{{ base }}/aide/carte?panneau=1" hx-target="#aide-contenu" data-ouvrir-aide title="Aide">? Aide</button></div>
  <div id="editeur" class="editeur" data-voyage="{{ v.chemin }}">
    <aside class="editeur-panneau">
      <label>Jour
        <select id="ed-jour"><option value="">Tous les jours</option></select>
      </label>
      <div class="ed-cases">
        <label class="choix"><input type="checkbox" id="ed-photos" checked> <span class="mk photo"></span> Photos</label>
        <label class="choix"><input type="checkbox" id="ed-videos" checked> <span class="mk video"></span> Vidéos</label>
      </div>
      <p class="aide">Glissez un marqueur pour corriger sa position ; un clic l'affiche.
        <span class="mk photo deplace"></span> = position corrigée à la main.</p>
      <div id="ed-mode" class="ed-mode" hidden></div>

      <h4>Zones masquées</h4>
      <p class="aide">Les points de trace situés dans ces zones sont retirés des pages : autour de chez soi, ou sur une erreur du GPS.</p>
      <button id="ed-nouvelle-zone">+ Masquer une zone</button>
      <div id="ed-brouillon" class="ed-brouillon" hidden>
        <label>Rayon : <strong id="ed-rayon-texte">200 m</strong>
          <input type="range" id="ed-rayon" min="20" max="3000" step="10" value="200">
        </label>
        <label class="choix"><input type="checkbox" id="ed-portee-site"> Zone privée : la retirer de tous les voyages</label>
        <p><button class="principal" id="ed-zone-ok">Enregistrer la zone</button> <button id="ed-zone-annuler">Annuler</button></p>
      </div>
      <ul id="ed-zones" class="ed-liste"></ul>

      <h4>Médias sans position <span id="ed-nb-sans" class="compte"></span></h4>
      <p class="aide">Cliquez sur un nom puis sur la carte pour le placer.</p>
      <ul id="ed-sans" class="ed-liste"></ul>
      <p id="ed-etat" class="aide"></p>
    </aside>
    <div id="ed-carte" class="editeur-carte"><p class="chargement">Chargement de la carte…</p></div>
  </div>
</section>

<section class="onglet" id="onglet-sources">
  <div class="onglet-aide"><button class="bouton-aide" hx-get="{{ base }}/aide/sources?panneau=1" hx-target="#aide-contenu" data-ouvrir-aide title="Aide">? Aide</button></div>
  <p class="aide">Indiquez où se trouvent les fichiers d'origine : un ou plusieurs dossiers (ou fichiers) par type, sur n'importe quel disque.
  RTG ne les modifie jamais : les traces sont recopiées par journée dans <code>routes/</code>, les photos dans <code>photos/</code> (HEIC converties en JPEG),
  et les vidéos sont lues directement pour l'encodage.</p>
  {% include "_sources.html" %}
</section>

<section class="onglet" id="onglet-infos">
  <div class="onglet-aide"><button class="bouton-aide" hx-get="{{ base }}/aide/infos?panneau=1" hx-target="#aide-contenu" data-ouvrir-aide title="Aide">? Aide</button></div>
  <form class="formulaire" hx-post="{{ base }}/voyage/infos" hx-target="find .retour">
    <input type="hidden" name="v" value="{{ v.chemin }}">
    <label>Titre <input name="titre" value="{{ cfg.titre }}"></label>
    <label>Moto <input name="moto" value="{{ cfg.moto }}" placeholder="facultatif : affichée dans la légende de la carte globale"></label>
    <p class="aide">Rubrique : <strong>{{ v.rubrique }}</strong> (elle vient du dossier où est rangé le voyage).</p>
    <p><button class="principal">Enregistrer</button> <span class="retour"></span></p>
  </form>
  <form class="formulaire large" hx-post="{{ base }}/voyage/recit" hx-target="find .retour">
    <input type="hidden" name="v" value="{{ v.chemin }}">
    <label>Récit (<code>voyage.md</code>, en Markdown)
      <textarea name="recit" rows="18" spellcheck="true">{{ recit }}</textarea>
    </label>
    <p class="aide">Liens spéciaux : <code>[Carte du jour](jour:2026-08-01)</code> ouvre la carte d'un jour,
    <code>[Le col](media:photos/IMG_4831.jpeg)</code> un média du voyage.</p>
    <p><button class="principal">Enregistrer le récit</button> <span class="retour"></span></p>
  </form>
</section>

<section class="onglet" id="onglet-generer">
  <div class="onglet-aide"><button class="bouton-aide" hx-get="{{ base }}/aide/generer?panneau=1" hx-target="#aide-contenu" data-ouvrir-aide title="Aide">? Aide</button></div>
  <div hx-get="{{ base }}/voyage/infos-utiles?v={{ v.chemin|url }}" hx-trigger="load, sources-modifiees from:body, tache-finie from:body"><p class="chargement">Calcul des tailles…</p></div>
  <div id="compression" hx-get="{{ base }}/voyage/compression?v={{ v.chemin|url }}" hx-trigger="load, tache-finie from:body" hx-swap="outerHTML"><p class="chargement">Lecture de la compression des vidéos…</p></div>
  <form class="formulaire" hx-post="{{ base }}/tache/lancer" hx-target="#tache-zone">
    <input type="hidden" name="v" value="{{ v.chemin }}">
    <fieldset>
      <legend>Vidéos</legend>
      <label class="choix"><input type="radio" name="refaire" value="manquantes" checked> Encoder seulement celles qui manquent</label>
      <label class="choix"><input type="radio" name="refaire" value="differentes"> Réencoder aussi celles faites avec d'autres réglages <span class="aide">(lus dans chaque fichier)</span></label>
      <label class="choix"><input type="radio" name="refaire" value="toutes"> Tout réencoder</label>
      <p class="aide">Versions concernées :
        <label class="choix" style="display:inline"><input type="radio" name="versions" value="deux" checked> les deux</label>
        <label class="choix" style="display:inline"><input type="radio" name="versions" value="1080p"> 1080p seulement</label>
        <label class="choix" style="display:inline"><input type="radio" name="versions" value="720p"> 720p seulement</label></p>
      <label class="choix"><input type="checkbox" name="sans_compression"> Ne pas toucher aux vidéos <span class="aide">(photos, positions et pages seulement)</span></label>
    </fieldset>
    <label class="choix"><input type="checkbox" name="force"> Refaire aussi les photos web et les pages, même à jour</label>
    <p>
      <button class="principal" name="quoi" value="generer">Générer le voyage</button>
      <button name="quoi" value="compresser">Encoder les vidéos seulement</button>
    </p>
  </form>
  <div id="tache-zone">{% if tache and tache.voyage == v.chemin %}{% include "_tache.html" %}{% endif %}</div>
</section>
{% endblock %}