devcoach 0.1.0__py3-none-any.whl

devcoach/web/templates/lessons.html

@@ -0,0 +1,546 @@
+{% 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">
+
+    {# 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>
+
+    {# 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>
+
+    {# 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 class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Category</label>
+          <select 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 class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Project</label>
+          <select 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 class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Repository</label>
+          <select 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 class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Branch</label>
+          <input 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 class="block text-xs text-gray-400 dark:text-gray-500 mb-1">Commit</label>
+          <input 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"
+          onclick="window.location='/lessons/{{ lesson.id }}'">
+
+        {# Star #}
+        <td class="px-3 py-3" onclick="event.stopPropagation()">
+          <form method="post" action="/lessons/{{ lesson.id }}/star">
+            <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()">
+          <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()">
+          <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()">
+          {% 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();
+              }
+            }
+          });
+        }
+        if (val && this.fp) this.fp.open();
+      });
+    },
+
+    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 %}