{% extends "base.html" %}
{% block title %}Contacts{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>Contacts</h1>
    <p class="text-muted mb-0">Browse and filter tracked contacts</p>
  </div>
</div>

{# ── Filter Bar ── #}
<form id="filter-form"
      hx-get="{{ url_for('contacts.table') }}"
      hx-target="#contacts-table-wrapper"
      hx-trigger="submit, change from:select"
      hx-push-url="false">
  <div class="filter-bar">
    <div>
      <label for="status">Status</label>
      <select id="status" name="status">
        {% if role != 'viewer' %}
        <option value="">All</option>
        {% endif %}
        <option value="ICP" {% if default_status == 'ICP' %}selected{% endif %}>ICP only</option>
        <option value="ICP,POI">ICP + POI</option>
        <option value="POI">POI only</option>
        {% if role != 'viewer' %}
        <option value="Not ICP">Not ICP</option>
        <option value="Review">Review</option>
        {% endif %}
      </select>
    </div>
    <div>
      <label for="source_profile">Executive</label>
      <select id="source_profile" name="source_profile">
        <option value="">All</option>
        {% for sp in profiles %}
        <option value="{{ sp.code }}">{{ sp.full_name }} ({{ sp.code }})</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="period">Period</label>
      <select id="period" name="period" onchange="handlePeriodChange(this)">
        {% for code, label in period_presets %}
        <option value="{{ code }}">{{ label }}</option>
        {% endfor %}
        <option value="custom">Custom range</option>
      </select>
    </div>
    <div id="custom-dates" style="display:none">
      <label for="date_from">From</label>
      <input type="date" id="date_from" name="date_from">
    </div>
    <div id="custom-dates-to" style="display:none">
      <label for="date_to">To</label>
      <input type="date" id="date_to" name="date_to"
             hx-get="{{ url_for('contacts.table') }}"
             hx-target="#contacts-table-wrapper"
             hx-trigger="change"
             hx-include="#filter-form">
    </div>
    <div>
      <label for="company">Company</label>
      <input type="text" id="company" name="company" placeholder="Filter by company…"
             hx-get="{{ url_for('contacts.table') }}"
             hx-target="#contacts-table-wrapper"
             hx-trigger="keyup changed delay:400ms"
             hx-include="#filter-form">
    </div>
    <div>
      <label for="search">Search</label>
      <input type="text" id="search" name="search" placeholder="Name, title, company…"
             hx-get="{{ url_for('contacts.table') }}"
             hx-target="#contacts-table-wrapper"
             hx-trigger="keyup changed delay:400ms"
             hx-include="#filter-form">
    </div>
  </div>
</form>
<script>
function handlePeriodChange(sel) {
  var custom = sel.value === 'custom';
  document.getElementById('custom-dates').style.display = custom ? '' : 'none';
  document.getElementById('custom-dates-to').style.display = custom ? '' : 'none';
}
</script>

{# ── Table (loaded via htmx on page load) ── #}
<div id="contacts-table-wrapper"
     hx-get="{{ url_for('contacts.table') }}?status={{ default_status }}&period={{ default_period }}"
     hx-trigger="load"
     hx-swap="innerHTML">
  <p aria-busy="true">Loading contacts…</p>
</div>
{% endblock %}