{% extends "base.html" %}
{% block content %}
  <div class="grid gap-6 md:grid-cols-2">
    <section class="rounded-2xl border bg-white p-5 shadow-sm">
      <h2 class="text-base font-semibold">Přidat produkt</h2>
      <p class="mt-1 text-sm text-slate-600">Vlož URL produktu. Obchod se detekuje automaticky (lze přepsat).</p>

      <form class="mt-4 grid gap-3" method="post" action="/admin/add">
        <label class="grid gap-1">
          <span class="text-sm font-medium">URL produktu</span>
          <input name="url" required
                 class="rounded-xl border px-3 py-2 outline-none focus:ring"
                 placeholder="https://www.alza.cz/..." />
        </label>

        <label class="grid gap-1">
          <span class="text-sm font-medium">Obchod (tag)</span>
          <input name="shop"
                 class="rounded-xl border px-3 py-2 outline-none focus:ring"
                 placeholder="nech prázdné = auto detekce" />
          <span class="text-xs text-slate-500">Např. alza / czc / mall…</span>
        </label>

        <label class="grid gap-1">
          <span class="text-sm font-medium">Hlídání ceny</span>
          <select name="watch" class="rounded-xl border px-3 py-2 outline-none focus:ring">
            <option value="1" selected>Zapnout</option>
            <option value="0">Vypnout</option>
          </select>
          <span class="text-xs text-slate-500">Notifikace při poklesu ceny (viz .env).</span>
        </label>

        <button class="rounded-xl bg-slate-900 px-4 py-2 text-white hover:bg-slate-800">
          Přidat a stáhnout data
        </button>
      </form>
    </section>

    <section class="rounded-2xl border bg-white p-5 shadow-sm">
      <h2 class="text-base font-semibold">Tipy</h2>
      <ul class="mt-3 list-disc pl-5 text-sm text-slate-700 space-y-2">
        <li>Pokud e-shop mění HTML, nejspolehlivější bývá čtení JSON-LD (schema.org Product).</li>
        <li>Notifikace nastavíš v <code>.env</code> (SMTP_HOST + NOTIFY_TO).</li>
        <li>Automatické refreshování běží na pozadí pomocí APScheduler.</li>
      </ul>
    </section>
  </div>
{% endblock %}