{% extends "app.html" %}
{% import "components.html" as c %}
{% block content %}
<a class="btn btn-ghost" style="margin:0 0 var(--space-4);padding-left:0;font-size:1rem;min-height:44px" href="/temps">{{ shell.tr.my_entries_arrow }}</a>

{% if show_pills %}
<div class="scope-tabs">
<nav class="scope-pills" aria-label="{{ shell.tr.scope_pills_aria }}">
  {% for pill in pills %}
  <a class="scope-pill" href="#{{ pill.anchor }}" {% if pill.current %}aria-current="true"{% endif %}>{{ pill.name }}</a>
  {% endfor %}
</nav>
</div>
{% endif %}

<div class="scopes" id="scopes">
  {% for p in panels %}
  <div class="scope-panel" id="{{ p.anchor }}" data-url="{{ p.url }}">
    {% if let Some(t) = p.title %}
    <p class="scope-title">{{ t }}</p>
    {% endif %}

    <section class="chart-section day-chart">
      <div class="chart-head">
        <h2>{{ p.day_chart.title }}</h2>
        {% call c::chart_nav(shell, p.day_chart.prev, p.day_chart.next) %}{% endcall %}
      </div>
      <p class="chart-range">{{ p.day_chart.range }}</p>
      {% if !p.day_chart.legend.is_empty() %}
      <ul class="legend legend-people">
        {% for item in p.day_chart.legend %}
        <li><span class="dot" style="background:{{ item.color }}"></span>{{ item.name }}</li>
        {% endfor %}
      </ul>
      {% endif %}
      {% if p.day_chart.empty %}
      <p class="chart-empty">{{ shell.tr.no_time_week }}</p>
      {% endif %}
      <div class="cols cols-7{% if shell.stats_rows %} cols-rows{% endif %}">
        {% for col in p.day_chart.cols %}
        <div class="col{% if col.muted %} col-muted{% endif %}">
          {% if let Some(t) = col.total %}
          <span class="total">{{ t }}</span>
          {% endif %}
          {% if !col.muted %}
          <div class="col-bar" style="--h:{{ col.height_pct }}">
            {% for s in col.segs %}
            <a href="#{{ s.sheet_id }}" style="flex-grow:{{ s.flex }};background:{{ s.color }}"
               title="{{ s.aria }}" aria-label="{{ s.aria }}"></a>
            {% endfor %}
          </div>
          {% endif %}
          <span class="user{% if col.today %} day-today{% endif %}">{{ col.label }}</span>
        </div>
        {% endfor %}
      </div>
    </section>

    {% if !p.legend.is_empty() %}
    <ul class="legend">
      {% for item in p.legend %}
      <li><span class="dot" style="background:{{ item.color }}"></span>{{ item.name }}</li>
      {% endfor %}
    </ul>
    {% endif %}

    {% for chart in p.charts %}
    <section class="chart-section">
      <div class="chart-head">
        <h2>{{ chart.title }}</h2>
        {% if chart.nav %}
        {% call c::chart_nav(shell, chart.prev, chart.next) %}{% endcall %}
        {% endif %}
      </div>
      <p class="chart-range">{{ chart.range }}</p>

      {% if chart.empty %}
      <p class="chart-empty">{{ shell.tr.no_time_period }}</p>
      {% else %}
      <div class="cols{% if shell.stats_rows %} cols-rows{% endif %}">
        {% for row in chart.rows %}
        <div class="col">
          <span class="total">{{ row.total }}</span>
          <div class="col-bar" style="--h:{{ row.height_pct }}">
            {% for s in row.segs %}
            <a href="#{{ s.sheet_id }}" style="flex-grow:{{ s.flex }};background:{{ s.color }}"
               title="{{ s.aria }}" aria-label="{{ s.aria }}"></a>
            {% endfor %}
          </div>
          <span class="user">{{ row.user }}</span>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </section>
    {% endfor %}
  </div>
  {% endfor %}
</div>

{% if show_pills %}
<script>
// Amélioration progressive du carrousel de scopes : sans JS, les pills
// (ancres) scrollent le conteneur et les liens de période embarquent
// groupe + ancre. Le JS ajoute l'état actif des pills au swipe et pose
// l'URL canonique du panneau (history.replaceState — jamais de fetch).
(function () {
  var snap = document.getElementById('scopes');
  var pills = Array.prototype.slice.call(document.querySelectorAll('.scope-pill'));
  var panels = Array.prototype.slice.call(snap.children);
  function idx() { return Math.round(snap.scrollLeft / Math.max(1, snap.clientWidth)); }
  function apply(i) {
    pills.forEach(function (p, j) {
      if (j === i) { p.setAttribute('aria-current', 'true'); } else { p.removeAttribute('aria-current'); }
    });
    var url = panels[i] && panels[i].dataset.url;
    if (url) { history.replaceState(null, '', url + location.hash); }
  }
  function settle() { apply(idx()); }
  if ('onscrollend' in snap) { snap.addEventListener('scrollend', settle); }
  else {
    var t;
    snap.addEventListener('scroll', function () { clearTimeout(t); t = setTimeout(settle, 120); });
  }
  // Arrivée avec ?groupe= (pill courante posée par le serveur) sans ancre :
  // on se place sur le panneau, instantanément.
  var start = 0;
  pills.forEach(function (p, j) { if (p.hasAttribute('aria-current')) { start = j; } });
  if (start > 0 && !location.hash) { snap.scrollTo({ left: start * snap.clientWidth, behavior: 'instant' }); }
})();
</script>
{% endif %}
{% endblock %}

{% block sheets %}
{% for s in sheets %}
<div class="sheet-wrap" id="{{ s.id }}" role="dialog" aria-label="{{ shell.tr.detail }} — {{ s.category }}">
  <a class="sheet-backdrop" href="#fermer" aria-label="{{ shell.tr.close }}"></a>
  <div class="sheet">
    <div class="sheet-head">
      <span class="dot dot-14" style="background:{{ s.color }}"></span>
      <span class="pname">{{ s.category }}</span>
      <a class="btn btn-ghost close" href="#fermer">{{ shell.tr.close }}</a>
    </div>
    <div class="sheet-figures">
      <div><div class="k">{{ s.who }}</div><div class="v">{{ s.duration }}</div></div>
      <div><div class="k">{{ shell.tr.share_of_time }}</div><div class="v">{{ s.share }}</div></div>
    </div>
    <p class="sheet-note">{{ s.period }} · {{ s.count }}</p>
  </div>
</div>
{% endfor %}
{% for s in day_sheets %}
<div class="sheet-wrap" id="{{ s.id }}" role="dialog" aria-label="{{ shell.tr.detail }} — {{ s.category }}">
  <a class="sheet-backdrop" href="#fermer" aria-label="{{ shell.tr.close }}"></a>
  <div class="sheet">
    <div class="sheet-head">
      <span class="dot dot-14" style="background:{{ s.color }}"></span>
      <span class="pname">{{ s.category }}</span>
      <a class="btn btn-ghost close" href="#fermer">{{ shell.tr.close }}</a>
    </div>
    <div class="sheet-figures">
      <div><div class="k">{{ s.who }}</div><div class="v">{{ s.duration }}</div></div>
      <div><div class="k">{{ shell.tr.share_of_day }}</div><div class="v">{{ s.share }}</div></div>
    </div>
    <p class="sheet-note">{{ s.period }} · {{ s.count }}</p>
  </div>
</div>
{% endfor %}
{% endblock %}