{% extends "base.html" %}
{% block title %}Lessons — devcoach{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/vendor/flatpickr.min.css" />
<style>
  /* Flatpickr dark-mode override */
  .dark .flatpickr-calendar { background:#1f2937; border-color:#374151; }
  .dark .flatpickr-day { color:#e5e7eb; }
  .dark .flatpickr-day:hover { background:#374151; }
  .dark .flatpickr-day.selected,
  .dark .flatpickr-day.startRange,
  .dark .flatpickr-day.endRange,
  .dark .flatpickr-day.inRange { background:#4f46e5; border-color:#4f46e5; color:#fff; }
  .dark .flatpickr-day.today { border-color:#6366f1; }
  .dark .flatpickr-months,
  .dark .flatpickr-month { background:#1f2937; color:#e5e7eb; fill:#e5e7eb; }
  .dark .flatpickr-current-month,
  .dark .flatpickr-monthDropdown-months { color:#e5e7eb; background:#1f2937; }
  .dark .flatpickr-weekday { color:#9ca3af; background:#1f2937; }
  .dark .flatpickr-prev-month svg,
  .dark .flatpickr-next-month svg { fill:#9ca3af; }
</style>
{% endblock %}

{% block content %}

{# ── helpers ── #}
{% set custom_date = selected_date_from or selected_date_to %}
{% set any_filter = (selected_period != 'all' and not custom_date) or custom_date or selected_category or selected_level or selected_project or selected_repository or selected_branch or selected_commit or selected_starred or selected_search or selected_feedback %}

{# period label shown on the button #}
{% if custom_date %}
  {% if selected_date_from and selected_date_to %}
    {% set period_label = selected_date_from ~ ' → ' ~ selected_date_to %}
  {% elif selected_date_from %}
    {% set period_label = 'From ' ~ selected_date_from %}
  {% else %}
    {% set period_label = 'Until ' ~ selected_date_to %}
  {% endif %}
{% else %}
  {% set _pl = {'all':'All time','today':'Today','week':'Last 7 days','month':'Last 30 days','year':'Last year'} %}
  {% set period_label = _pl.get(selected_period, 'All time') %}
{% endif %}

{# feedback label #}
{% set _fl = {'know':'✓ Known','dont_know':'✗ Don\'t know','none':'— No response'} %}
{% set feedback_label = _fl.get(selected_feedback, 'Feedback') if selected_feedback else 'Feedback' %}

<form id="filter-form" method="get" action="/lessons">
  {# preserve all current filters as hidden inputs — individual controls override them #}
  <input type="hidden" name="period"     id="h-period"   value="{{ selected_period }}">
  <input type="hidden" name="date_from"  id="h-date-from" value="{{ selected_date_from }}">
  <input type="hidden" name="date_to"    id="h-date-to"   value="{{ selected_date_to }}">
  <input type="hidden" name="feedback"   id="h-feedback"  value="{{ selected_feedback }}">
  <input type="hidden" name="starred"    id="h-starred"   value="{{ '1' if selected_starred else '' }}">
  <input type="hidden" name="category"   value="{{ selected_category }}">
  <input type="hidden" name="level"      id="h-level" value="{{ selected_level }}">
  <input type="hidden" name="project"    value="{{ selected_project }}">
  <input type="hidden" name="repository" value="{{ selected_repository }}">
  <input type="hidden" name="branch"     value="{{ selected_branch }}">
  <input type="hidden" name="commit"     value="{{ selected_commit }}">

  {# ── Search bar ── #}
  <div class="flex items-center gap-3 mb-4">
    <div class="relative flex-1">
      <span class="absolute inset-y-0 left-3.5 flex items-center text-gray-400 pointer-events-none text-sm">🔍</span>
      <input type="text" name="search" value="{{ selected_search }}"
             placeholder="Search lessons…" autocomplete="off"
             class="w-full pl-9 pr-10 py-3 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
      {% if selected_search %}
      <button type="submit" name="search" value=""
              class="absolute inset-y-0 right-3 flex items-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-xl leading-none">×</button>
      {% endif %}
    </div>
    <p class="text-sm text-gray-400 dark:text-gray-500 whitespace-nowrap shrink-0">
      {% if total == 0 %}No lessons
      {% elif total_pages == 1 %}{{ total }} lesson{{ 's' if total != 1 }}
      {% else %}{{ (page - 1) * per_page + 1 }}–{{ [page * per_page, total] | min }} of {{ total }}
      {% endif %}
    </p>
  </div>

  {# ── Filter bar ── #}
  <div class="flex flex-wrap items-center gap-2 mb-3">

    {# Starred toggle #}
    <button type="button"
            onclick="var h=document.getElementById('h-starred'); h.value=h.value?'':'1'; document.getElementById('filter-form').submit()"
            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition
                   {% if selected_starred %}
                     bg-yellow-400 text-yellow-900 border-yellow-400
                   {% else %}
                     bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:border-yellow-400 hover:text-yellow-500
                   {% endif %}">
      ★ Starred
    </button>

    {# Period dropdown #}
    <div class="relative" x-data="periodPicker()" @keydown.escape="close()">
      <button type="button" @click="toggle()"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition
                     {% if custom_date or selected_period != 'all' %}
                       bg-indigo-600 text-white border-indigo-600
                     {% else %}
                       bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:border-indigo-400
                     {% endif %}">
        <span>📅</span>
        <span x-text="label">{{ period_label }}</span>
        <svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
      </button>

      {# Dropdown panel #}
      <div x-show="open" x-transition:enter="transition ease-out duration-100"
           x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
           x-transition:leave="transition ease-in duration-75"
           x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
           @click.outside="close()"
           class="absolute left-0 top-full mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg w-64 overflow-hidden"
           style="display:none">

        {# Presets #}
        <div class="p-1">
          {% for val, lbl in [('all','All time'),('today','Today'),('week','Last 7 days'),('month','Last 30 days'),('year','Last year')] %}
          <button type="button" @click="selectPreset('{{ val }}', '{{ lbl }}')"
                  class="w-full text-left px-3 py-2 rounded-lg text-sm transition flex items-center justify-between
                         {% if selected_period == val and not custom_date %}
                           bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 font-medium
                         {% else %}
                           text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800
                         {% endif %}">
            {{ lbl }}
            {% if selected_period == val and not custom_date %}<span class="text-indigo-500">✓</span>{% endif %}
          </button>
          {% endfor %}
        </div>

        <div class="border-t border-gray-100 dark:border-gray-800 p-1">
          <button type="button" @click="showCustom = !showCustom"
                  class="w-full text-left px-3 py-2 rounded-lg text-sm transition flex items-center justify-between
                         {% if custom_date %}
                           bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 font-medium
                         {% else %}
                           text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800
                         {% endif %}">
            <span>Custom range</span>
            <svg class="w-3 h-3 opacity-60 transition-transform" :class="showCustom ? 'rotate-180' : ''"
                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>

          <div x-show="showCustom" class="px-2 pb-2 pt-1">
            <input type="text" x-ref="fp"
                   placeholder="Select date range…"
                   class="w-full text-xs bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-2 py-1.5 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer" />
          </div>
        </div>
      </div>
    </div>

    {# Feedback dropdown #}
    <div class="relative" x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false">
      <button type="button" @click="open = !open"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition
                     {% if selected_feedback %}
                       bg-indigo-600 text-white border-indigo-600
                     {% else %}
                       bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:border-indigo-400
                     {% endif %}">
        {{ feedback_label }}
        <svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
           class="absolute left-0 top-full mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg w-44 p-1 overflow-hidden" style="display:none">
        {% for val, lbl in [('','All feedback'),('know','✓ Known'),('dont_know','✗ Don\'t know'),('none','— No response')] %}
        <button type="button"
                onclick="document.getElementById('h-feedback').value='{{ val }}'; document.getElementById('filter-form').submit()"
                class="w-full text-left px-3 py-2 rounded-lg text-sm transition flex items-center justify-between
                       {% if selected_feedback == val %}
                         bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 font-medium
                       {% else %}
                         text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800
                       {% endif %}">
          {{ lbl }}{% if selected_feedback == val %}<span class="text-indigo-500 ml-auto">✓</span>{% endif %}
        </button>
        {% endfor %}
      </div>
    </div>

    {# Level dropdown #}
    {% set _lc = {'junior':'🟢','mid':'🟡','senior':'🔴'} %}
    <div class="relative" x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false">
      <button type="button" @click="open = !open"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition
                     {% if selected_level %}
                       bg-indigo-600 text-white border-indigo-600
                     {% else %}
                       bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:border-indigo-400
                     {% endif %}">
        {{ (_lc[selected_level] ~ ' ' ~ selected_level) if selected_level else 'Level' }}
        <svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
           class="absolute left-0 top-full mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg w-40 p-1 overflow-hidden" style="display:none">
        {% for val, lbl in [('','All levels'),('junior','🟢 Junior'),('mid','🟡 Mid'),('senior','🔴 Senior')] %}
        <button type="button"
                onclick="document.getElementById('h-level').value='{{ val }}'; document.getElementById('filter-form').submit()"
                class="w-full text-left px-3 py-2 rounded-lg text-sm transition flex items-center justify-between
                       {% if selected_level == val %}
                         bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 font-medium
                       {% else %}
                         text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800
                       {% endif %}">
          {{ lbl }}{% if selected_level == val %}<span class="text-indigo-500 ml-auto">✓</span>{% endif %}
        </button>
        {% endfor %}
      </div>
    </div>

    {# More filters #}
    {% if all_categories or all_projects or all_repositories or all_branches or all_commits %}
    <div class="relative" x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false">
      <button type="button" @click="open = !open"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition
                     {% if selected_category or selected_project or selected_repository or selected_branch or selected_commit %}
                       bg-indigo-600 text-white border-indigo-600
                     {% else %}
                       bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:border-indigo-400
                     {% endif %}">
        Filters
        {% if selected_category or selected_project or selected_repository or selected_branch or selected_commit %}
        <span class="bg-white/20 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-bold">
          {{ [selected_category, selected_project, selected_repository, selected_branch, selected_commit] | select | list | length }}
        </span>
        {% endif %}
        <svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
      </button>

      <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
           class="absolute left-0 top-full mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg w-64 p-3 space-y-2.5" style="display:none">

        {% if all_categories %}
        <div>
          <label for="filter-category" class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Category</label>
          <select id="filter-category" name="category" onchange="this.form.submit()"
                  class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <option value="">All categories</option>
            {% for cat in all_categories %}
            <option value="{{ cat }}" {% if selected_category == cat %}selected{% endif %}>{{ cat }}</option>
            {% endfor %}
          </select>
        </div>
        {% endif %}

        {% if all_projects %}
        <div>
          <label for="filter-project" class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Project</label>
          <select id="filter-project" name="project" onchange="this.form.submit()"
                  class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <option value="">All projects</option>
            {% for p in all_projects %}
            <option value="{{ p }}" {% if selected_project == p %}selected{% endif %}>{{ p }}</option>
            {% endfor %}
          </select>
        </div>
        {% endif %}

        {% if all_repositories %}
        <div>
          <label for="filter-repository" class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Repository</label>
          <select id="filter-repository" name="repository" onchange="this.form.submit()"
                  class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <option value="">All repositories</option>
            {% for r in all_repositories %}
            <option value="{{ r }}" {% if selected_repository == r %}selected{% endif %}>{{ r }}</option>
            {% endfor %}
          </select>
        </div>
        {% endif %}

        {% if all_branches %}
        <div>
          <label for="filter-branch" class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Branch</label>
          <input id="filter-branch" type="text" name="branch" value="{{ selected_branch }}"
                 placeholder="e.g. main" list="branch-list" autocomplete="off"
                 class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          <datalist id="branch-list">{% for b in all_branches %}<option value="{{ b }}">{% endfor %}</datalist>
        </div>
        {% endif %}

        {% if all_commits %}
        <div>
          <label for="filter-commit" class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Commit</label>
          <input id="filter-commit" type="text" name="commit" value="{{ selected_commit }}"
                 placeholder="hash prefix…" list="commit-list" autocomplete="off"
                 class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 rounded-lg px-2.5 py-1.5 text-xs font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          <datalist id="commit-list">{% for c in all_commits %}<option value="{{ c[:7] }}">{% endfor %}</datalist>
        </div>
        {% endif %}

        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg px-3 py-1.5 text-xs font-medium transition">Apply</button>
      </div>
    </div>
    {% endif %}

    {# Clear all #}
    {% if any_filter %}
    <a href="/lessons" class="ml-auto text-xs text-gray-400 hover:text-gray-700 dark:hover:text-white transition">Clear all</a>
    {% endif %}
  </div>

  {# ── Active filter chips ── #}
  {% if any_filter %}
  <div class="flex flex-wrap gap-1.5 mb-4">
    {% macro chip(label, clear_url) %}
    <span class="inline-flex items-center gap-1 pl-2.5 pr-1 py-0.5 rounded-full text-xs bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800">
      {{ label }}<a href="{{ clear_url }}" class="ml-0.5 w-4 h-4 flex items-center justify-center rounded-full hover:bg-indigo-200 dark:hover:bg-indigo-700 transition">×</a>
    </span>
    {% endmacro %}

    {% set base = '?period=' ~ selected_period ~ '&category=' ~ selected_category ~ '&level=' ~ selected_level ~ '&project=' ~ selected_project ~ '&repository=' ~ selected_repository ~ '&branch=' ~ selected_branch ~ '&commit=' ~ selected_commit ~ '&feedback=' ~ selected_feedback ~ '&search=' ~ selected_search ~ '&date_from=' ~ selected_date_from ~ '&date_to=' ~ selected_date_to ~ ('&starred=1' if selected_starred else '') ~ '&sort=' ~ selected_sort ~ '&order=' ~ selected_order %}

    {% if custom_date %}{{ chip('📅 ' ~ period_label, base | replace('&date_from=' ~ selected_date_from, '&date_from=') | replace('&date_to=' ~ selected_date_to, '&date_to=')) }}{% endif %}
    {% if selected_period != 'all' and not custom_date %}{{ chip('🕐 ' ~ period_label, base | replace('period=' ~ selected_period, 'period=all')) }}{% endif %}
    {% if selected_feedback %}{{ chip(_fl.get(selected_feedback, selected_feedback), base | replace('&feedback=' ~ selected_feedback, '&feedback=')) }}{% endif %}
    {% if selected_starred %}<span class="inline-flex items-center gap-1 pl-2.5 pr-1 py-0.5 rounded-full text-xs bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800">★ Starred<a href="{{ base | replace('&starred=1','') }}" class="ml-0.5 w-4 h-4 flex items-center justify-center rounded-full hover:bg-yellow-200 dark:hover:bg-yellow-700 transition">×</a></span>{% endif %}
    {% if selected_search %}{{ chip('🔍 "' ~ selected_search ~ '"', base | replace('&search=' ~ selected_search, '&search=')) }}{% endif %}
    {% if selected_category %}{{ chip(selected_category, base | replace('&category=' ~ selected_category, '&category=')) }}{% endif %}
    {% if selected_level %}{{ chip(_lc.get(selected_level, '') ~ ' ' ~ selected_level, base | replace('&level=' ~ selected_level, '&level=')) }}{% endif %}
    {% if selected_project %}{{ chip('📁 ' ~ selected_project, base | replace('&project=' ~ selected_project, '&project=')) }}{% endif %}
    {% if selected_repository %}{{ chip('⎇ ' ~ selected_repository, base | replace('&repository=' ~ selected_repository, '&repository=')) }}{% endif %}
    {% if selected_branch %}{{ chip('⎇ ' ~ selected_branch, base | replace('&branch=' ~ selected_branch, '&branch=')) }}{% endif %}
    {% if selected_commit %}{{ chip(selected_commit[:7], base | replace('&commit=' ~ selected_commit, '&commit=')) }}{% endif %}
  </div>
  {% endif %}

</form>

{# ── Table ── #}
{% if lessons %}
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden">
  <table class="w-full text-sm">
    <thead>
      {# qs without sort/order/page so sort links preserve all filters #}
      {% set sort_base = '?period=' ~ selected_period ~ '&date_from=' ~ selected_date_from ~ '&date_to=' ~ selected_date_to ~ '&category=' ~ selected_category ~ '&level=' ~ selected_level ~ '&project=' ~ selected_project ~ '&repository=' ~ selected_repository ~ '&branch=' ~ selected_branch ~ '&commit=' ~ selected_commit ~ '&feedback=' ~ selected_feedback ~ '&search=' ~ selected_search ~ ('&starred=1' if selected_starred else '') %}
      {% macro sort_th(label, col, extra_class='') %}
        {% set active = (selected_sort == col) %}
        {% set next_order = 'asc' if (active and selected_order == 'desc') else 'desc' %}
        <th class="px-3 py-3 whitespace-nowrap {{ extra_class }}">
          <a href="{{ sort_base }}&sort={{ col }}&order={{ next_order }}"
             class="inline-flex items-center gap-1 hover:text-gray-700 dark:hover:text-gray-200 transition group/sort">
            {{ label }}
            {% if active %}
              <span class="text-indigo-400">{{ '↑' if selected_order == 'asc' else '↓' }}</span>
            {% else %}
              <span class="text-gray-200 dark:text-gray-700 group-hover/sort:text-gray-400 dark:group-hover/sort:text-gray-500 transition">↕</span>
            {% endif %}
          </a>
        </th>
      {% endmacro %}
      <tr class="bg-gray-50 dark:bg-gray-800/60 border-b border-gray-200 dark:border-gray-800 text-left text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">
        <th class="w-8 px-3 py-3"></th>
        {{ sort_th('Date', 'timestamp') }}
        {{ sort_th('Topic', 'topic_id', 'hidden sm:table-cell') }}
        {{ sort_th('Title', 'title') }}
        {{ sort_th('Level', 'level') }}
        <th class="px-3 py-3 hidden lg:table-cell">Categories</th>
        {{ sort_th('Feedback', 'feedback', 'hidden xl:table-cell') }}
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
      {% for lesson in lessons %}
      {% set lc = {'junior':'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20',
                   'mid':'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20',
                   'senior':'text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-900/20'} %}
      <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors group cursor-pointer"
          tabindex="0"
          onclick="window.location='/lessons/{{ lesson.id }}'"
          onkeydown="if(event.key==='Enter')window.location='/lessons/{{ lesson.id }}'"
          role="link">

        {# Star #}
        <td class="px-3 py-3" onclick="event.stopPropagation()" onkeydown="event.stopPropagation()">
          <form method="post" action="/lessons/{{ lesson.id }}/star">
            <input type="hidden" name="starred" value="{% if lesson.starred %}0{% else %}1{% endif %}" />
            <input type="hidden" name="next" value="/lessons{% if request.url.query %}?{{ request.url.query }}{% endif %}" />
            <button type="submit" title="{% if lesson.starred %}Unstar{% else %}Star{% endif %}"
                    class="w-6 text-lg text-center leading-none transition
                           {% if lesson.starred %}text-yellow-400 hover:text-yellow-300{% else %}text-gray-300 dark:text-gray-600 hover:text-yellow-400{% endif %}">
              {% if lesson.starred %}★{% else %}☆{% endif %}
            </button>
          </form>
        </td>

        {# Date — relative label + exact tooltip on hover #}
        <td class="px-3 py-3 whitespace-nowrap tabular-nums relative group/date">
          <span class="text-gray-400 dark:text-gray-500 cursor-default"
                data-ts="{{ lesson.timestamp_iso }}">{{ lesson.timestamp_iso[:10] }}</span>
          <div class="absolute z-10 bottom-full left-0 mb-1 px-2 py-1 rounded bg-gray-800 dark:bg-gray-700
                      text-white text-xs whitespace-nowrap pointer-events-none
                      opacity-0 group-hover/date:opacity-100 transition-opacity duration-150">
            {{ lesson.timestamp_iso[:16].replace('T', ' ') }}
          </div>
        </td>

        {# Topic #}
        <td class="px-3 py-3 hidden sm:table-cell">
          <span class="text-xs font-mono text-cyan-600 dark:text-cyan-400">{{ lesson.topic_id }}</span>
        </td>

        {# Title #}
        <td class="px-3 py-3 max-w-xs">
          <a href="/lessons/{{ lesson.id }}"
             class="font-medium text-gray-800 dark:text-gray-100 hover:text-indigo-600 dark:hover:text-indigo-400 transition line-clamp-2">
            {{ lesson.title }}
          </a>
        </td>

        {# Level badge #}
        <td class="px-3 py-3" onclick="event.stopPropagation()" onkeydown="event.stopPropagation()">
          <a href="{{ sort_base }}&level={{ lesson.level }}&sort={{ selected_sort }}&order={{ selected_order }}"
             class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ lc.get(lesson.level, '') }} hover:ring-2 hover:ring-current hover:ring-offset-1 transition-shadow">
            {{ lesson.level }}
          </a>
        </td>

        {# Categories #}
        <td class="px-3 py-3 hidden lg:table-cell" onclick="event.stopPropagation()" onkeydown="event.stopPropagation()">
          <div class="flex flex-wrap gap-1">
            {% for cat in lesson.categories %}
            <a href="{{ sort_base }}&category={{ cat }}&sort={{ selected_sort }}&order={{ selected_order }}"
               class="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-indigo-100 dark:hover:bg-indigo-900/40 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors">{{ cat }}</a>
            {% endfor %}
          </div>
        </td>

        {# Feedback #}
        <td class="px-3 py-3 hidden xl:table-cell" onclick="event.stopPropagation()" onkeydown="event.stopPropagation()">
          {% if lesson.feedback == 'know' %}
          <span class="text-xs text-emerald-600 dark:text-emerald-400 font-medium">✓ Known</span>
          {% elif lesson.feedback == 'dont_know' %}
          <span class="text-xs text-rose-500 dark:text-rose-400 font-medium">✗ Unknown</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{# ── Pagination ── #}
{% if total_pages > 1 %}
{% set qs_base = '?period=' ~ selected_period ~ '&category=' ~ selected_category ~ '&level=' ~ selected_level ~ '&project=' ~ selected_project ~ '&repository=' ~ selected_repository ~ '&branch=' ~ selected_branch ~ '&commit=' ~ selected_commit ~ '&feedback=' ~ selected_feedback ~ '&search=' ~ selected_search ~ '&date_from=' ~ selected_date_from ~ '&date_to=' ~ selected_date_to ~ ('&starred=1' if selected_starred else '') ~ '&sort=' ~ selected_sort ~ '&order=' ~ selected_order %}
<div class="flex items-center justify-between mt-4">
  <p class="text-xs text-gray-400 dark:text-gray-500">Page {{ page }} of {{ total_pages }}</p>
  <div class="flex items-center gap-1">

    {# Prev #}
    {% if page > 1 %}
    <a href="{{ qs_base }}&page={{ page - 1 }}"
       class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-medium bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:border-indigo-400 transition">← Prev</a>
    {% else %}
    <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-medium border border-gray-100 dark:border-gray-800 text-gray-300 dark:text-gray-600 cursor-not-allowed">← Prev</span>
    {% endif %}

    {# Page numbers — show first, last, and a window around current #}
    {% for p in range(1, total_pages + 1) %}
      {% if p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
        {% if loop.changed(p > 1 and p != page - 2 and p != 2) %}
        <span class="text-gray-400 dark:text-gray-600 text-xs px-1">…</span>
        {% endif %}
        {% if p == page %}
        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-medium bg-indigo-600 text-white border border-indigo-600">{{ p }}</span>
        {% else %}
        <a href="{{ qs_base }}&page={{ p }}"
           class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-medium bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:border-indigo-400 transition">{{ p }}</a>
        {% endif %}
      {% endif %}
    {% endfor %}

    {# Next #}
    {% if page < total_pages %}
    <a href="{{ qs_base }}&page={{ page + 1 }}"
       class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-medium bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:border-indigo-400 transition">Next →</a>
    {% else %}
    <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-medium border border-gray-100 dark:border-gray-800 text-gray-300 dark:text-gray-600 cursor-not-allowed">Next →</span>
    {% endif %}

  </div>
</div>
{% endif %}

{% else %}
<div class="flex flex-col items-center justify-center py-16 text-center">
  <p class="text-3xl mb-3">📭</p>
  <p class="text-gray-500 dark:text-gray-400 text-sm">No lessons match the current filters.</p>
  {% if any_filter %}<a href="/lessons" class="mt-2 text-indigo-500 hover:text-indigo-400 text-sm transition">Clear all filters</a>{% endif %}
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script src="/static/vendor/flatpickr.min.js"></script>
<script src="/static/relative-time.js"></script>
<script>
function periodPicker() {
  return {
    open: false,
    showCustom: {{ 'true' if custom_date else 'false' }},
    label: {{ ('"' ~ period_label ~ '"') | safe }},
    fp: null,

    init() {
      const self = this;
      this.$watch('showCustom', val => {
        if (val && !this.fp) {
          this.fp = flatpickr(this.$refs.fp, {
            mode: 'range',
            dateFormat: 'Y-m-d',
            inline: false,
            {% if selected_date_from %}defaultDate: ['{{ selected_date_from }}'{% if selected_date_to %}, '{{ selected_date_to }}'{% endif %}],{% endif %}
            onChange(dates) {
              if (dates.length === 2) {
                document.getElementById('h-date-from').value = self.fp.formatDate(dates[0], 'Y-m-d');
                document.getElementById('h-date-to').value   = self.fp.formatDate(dates[1], 'Y-m-d');
                document.getElementById('h-period').value    = '';
                document.getElementById('filter-form').submit();
              }
            }
          });
        }
      });
    },

    toggle() { this.open = !this.open; },
    close()  { this.open = false; },

    selectPreset(val, lbl) {
      document.getElementById('h-period').value    = val;
      document.getElementById('h-date-from').value = '';
      document.getElementById('h-date-to').value   = '';
      document.getElementById('filter-form').submit();
    },
  };
}
</script>
{% endblock %}