{% extends "base.html" %}
{% block title %}محصولات{% endblock %}
{% block content %}
<div class="topbar" style="margin:-24px -28px 24px; border-radius:0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
  <div>
    <h1>محصولات</h1>
    <p>مدیریت کاتالوگ فروشگاه — {{ products|length }} محصول</p>
  </div>
  <a class="btn btn-primary" href="{{ url_for('product_new') }}">➕ افزودن محصول جدید</a>
</div>

<form method="GET" style="margin-bottom:18px; max-width:320px;">
  <input type="text" name="q" value="{{ q }}" placeholder="🔍 جستجو در نام یا توضیحات محصول..."
         style="width:100%; padding:10px 14px; border:1px solid var(--line); border-radius:9px; font-family:inherit; background:var(--surface);">
</form>

{% if products %}
<div class="product-grid">
  {% for p in products %}
  <div class="product-card {% if not p.is_active %}inactive{% endif %}">
    {% if p.image_filename %}
      <div class="thumb" style="background-image:url('{{ url_for('uploaded_file', filename=p.image_filename) }}');"></div>
    {% else %}
      <div class="thumb">بدون تصویر</div>
    {% endif %}
    <div class="body">
      {% if p.category %}<span class="cat">{{ p.category }}</span>{% endif %}
      <div class="name">{{ p.name }}</div>
      <div class="price">{{ "{:,}".format(p.price) }} تومان</div>
      <div class="stock-badge">موجودی: {{ p.stock }} عدد {% if not p.is_active %}· غیرفعال{% endif %}</div>
      <div class="actions">
        <a class="btn btn-outline btn-sm" href="{{ url_for('product_edit', product_id=p.id) }}">✏️ ویرایش</a>
        <form method="POST" action="{{ url_for('product_delete', product_id=p.id) }}"
              onsubmit="return confirm('مطمئنی می‌خوای این محصول رو حذف کنی؟');" style="display:inline;">
          <button class="btn btn-danger btn-sm" type="submit">🗑 حذف</button>
        </form>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-state">
  <div class="icon">🛍</div>
  هنوز محصولی اضافه نکردی. با دکمه بالا اولین محصولت رو ثبت کن.
</div>
{% endif %}
{% endblock %}