{#- =============================================================================
    Morceaux de HTML insérés par genere_carte.py dans les pages folium.
    Échappement automatique : seules les variables marquées |safe passent telles
    quelles. Les chemins arrivent déjà encodés pour les URL (quote()).
    Les styles sont dans carte.css, le comportement dans carte.js.
    ============================================================================= -#}

{# Feuille de style et script communs, avec un numéro de version pour que les
   navigateurs ne gardent pas une ancienne copie en cache. #}
{% macro entete(prefixe, version) -%}
<link rel="stylesheet" href="{{ prefixe }}assets/carte.css?v={{ version }}">
<script src="{{ prefixe }}assets/carte.js?v={{ version }}"></script>
{%- endmacro %}


{% macro epingle(couleur, icone) -%}
<div class="pin" style="--c:{{ couleur }}"><div class="pin-tete"><i class="fa fa-{{ icone }}"></i></div><div class="pin-tige"></div></div>
{%- endmacro %}


{# Popup affichée au clic sur la trace d'une journée (carte générale). #}
{% macro popup_trace(jour, couleur, lien) -%}
<div class="popup-trace"><b>📅 {{ jour }}</b><br><a class="btn-jour" style="--c:{{ couleur }}" href="{{ lien }}" target="_top">Détails</a></div>
{%- endmacro %}


{# photos : liste de {nom, src (version web), href (original)} #}
{% macro popup_photos(photos) -%}
<div class="slider-container">
  <div class="slides">
  {%- for p in photos %}
    <div class="slide"{% if not loop.first %} style="display:none"{% endif %}>
      <div class="file-header">{{ p.nom }}</div>
      <a href="{{ p.href }}" target="_blank"><img src="{{ p.src }}" alt="{{ p.nom }}" loading="lazy"></a>
    </div>
  {%- endfor %}
  </div>
  {%- if photos|length > 1 %}
  <button class="nav-btn prev" onclick="moveSlide(this, -1)">&#10094;</button>
  <button class="nav-btn next" onclick="moveSlide(this, 1)">&#10095;</button>
  <div class="slide-counter">1/{{ photos|length }}</div>
  {%- endif %}
</div>
{%- endmacro %}


{# 720p H.264 chargé par défaut (lisible partout), 1080p HEVC à la demande.
   preload="none" : rien n'est téléchargé avant l'ouverture de la popup. #}
{% macro popup_video(nom, mobile, hd, apercu) -%}
<div class="popup-video">
  <div class="header-row">
    <span class="file-name" title="{{ nom }}">{{ nom }}</span>
    <div class="quality-controls">
      <span class="quality-btn active-720" data-src="{{ mobile }}" onclick="changeQuality(this)">720p</span>
      <span class="quality-btn" data-hevc="1" data-src="{{ hd }}" onclick="changeQuality(this)">1080p</span>
    </div>
  </div>
  <video controls playsinline webkit-playsinline preload="none" src="{{ mobile }}" data-fallback="{{ mobile }}"
         {%- if apercu %} data-poster="{{ apercu }}"{% endif %}></video>
  <div class="hevc-note">Le 1080p est encodé en H.265/HEVC, que ce navigateur ne sait pas décoder.
    La lecture en 720p fonctionne normalement ; pour la haute définition, utilise Safari, Chrome ou Edge.</div>
</div>
{%- endmacro %}


{# contenu : HTML du récit (voyage.md converti), déjà prêt. #}
{% macro journal(contenu) -%}
<div id="journal-panel">
  <button class="close-btn" onclick="toggleJournal(false)">&times;</button>
  <div class="journal-content">{{ contenu|safe }}</div>
</div>
<button class="btn-flottant btn-journal" onclick="toggleJournal(true)">📖 Journal</button>
{%- endmacro %}


{% macro bouton_accueil(lien) -%}
<a class="btn-flottant btn-accueil" href="{{ lien }}" target="_top">🏠 Accueil</a>
{%- endmacro %}


{% macro bouton_gpx(lien, libelle) -%}
<a class="btn-flottant btn-gpx" href="{{ lien }}" download>{{ libelle }}</a>
{%- endmacro %}


{# jours : liste de {libelle, lien, couleur} #}
{% macro barre_jours(retour, jours) -%}
<nav class="sidebar">
  <a class="btn-retour" href="{{ retour }}" target="_top">⬅ Retour</a>
  <div class="sidebar-titre">PAR JOURS</div>
  {%- for j in jours %}
  <a class="jour" style="--c:{{ j.couleur }}" href="{{ j.lien }}" target="_top">{{ j.libelle }}</a>
  {%- endfor %}
</nav>
{%- endmacro %}