{% extends 'base.html' %}
{% from '_bulk.html' import bulk_head, bulk_cell, bulk_bar with context %}
{% block title %}Contacten{% endblock %}
{% block content %}
<div class="head">
  <div><div class="kicker">{{ 'Verkoopkansen' if a.type == 'lead' else 'Relaties' }}</div><h1>{{ {'lead': 'Leads', 'klant': 'Klantcontacten', 'partner': 'Partnercontacten'}.get(a.type, 'Contactpersonen') }}</h1></div>
  <div class="actions">
    <form class="search" method="get">
      {% for k in ('type', 'status', 'owner') %}{% if a[k] %}<input type="hidden" name="{{ k }}" value="{{ a[k] }}">{% endif %}{% endfor %}
      <input class="form-control" type="search" name="q" value="{{ term }}" placeholder="Zoek op naam, e-mail, plaats…" aria-label="Zoeken">
    </form>
    <a class="btn btn-outline-primary" href="{{ url_for('contacts_export', **request.args) }}" title="Alle velden van de contacten in deze lijst">Exporteer CSV</a>
    <a class="btn btn-primary" href="{{ url_for('contact_new', type=a.type or 'lead') }}">{{ 'Nieuwe klant' if a.type == 'klant' else 'Nieuwe lead' }}</a>
  </div>
</div>

{% if a.type != 'lead' %}
<div class="filters">
  <a href="{{ url_for('contacts', q=term or None) }}" class="{{ 'on' if not a.type }}">Alle</a>
  {% for k, l in TYPES %}<a href="{{ url_for('contacts', type=k, q=term or None) }}" class="{{ 'on' if a.type == k }}">{{ l }}</a>{% endfor %}
</div>
{% endif %}
<div class="filters">
  {% set base = {'type': a.type, 'q': term or None} %}
  <a href="{{ url_for('contacts', **base) }}" class="{{ 'on' if not a.status and not a.owner }}">Alle</a>
  {% for k, l in STATUSES %}
    <a href="{{ url_for('contacts', status=k, **base) }}" class="{{ 'on' if a.status == k }}">{{ l }}</a>
  {% endfor %}
  <span class="muted">·</span>
  <a href="{{ url_for('contacts', owner='me', **base) }}" class="{{ 'on' if a.owner == 'me' }}">Mijn {{ 'leads' if a.type == 'lead' else 'contacten' }}</a>
  <a href="{{ url_for('contacts', owner='none', **base) }}" class="{{ 'on' if a.owner == 'none' }}">Niet toegewezen</a>
</div>

<div class="card"><div class="card-body">
  {% if rows %}
  <div class="table-responsive"><table class="table table-hover table-stack">
    <thead><tr>{{ bulk_head() }}<th>Naam</th><th>Relatie</th><th>Telefoon</th><th>Plaats</th><th>Model</th><th>Bron</th><th>Toegewezen</th><th>Status</th><th>Aangemaakt</th></tr></thead>
    <tbody>
    {% for c in rows %}
      <tr class="link" onclick="location='{{ url_for('contact_view', cid=c.id) }}'">
        {{ bulk_cell(c.id, c.name) }}
        <td class="stack-title"><a href="{{ url_for('contact_view', cid=c.id) }}">{{ c.name }}</a><div class="muted">{{ c.email }}</div></td>
        <td data-label="Relatie">{% if c.relation_id %}<span><a href="{{ url_for('relation_view', rid=c.relation_id) }}" onclick="event.stopPropagation()">{{ c.relation_name }}</a>{% if c.relation_role %}<span class="muted d-block">{{ c.relation_role }}</span>{% endif %}</span>{% else %}{{ c.company }}{% endif %}</td>
        <td data-label="Telefoon">{{ c.phone }}</td>
        <td data-label="Plaats">{{ c.city }}</td>
        <td data-label="Model">{{ c.design_title or '' }}</td>
        <td data-label="Bron">{{ c.source }}</td>
        <td data-label="Toegewezen">{{ c.user_name or '—' }}</td>
        <td data-label="Status"><span>{% if not a.type %}<span class="chip">{{ TYPE.get(c.type) }}</span> {% endif %}<span class="chip {{ c.status }}">{{ STATUS.get(c.status, c.status) }}</span></span></td>
        <td data-label="Aangemaakt" class="muted">{{ c.created_at|dt('%d-%m-%Y') }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
  {% else %}<p class="empty">Geen contacten gevonden.</p>{% endif %}
</div></div>
{% call bulk_bar(url_for('contacts_bulk'), [('status', 'Status wijzigen'), ('assign', 'Toewijzen'),
                                             ('convert', 'Omzetten naar klant'), ('export', 'Exporteren als CSV'),
                                             ('delete', 'Verwijderen', '{n} contact(en) verwijderen, met hun tijdlijn, taken en bestanden? Dit kan niet ongedaan worden gemaakt.')]) %}
  <select class="form-select form-select-sm" name="status" data-show="status" aria-label="Nieuwe status">{% for k, l in STATUSES %}<option value="{{ k }}">{{ l }}</option>{% endfor %}</select>
  <select class="form-select form-select-sm" name="user_id" data-show="assign" aria-label="Toewijzen aan"><option value="">Niemand</option>{% for u in USERS %}<option value="{{ u.id }}" {{ 'selected' if u.id == g.user.id }}>{{ u.name }}</option>{% endfor %}</select>
{% endcall %}
{% endblock %}