{% extends "base.html" %}
{% block title %}Films - Kodi{% endblock %}
{% block content %}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow p-4 md:p-6 mb-6 border border-gray-200 dark:border-gray-700">
  <form method="get" action="/movies" 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">Acteur</label>
      <input type="text" name="actor" value="{{ actor }}" 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">Pays</label>
      <input type="text" name="country" value="{{ country }}" 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="/movies?view={{ view }}" class="rounded-xl px-4 py-2 border dark:border-gray-600">Réinitialiser</a>
      <a href="/export_movies.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="/movies?{{ 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="/movies?{{ 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 {'name':'Nom','original':'Titre','actors':'Acteurs','country':'Pays','year':'Année','date':'Date','path':'Chemin'}.items() %}
            <option value="{{key}}" {% if sort==key %}selected{% endif %}>{{label}}</option>
          {% endfor %}
        </select>
        {% set dir_toggle = ('desc' if direction=='asc' else 'asc') %}
        <a href="/movies?{{ 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 m in movies %}
      <a href="/movie/{{ m.id }}" class="group block border rounded-2xl overflow-hidden shadow dark:border-gray-700">
        {% if m.poster %}<img src="{{ m.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">{{ m.nom|default('—') }}</div>
          {% if m.year %}<div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ m.year }}</div>{% endif %}
        </div>
      </a>
    {% endfor %}
    {% if movies|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">Nom</th><th class="text-left px-4 py-2">Titre originel</th><th class="text-left px-4 py-2">Acteurs</th><th class="text-left px-4 py-2">Pays</th><th class="text-left px-4 py-2">Année</th><th class="text-left px-4 py-2">Date</th><th class="text-left px-4 py-2">Chemin</th></tr></thead>
      <tbody>
        {% for m in movies %}
        <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 m.poster %}<img src="{{ m.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="/movie/{{ m.id }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ m.nom|default('—') }}</a></td>
          <td class="px-4 py-2">{{ m.titre|none_to_dash }}</td>
          <td class="px-4 py-2"><div class="line-clamp-2">{{ m.acteurs|none_to_dash }}</div></td>
          <td class="px-4 py-2">{{ m.pays|none_to_dash }}</td>
          <td class="px-4 py-2">{{ m.year if m.year else '—' }}</td>
          <td class="px-4 py-2">{{ m.date if m.date else '—' }}</td>
          <td class="px-4 py-2"><code class="text-xs">{{ m.path|none_to_dash }}</code></td>
        </tr>
        {% endfor %}
        {% if movies|length == 0 %}<tr><td colspan="8" 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="/movies?{{ build_querystring(page=1) }}" class="px-3 py-1 rounded-lg border {{ 'opacity-60 pointer-events-none' if page==1 else '' }}">«</a>
  <a href="/movies?{{ 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="/movies?{{ 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="/movies?{{ build_querystring(page=page+1) }}" class="px-3 py-1 rounded-lg border">›</a>
  <a href="/movies?{{ 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 %}