{#- 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 %}

{#- 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]) ; 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 %}
  <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 %}