{% extends "base.html" %}
{% block title %}Séries - Kodi{% endblock %}
{% block content %}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow p-4 md:p-6 mb-6 border">
  <form method="get" action="/shows" class="grid grid-cols-1 md:grid-cols-6 gap-3 items-end">
    <input type="hidden" name="view" value="{{ view }}"><input type="hidden" name="dir" value="{{ direction }}"><input type="hidden" name="page" value="{{ page }}">
    <div><label class="block text-sm font-medium mb-1">Recherche</label><input type="text" name="q" value="{{ q }}" class="w-full rounded-xl border px-3 py-2 dark:bg-gray-900 dark:border-gray-700"></div>
    <div><label class="block text-sm font-medium mb-1">Diffuseur</label><input type="text" name="network" value="{{ network }}" class="w-full rounded-xl border px-3 py-2 dark:bg-gray-900 dark:border-gray-700"></div>
    <div><label class="block text-sm font-medium mb-1">Genre</label><input type="text" name="genre" value="{{ genre }}" class="w-full rounded-xl border px-3 py-2 dark:bg-gray-900 dark:border-gray-700"></div>
    <div><label class="block text-sm font-medium mb-1">Année min</label><input type="number" name="year_from" value="{{ year_from }}" class="w-full rounded-xl border px-3 py-2 dark:bg-gray-900 dark:border-gray-700"></div>
    <div><label class="block text-sm font-medium mb-1">Année max</label><input type="number" name="year_to" value="{{ year_to }}" class="w-full rounded-xl border px-3 py-2 dark:bg-gray-900 dark:border-gray-700"></div>
    <div class="flex gap-2">
      <button class="rounded-xl px-4 py-2 bg-indigo-600 text-white">Filtrer</button>
      <a href="/shows?view={{ view }}" class="rounded-xl px-4 py-2 border dark:border-gray-600">Réinitialiser</a>
      <a href="/export_shows.csv?{{ build_querystring() }}" class="rounded-xl px-4 py-2 bg-emerald-600 text-white">Export CSV</a>
    </div>
    <div class="md:col-span-6 flex items-center gap-2 mt-1">
      <span class="text-sm">Vue :</span>
      <a href="/shows?{{ build_querystring(view='gallery', page=1, per_page=24) }}" class="text-sm px-3 py-1 rounded-lg border {{ 'bg-indigo-600 text-white' if view=='gallery' else '' }}">Galerie</a>
      <a href="/shows?{{ build_querystring(view='list', page=1, per_page=25) }}" class="text-sm px-3 py-1 rounded-lg border {{ 'bg-indigo-600 text-white' if view=='list' else '' }}">Liste</a>
      <div class="ml-auto flex items-center gap-2">
        <label class="text-sm">Trier par :</label>
        <select name="sort" onchange="this.form.page.value=1; this.form.submit()" class="rounded-xl border px-2 py-1 dark:bg-gray-900 dark:border-gray-700">
          {% for key,label in {'title':'Titre','original':'Original','network':'Diffuseur','genre':'Genre','year':'Année','date':'Date'}.items() %}
            <option value="{{key}}" {% if sort==key %}selected{% endif %}>{{label}}</option>
          {% endfor %}
        </select>
        {% set dir_toggle = ('desc' if direction=='asc' else 'asc') %}
        <a href="/shows?{{ build_querystring(dir=dir_toggle, page=1) }}" class="text-sm px-3 py-1 rounded-lg border">{{ '▲ Asc' if direction=='asc' else '▼ Desc' }}</a>
        <label class="text-sm ml-3">Par page :</label>
        <select name="per_page" onchange="this.form.page.value=1; this.form.submit()" class="rounded-xl border px-2 py-1 dark:bg-gray-900 dark:border-gray-700">
          {% if view=='gallery' %}{% for n in (12,24,48,96) %}<option value="{{n}}" {% if per_page==n %}selected{% endif %}>{{n}}</option>{% endfor %}
          {% else %}{% for n in (10,25,50,100) %}<option value="{{n}}" {% if per_page==n %}selected{% endif %}>{{n}}</option>{% endfor %}{% endif %}
        </select>
      </div>
    </div>
  </form>
</div>
<div class="mb-3 text-sm">Résultats: <span class="font-semibold">{{ total }}</span></div>
{% if view == 'gallery' %}
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
    {% for s in shows %}
      <a href="/show/{{ s.id }}" class="group block border rounded-2xl overflow-hidden shadow dark:border-gray-700">
        {% if s.poster %}<img src="{{ s.poster }}" class="w-full aspect-[2/3] object-cover">{% else %}<div class="w-full aspect-[2/3] bg-gray-200 dark:bg-gray-700"></div>{% endif %}
        <div class="p-2">
          <div class="text-sm font-medium line-clamp-2 group-hover:underline">{{ s.titre|default('—') }}</div>
          <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% if s.year %}{{ s.year }}{% endif %}{% if s.genre %} • {{ s.genre }}{% endif %}</div>
        </div>
      </a>
    {% endfor %}
    {% if shows|length == 0 %}<div class="col-span-full text-center py-8">Aucun résultat.</div>{% endif %}
  </div>
{% else %}
  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow overflow-x-auto border">
    <table class="min-w-full text-sm">
      <thead><tr><th class="text-left px-4 py-2">Poster</th><th class="text-left px-4 py-2">Titre</th><th class="text-left px-4 py-2">Original</th><th class="text-left px-4 py-2">Genre</th><th class="text-left px-4 py-2">Diffuseur</th><th class="text-left px-4 py-2">Année</th><th class="text-left px-4 py-2">Date</th></tr></thead>
      <tbody>
        {% for s in shows %}
        <tr class="border-t dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/40">
          <td class="px-4 py-2">{% if s.poster %}<img src="{{ s.poster }}" class="w-10 h-16 object-cover rounded-lg shadow">{% else %}<div class="w-10 h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>{% endif %}</td>
          <td class="px-4 py-2"><a href="/show/{{ s.id }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ s.titre|default('—') }}</a></td>
          <td class="px-4 py-2">{{ s.original|none_to_dash }}</td>
          <td class="px-4 py-2">{{ s.genre|none_to_dash }}</td>
          <td class="px-4 py-2">{{ s.diffuseur|none_to_dash }}</td>
          <td class="px-4 py-2">{{ s.year if s.year else '—' }}</td>
          <td class="px-4 py-2">{{ s.date if s.date else '—' }}</td>
        </tr>
        {% endfor %}
        {% if shows|length == 0 %}<tr><td colspan="7" class="px-4 py-6 text-center">Aucun résultat.</td></tr>{% endif %}
      </tbody>
    </table>
  </div>
{% endif %}
{% if last_page > 1 %}
<nav class="mt-6 flex items-center justify-center gap-2 flex-wrap">
  <a href="/shows?{{ build_querystring(page=1) }}" class="px-3 py-1 rounded-lg border {{ 'opacity-60 pointer-events-none' if page==1 else '' }}">«</a>
  <a href="/shows?{{ build_querystring(page=page-1) }}" class="px-3 py-1 rounded-lg border">‹</a>
  {% for p in range(start_page, end_page + 1) %}
    <a href="/shows?{{ build_querystring(page=p) }}" class="px-3 py-1 rounded-lg border {{ 'bg-indigo-600 text-white' if p==page else '' }}">{{ p }}</a>
  {% endfor %}
  <a href="/shows?{{ build_querystring(page=page+1) }}" class="px-3 py-1 rounded-lg border">›</a>
  <a href="/shows?{{ build_querystring(page=last_page) }}" class="px-3 py-1 rounded-lg border {{ 'opacity-60 pointer-events-none' if page==last_page else '' }}">»</a>
</nav>
{% endif %}
{% endblock %}