{% extends "base.html" %}
{% block title %}Kodi - Films{% endblock %}
{% block content %}
<h1 class="text-2xl md:text-3xl font-bold mb-4">📚 Films Kodi</h1>

<div class="bg-white rounded-2xl shadow p-4 md:p-6 mb-6">
  <form method="get" class="grid grid-cols-1 md:grid-cols-6 gap-3 items-end">
    <div>
      <label class="block text-sm font-medium mb-1">Recherche</label>
      <input type="text" name="q" value="{{ q }}" placeholder="Titre / synopsis"
             class="w-full rounded-xl border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Acteur</label>
      <input type="text" name="actor" value="{{ actor }}" placeholder="ex: Tom Hanks"
             class="w-full rounded-xl border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Pays</label>
      <input type="text" name="country" value="{{ country }}" placeholder="ex: France"
             class="w-full rounded-xl border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Année min</label>
      <input type="number" name="year_from" value="{{ year_from }}" min="1900" max="2100"
             class="w-full rounded-xl border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Année max</label>
      <input type="number" name="year_to" value="{{ year_to }}" min="1900" max="2100"
             class="w-full rounded-xl border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>
    <div class="flex gap-2">
      <button type="submit"
              class="rounded-xl px-4 py-2 bg-indigo-600 text-white font-medium hover:bg-indigo-700 shadow">
        Filtrer
      </button>
      <a href="/"
         class="rounded-xl px-4 py-2 bg-gray-100 text-gray-800 font-medium hover:bg-gray-200 border">
        Réinitialiser
      </a>
      <a href="/export.csv?{{ build_querystring() }}"
         class="rounded-xl px-4 py-2 bg-emerald-600 text-white font-medium hover:bg-emerald-700 shadow">
        Export CSV
      </a>
    </div>
  </form>
</div>

<div class="mb-3 text-sm text-gray-600">
  Résultats: <span class="font-semibold">{{ total }}</span>
</div>

{% macro sort_link(label, key) -%}
  {%- set is_active = (sort == key) -%}
  {%- set next_dir = ('desc' if direction == 'asc' else 'asc') if is_active else 'asc' -%}
  <a href="/?{{ build_querystring(sort=key, dir=next_dir, page=1) }}"
     class="inline-flex items-center gap-1 hover:underline">
     <span>{{ label }}</span>
     {%- if is_active -%}
       <span class="text-xs">{{ '▲' if direction=='asc' else '▼' }}</span>
     {%- else -%}
       <span class="text-xs text-gray-400">↕</span>
     {%- endif -%}
  </a>
{%- endmacro %}

<div class="bg-white rounded-2xl shadow overflow-x-auto">
  <table class="min-w-full text-sm">
    <thead class="bg-gray-100 text-gray-700">
      <tr>
        <th class="text-left px-4 py-2">{{ sort_link('Nom', 'name') }}</th>
        <th class="text-left px-4 py-2">{{ sort_link('Titre originel', 'original') }}</th>
        <th class="text-left px-4 py-2">{{ sort_link('Acteurs', 'actors') }}</th>
        <th class="text-left px-4 py-2">{{ sort_link('Pays', 'country') }}</th>
        <th class="text-left px-4 py-2">{{ sort_link('Année', 'year') }}</th>
        <th class="text-left px-4 py-2">{{ sort_link('Date', 'date') }}</th>
        <th class="text-left px-4 py-2">{{ sort_link('Chemin', 'path') }}</th>
      </tr>
    </thead>
    <tbody>
      {% for m in movies %}
      <tr class="border-t hover:bg-gray-50">
        <td class="px-4 py-2">
          {% if m.id %}
            <a href="/movie/{{ m.id }}" class="text-indigo-600 hover:underline">{{ m.nom|default('—') }}</a>
          {% elif m.path %}
            <a href="/movie/by-path?path={{ m.path | urlencode }}" class="text-indigo-600 hover:underline">{{ m.nom|default('—') }}</a>
          {% else %}
            <span>{{ m.nom|default('—') }}</span>
          {% endif %}
        </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="7" class="px-4 py-6 text-center text-gray-500">Aucun résultat.</td></tr>
      {% endif %}
    </tbody>
  </table>
</div>

{% if last_page > 1 %}
<nav class="mt-6 flex items-center justify-center gap-2 flex-wrap">
  <a href="/?{{ build_querystring(page=1) }}"
     class="px-3 py-1 rounded-lg border {{ 'bg-gray-200' if page==1 else 'bg-white hover:bg-gray-100' }}">«</a>
  <a href="/?{{ build_querystring(page=page-1) }}"
     class="px-3 py-1 rounded-lg border {{ 'bg-white hover:bg-gray-100' }}">‹</a>

  {% if start_page > 1 %}
    <span class="px-2">…</span>
  {% endif %}

  {% for p in range(start_page, end_page + 1) %}
    <a href="/?{{ build_querystring(page=p) }}"
       class="px-3 py-1 rounded-lg border {{ 'bg-indigo-600 text-white' if p==page else 'bg-white hover:bg-gray-100' }}">{{ p }}</a>
  {% endfor %}

  {% if end_page < last_page %}
    <span class="px-2">…</span>
  {% endif %}

  <a href="/?{{ build_querystring(page=page+1) }}"
     class="px-3 py-1 rounded-lg border {{ 'bg-white hover:bg-gray-100' }}">›</a>
  <a href="/?{{ build_querystring(page=last_page) }}"
     class="px-3 py-1 rounded-lg border {{ 'bg-gray-200' if page==last_page else 'bg-white hover:bg-gray-100' }}">»</a>
</nav>
{% endif %}

{% endblock %}