{% extends 'base.html' %}
{% block title %}Producten{% endblock %}
{% block content %}
<div class="head">
  <div><div class="kicker">Assortiment</div><h1>Producten</h1></div>
  <div class="actions">
    <form class="search" method="get">
      <input type="hidden" name="show" value="{{ show }}">
      <input class="form-control" type="search" name="q" value="{{ term }}" placeholder="Zoek op naam, SKU, leverancier…" aria-label="Zoeken">
    </form>
    <a class="btn btn-outline-primary" href="{{ url_for('products_export') }}">Exporteer CSV</a>
    <a class="btn btn-outline-primary" href="{{ url_for('import_start', kind='products') }}">Importeren</a>
    <a class="btn btn-primary" href="{{ url_for('product_edit') }}">Nieuw product</a>
  </div>
</div>
<div class="filters">
  {% for k, l in [('active', 'Actief'), ('inactive', 'Inactief'), ('all', 'Alle')] %}
    <a href="{{ url_for('products', show=k, q=term or None) }}" class="{{ 'on' if show == k }}">{{ l }}</a>
  {% endfor %}
  <span class="muted">{{ rows|length }} product(en)</span>
</div>
<div class="card"><div class="card-body">
  {% if rows %}
  <div class="table-responsive"><table class="table table-hover table-stack">
    <thead><tr><th class="d-none d-md-table-cell"></th><th>Naam</th><th>SKU</th><th>Leverancier</th><th>Eenheid</th><th class="num">Prijs excl.</th><th class="num">Btw</th><th>Bijgewerkt</th><th>Status</th></tr></thead>
    <tbody>
    {% for p in rows %}
      <tr class="link" onclick="location='{{ url_for('product_edit', pid=p.id) }}'">
        <td class="d-none d-md-table-cell" style="width:64px">{% if p.image %}<img class="thumb-sm" src="{{ url_for('upload_file', name=p.image) }}" alt="">{% else %}<span class="thumb-sm"></span>{% endif %}</td>
        <td class="stack-title"><a href="{{ url_for('product_edit', pid=p.id) }}">{{ p.name }}</a><div class="muted">{{ p.description|truncate(90) }}</div></td>
        <td data-label="SKU"><code>{{ p.sku }}</code></td>
        <td data-label="Leverancier">{% if p.supplier_id %}<a href="{{ url_for('relation_view', rid=p.supplier_id) }}" onclick="event.stopPropagation()">{{ p.supplier }}</a>{% else %}{{ p.supplier }}{% endif %}</td>
        <td data-label="Eenheid">{{ p.unit }}</td>
        <td data-label="Prijs excl." class="num">{{ p.price|euro }}</td>
        <td data-label="Btw" class="num">{{ p.vat|nr }}%</td>
        <td data-label="Bijgewerkt" class="muted">{{ (p.updated_at or p.created_at)|dt('%d-%m-%Y') }}</td>
        <td data-label="Status">{% if not p.active %}<span class="chip verloren">Inactief</span>{% endif %}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
  {% else %}<p class="empty">{{ 'Geen producten gevonden.' if term or show != 'active' else 'Nog geen producten. Voeg ze toe of importeer een CSV; daarna kies je ze in offertes.' }}</p>{% endif %}
</div></div>
{% endblock %}