{% extends "app.html" %}
{% block content %}
{% if can_back %}
<a class="btn btn-ghost" style="margin:0 0 var(--space-3);padding-left:0" href="/temps/nouveau">{{ shell.tr.back }}</a>
{% endif %}
{% if let Some(m) = measured %}
<div class="measure-card">
  <p>{{ m.title }}</p>
  {% if m.warning %}<p class="warn">{{ shell.tr.forgot_timer }}</p>{% endif %}
  <form method="post" action="/timer/annuler" style="margin:var(--space-2) 0 0">
    <input type="hidden" name="csrf" value="{{ shell.csrf }}">
    <button type="submit" class="btn btn-ghost" style="font-size:0.8125rem;padding-left:0;color:var(--color-accent-900)">{{ m.cancel_label }}</button>
  </form>
</div>
{% endif %}
{% if categories.is_empty() %}
<p class="step-hint">{{ shell.tr.no_categories_yet }}</p>
{% else %}
<p class="step-hint">{{ shell.tr.step1_hint }}</p>
<div class="category-pick">
  {% for t in categories %}
  <a href="{{ t.href }}">
    <span class="dot dot-14" style="background:{{ t.color }}"></span>
    <span class="tname">{{ t.name }}</span>
    <span class="tweek">{{ t.week_label }}</span>
    {% if !t.split_label.is_empty() %}<span class="tsplit"><span aria-hidden="true">{{ t.split_label }}</span><span class="visually-hidden">{{ t.split_aria }}</span></span>{% endif %}
  </a>
  {% endfor %}
</div>
{% endif %}
<div style="display:flex;justify-content:center;margin-top:var(--space-4)">
  <a class="btn btn-ghost" href="/parametres/categories">{{ shell.tr.manage_categories }}</a>
</div>
{% endblock %}