{% extends 'base.html' %}
{% block title %}{{ 'Klanten' if kind == 'klant' else 'Partners' }}{% endblock %}
{% block content %}
<div class="head">
  <div>
    <div class="kicker">Relaties</div>
    <h1>{{ 'Klanten' if kind == 'klant' else 'Partners' }}</h1>
    <div class="muted">{{ 'Huishoudens, families en bedrijven met hun contactpersonen.' if kind == 'klant' else 'Leveranciers, aannemers en andere partners.' }}</div>
  </div>
  <div class="actions">
    <form class="search" method="get">
      <input type="hidden" name="kind" value="{{ kind }}">
      {% if type %}<input type="hidden" name="type" value="{{ type }}">{% endif %}
      <input class="form-control" type="search" name="q" value="{{ term }}" placeholder="Zoek op naam, plaats, persoon…" aria-label="Zoeken">
    </form>
    <a class="btn btn-outline-primary" href="{{ url_for('import_start', kind='relations') }}">Importeren</a>
    <a class="btn btn-primary" href="{{ url_for('relation_edit', kind=kind, type=type or None) }}">{{ 'Nieuwe klant' if kind == 'klant' else 'Nieuwe partner' }}</a>
  </div>
</div>

<div class="filters">
  <a href="{{ url_for('relations', kind=kind, q=term or None) }}" class="{{ 'on' if not type }}">Alle</a>
  {% for t in types %}
    <a href="{{ url_for('relations', kind=kind, type=t, q=term or None) }}" class="{{ 'on' if type == t }}">{{ t }}{% if counts.get(t) %} <span class="muted">{{ counts[t] }}</span>{% endif %}</a>
  {% endfor %}
</div>

<div class="card"><div class="card-body">
  {% if rows %}
  <div class="table-responsive"><table class="table table-hover table-stack">
    <thead><tr><th>Naam</th><th>Type</th><th>Contactpersonen</th><th>Plaats</th><th>Contact</th>{% if kind == 'partner' %}<th class="num">Producten</th>{% endif %}</tr></thead>
    <tbody>
    {% for r in rows %}
      <tr class="link" onclick="location='{{ url_for('relation_view', rid=r.id) }}'">
        <td class="stack-title"><a href="{{ url_for('relation_view', rid=r.id) }}">{{ r.name }}</a></td>
        <td data-label="Type">{% if r.type %}<span class="chip">{{ r.type }}</span>{% endif %}</td>
        <td data-label="Personen"><span>{{ r.member_names or '—' }}{% if r.members > 4 %} <span class="muted">+{{ r.members - 4 }}</span>{% endif %}</span></td>
        <td data-label="Plaats">{{ r.city }}</td>
        <td data-label="Contact" class="muted">{{ [r.phone, r.email]|select|join(' · ') }}</td>
        {% if kind == 'partner' %}<td data-label="Producten" class="num">{{ r.products or '' }}</td>{% endif %}
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
  {% else %}<p class="empty">Nog geen {{ 'klantrelaties. Een lead die je omzet naar klant komt hier vanzelf.' if kind == 'klant' else 'partners. Leveranciers uit een productimport komen hier vanzelf.' }}</p>{% endif %}
</div></div>
{% endblock %}