{% extends "app.html" %}
{% import "components.html" as c %}
{% block content %}

<h4 class="add_step_title">
  <span>{{ shell.tr.title_picked }}</span>
  <a class="btn btn-ghost" style="margin:0 0" href="/temps/nouveau?mode=manuel">{{ shell.tr.change_category }}</a>
</h4>
<div class="picked">
  <div>
    <span class="dot dot-16" style="background:{{ picked_color }}"></span>
    <span class="pname">{{ picked_name }}</span>
  </div>
</div>

<hr class="step2_hr">

<h4 class="add_step_title">{{ shell.tr.title_select_duration }}</h4>

<form method="post" action="/temps" data-duration>
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <input type="hidden" name="categorie" value="{{ categorie }}">

  <p class="mini-label">{{ shell.tr.duration_label }}</p>
  {% call c::hm_picker(shell, hour_minus_href, hour_plus_href, minus_href, plus_href, hours, mins, hint, presets) %}{% endcall %}

  <label class="mini-label" for="date">{{ shell.tr.date_label }}</label>
  {% call c::date_row(shell, "date", "date", date, today.to_string(), "", day_prev, day_next, true) %}{% endcall %}
  <p class="date-label" data-date-label-for="date"
     data-pattern="{{ vocab.pattern }}" data-weekdays="{{ vocab.weekdays }}"
     data-months="{{ vocab.months }}" data-today="{{ vocab.today }}"
     data-today-suffix="{{ vocab.today_suffix }}">{{ date_label }}</p>

  {% if let Some(r) = remaining %}
  {#- Répartition d'une mesure (0018) — réservée au JS, écart assumé à la
      règle zéro-JS : rendu hidden + case disabled, le JS révèle le bloc et
      pilote la case d'après la durée saisie (app.html, form[data-duration]).
      Sans JS le bloc n'existe pas et la mesure est consommée comme avant.
      data-want = choix par défaut de la case quand elle s'active : cochée
      dès qu'une répartition est entamée (aller jusqu'au bout), puis le JS y
      mémorise le dernier choix explicite de l'utilisateur. -#}
  <div class="split-row" hidden data-split data-remaining="{{ r }}" data-want="{% if split_started %}1{% else %}0{% endif %}">
    <label class="swt-check split-check">
      <span class="split-label" data-pat="{{ shell.tr.split_pat }}" data-idle="{{ shell.tr.split_idle }}">{{ shell.tr.split_idle }}</span>
      <input type="checkbox" name="repartir" value="1" disabled{% if split_started %} checked{% endif %}>
      <span class="swt"><span class="knob"></span></span>
    </label>
  </div>
  {% endif %}

  <button type="submit" class="btn btn-primary btn-block btn-lg" data-label-add="{{ shell.tr.title_add }}" data-label-continue="{{ shell.tr.add_continue }}">{{ shell.tr.title_add }}</button>
</form>
{% endblock %}