{#- Composants partagés, importés via {% import "components.html" as c %}.
    Les macros askama ne voient que leurs arguments : passer `shell`
    explicitement. Convention pour les paramètres optionnels de type texte
    (max, input_aria) : chaîne vide = attribut absent. -#}

{% macro chevron_left(size) %}<svg width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg>{% endmacro %}

{% macro chevron_right(size) %}<svg width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>{% endmacro %}

{#- Sélecteur de durée : stepper ± 5 min (liens, zéro JS) + libellé « pretty »
    + presets. L'amélioration progressive vit dans app.html, déléguée sur
    form[data-duration] : le form appelant doit porter cet attribut. -#}
{% macro duration_picker(shell, minus_href, plus_href, minutes, minutes_pretty, input_aria, presets) %}
<div class="duration-row">
  <div class="stepper">
    <a class="stepper-btn" href="{{ minus_href }}" data-step="-5" aria-label="{{ shell.tr.five_less }}">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M5 12h14"></path></svg>
    </a>
    <input class="input minutes-input" id="minutes" name="minutes" type="number" inputmode="numeric"
           min="1" required value="{{ minutes }}"{% if !input_aria.is_empty() %} aria-label="{{ input_aria }}"{% endif %}>
    <a class="stepper-btn" href="{{ plus_href }}" data-step="5" aria-label="{{ shell.tr.five_more }}">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg>
    </a>
  </div>
  <div>
    <div class="unit">{{ shell.tr.minutes_unit }}</div>
    <div class="pretty" id="minutes-pretty">{{ minutes_pretty }}</div>
  </div>
</div>
<div class="presets">
  {% for p in presets %}
  <a class="preset" href="{{ p.href }}" data-minutes="{{ p.minutes }}" {% if p.selected %}aria-current="true"{% endif %}>{{ p.label }}</a>
  {% endfor %}
</div>
{% endmacro %}

{#- Sélecteur heures + minutes de l'étape 2 (design) : deux capsules, chacune
    avec ses steppers (liens ±60 / ±5 sur le total, zéro JS) et son champ ;
    le serveur poste heures + minutes et en fait le total. Sous les capsules,
    l'indice « soit N minutes… » (data-hint-pat : le JS le refait sans
    recharger). Presets en grille de 4. -#}
{% macro hm_picker(shell, hour_minus_href, hour_plus_href, minus_href, plus_href, hours, mins, hint, presets) %}
<div class="hm-row">
  <div class="stepper hm">
    <a class="stepper-btn" href="{{ hour_minus_href }}" data-step="-60" aria-label="{{ shell.tr.hour_less }}">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M5 12h14"></path></svg>
    </a>
    <div class="hm-field">
      <input class="input hm-input" id="heures" name="heures" type="number" inputmode="numeric"
             min="0" required value="{{ hours }}" aria-label="{{ shell.tr.hours_aria }}">
      <span class="hm-unit">{{ shell.tr.hours_short }}</span>
    </div>
    <a class="stepper-btn" href="{{ hour_plus_href }}" data-step="60" aria-label="{{ shell.tr.hour_more }}">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg>
    </a>
  </div>
  <div class="stepper hm">
    <a class="stepper-btn" href="{{ minus_href }}" data-step="-5" aria-label="{{ shell.tr.five_less }}">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M5 12h14"></path></svg>
    </a>
    <div class="hm-field">
      <input class="input hm-input" id="minutes" name="minutes" type="number" inputmode="numeric"
             min="0" required value="{{ mins }}" aria-label="{{ shell.tr.minutes_aria }}">
      <span class="hm-unit">{{ shell.tr.minutes_short }}</span>
    </div>
    <a class="stepper-btn" href="{{ plus_href }}" data-step="5" aria-label="{{ shell.tr.five_more }}">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg>
    </a>
  </div>
</div>
<p class="hm-hint" data-hint-pat="{{ shell.tr.duration_hint_pat }}">{{ hint }}</p>
<div class="presets presets-grid">
  {% for p in presets %}
  <a class="preset" href="{{ p.href }}" data-minutes="{{ p.minutes }}" {% if p.selected %}aria-current="true"{% endif %}>{{ p.label }}</a>
  {% endfor %}
</div>
{% endmacro %}

{#- Rangée date : ← input →. next_href est une Option (None = aujourd'hui,
    flèche désactivée). js=true pose les data-attrs du stepping délégué
    d'app.html (form[data-duration]) — max doit alors être renseigné, le JS
    y borne le stepping et y rallume la flèche → ; un libellé
    [data-date-label-for=id] (data-* d'un DateVocab) est refait à chaque
    changement. js=false = navigation par rechargement. -#}
{% macro date_row(shell, id, name, value, max, input_aria, prev_href, next_href, js) %}
<div class="date-row">
  <a class="btn btn-secondary btn-icon" href="{{ prev_href }}"{% if js %} data-date-step="-1" data-date-for="{{ id }}"{% endif %} aria-label="{{ shell.tr.day_prev }}">
    {% call chevron_left(16) %}{% endcall %}
  </a>
  <input class="input" id="{{ id }}" name="{{ name }}" type="date" value="{{ value }}"{% if !max.is_empty() %} max="{{ max }}"{% endif %} required{% if !input_aria.is_empty() %} aria-label="{{ input_aria }}"{% endif %}>
  {% if let Some(next) = next_href %}
  <a class="btn btn-secondary btn-icon" href="{{ next }}"{% if js %} data-date-step="1" data-date-for="{{ id }}"{% endif %} aria-label="{{ shell.tr.day_next }}">
    {% call chevron_right(16) %}{% endcall %}
  </a>
  {% else if js %}
  {#- Sans href, un <a> est inerte (ni lien ni focus) et sans rôle — d'où le
      role="button", qui autorise aria-label/aria-disabled ; le JS le
      réveille en lien quand la date repasse sous le plafond. -#}
  <a class="btn btn-secondary btn-icon" role="button" aria-disabled="true" data-date-step="1" data-date-for="{{ id }}" aria-label="{{ shell.tr.day_next }}">
    {% call chevron_right(16) %}{% endcall %}
  </a>
  {% else %}
  <span class="btn btn-secondary btn-icon" aria-disabled="true">
    {% call chevron_right(16) %}{% endcall %}
  </span>
  {% endif %}
</div>
{% endmacro %}

{#- Navigation ← → d'un graphique de stats (next : Option, None = période
    courante, flèche désactivée). -#}
{% macro chart_nav(shell, prev, next) %}
<div class="chart-nav">
  <a class="btn btn-secondary btn-icon-sm" href="{{ prev }}" aria-label="{{ shell.tr.prev_period }}">
    {% call chevron_left(15) %}{% endcall %}
  </a>
  {% if let Some(n) = next %}
  <a class="btn btn-secondary btn-icon-sm" href="{{ n }}" aria-label="{{ shell.tr.next_period }}">
    {% call chevron_right(15) %}{% endcall %}
  </a>
  {% else %}
  <span class="btn btn-secondary btn-icon-sm" aria-disabled="true">
    {% call chevron_right(15) %}{% endcall %}
  </span>
  {% endif %}
</div>
{% endmacro %}