{% extends "base.html" %}
{% block content %}
  <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
    <div>
      <h1 class="text-xl font-semibold">Přehled produktů</h1>
      <p class="mt-1 text-sm text-slate-600">Filtrovat podle obchodu a kliknout rovnou na produkt.</p>
    </div>

    <form method="get" class="flex gap-2">
      <select name="shop" class="rounded-xl border bg-white px-3 py-2 text-sm">
        <option value="" {% if not selected_shop %}selected{% endif %}>Všechny obchody</option>
        {% for s in shops %}
          <option value="{{ s }}" {% if selected_shop == s %}selected{% endif %}>{{ s }}</option>
        {% endfor %}
      </select>
      <button class="rounded-xl bg-white border px-3 py-2 text-sm hover:bg-slate-50">Filtrovat</button>
    </form>
  </div>

  {% if not products %}
    <div class="mt-6 rounded-2xl border bg-white p-6 text-sm text-slate-600">
      Zatím tu nic není. Přidej první produkt v <a class="underline" href="/admin">adminu</a>.
    </div>
  {% else %}
    <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {% for p in products %}
        <article class="rounded-2xl border bg-white p-4 shadow-sm hover:shadow transition">
          <div class="aspect-[4/3] overflow-hidden rounded-xl bg-slate-100 flex items-center justify-center">
            {% if p.image_path %}
              <img src="/static/{{ p.image_path }}" alt="{{ p.name or 'produkt' }}" class="h-full w-full object-cover">
            {% elif p.image_url %}
              <img src="{{ p.image_url }}" alt="{{ p.name or 'produkt' }}" class="h-full w-full object-cover">
            {% else %}
              <div class="text-xs text-slate-500">Bez obrázku</div>
            {% endif %}
          </div>

          <div class="mt-3">
            <div class="flex items-start justify-between gap-3">
              <h3 class="font-semibold leading-snug line-clamp-2">{{ p.name or "Bez názvu" }}</h3>
              <span class="shrink-0 rounded-full bg-slate-900 px-2.5 py-1 text-xs text-white">{{ p.shop }}</span>
            </div>

            <div class="mt-2 flex items-center justify-between">
              <div class="text-lg font-semibold">
                {% if p.price is not none %}
                  {{ "%.0f"|format(p.price) }} Kč
                {% else %}
                  <span class="text-sm text-slate-500">Cena nenalezena</span>
                {% endif %}
              </div>

              <a href="{{ p.url }}" target="_blank" rel="noopener noreferrer nofollow"
                 class="rounded-xl bg-slate-900 px-3 py-2 text-sm text-white hover:bg-slate-800">
                Přejít na produkt
              </a>
            </div>

            <div class="mt-2 text-xs text-slate-500">
              Aktualizováno: {{ p.updated_at.strftime("%Y-%m-%d %H:%M") if p.updated_at else "" }}
            </div>

            <details class="mt-3 text-sm">
              <summary class="cursor-pointer text-slate-700">Historie cen</summary>
              <div class="mt-2 space-y-1">
                {% for h in history.get(p.id, []) %}
                  <div class="flex justify-between text-xs text-slate-600">
                    <span>{{ h.checked_at.strftime("%Y-%m-%d %H:%M") }}</span>
                    <span class="font-medium">{{ "%.0f"|format(h.price) }} Kč</span>
                  </div>
                {% endfor %}
                {% if not history.get(p.id) %}
                  <div class="text-xs text-slate-500">Zatím bez historie.</div>
                {% endif %}
              </div>
            </details>
          </div>
        </article>
      {% endfor %}
    </div>
  {% endif %}
{% endblock %}