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

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

{# ── Filter Bar ── #}
<form id="filter-form"
      hx-get="{{ url_for('companies.table') }}"
      hx-target="#companies-table-wrapper"
      hx-trigger="submit, change from:select"
      hx-push-url="false">
  <div class="filter-bar">
    <div>
      <label for="tier">Tier</label>
      <select id="tier" name="tier">
        <option value="">All</option>
        <option value="1" {% if default_tier == '1' %}selected{% endif %}>Tier 1 ICP</option>
        <option value="2">Tier 2 ICP</option>
        <option value="Not ICP">Not ICP</option>
        <option value="untiered">Untiered</option>
      </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('companies.table') }}"
             hx-target="#companies-table-wrapper"
             hx-trigger="change"
             hx-include="#filter-form">
    </div>
    <div>
      <label for="search">Search</label>
      <input type="text" id="search" name="search" placeholder="Company name…"
             hx-get="{{ url_for('companies.table') }}"
             hx-target="#companies-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="companies-table-wrapper"
     hx-get="{{ url_for('companies.table') }}?tier={{ default_tier }}&period={{ default_period }}"
     hx-trigger="load"
     hx-swap="innerHTML">
  <p aria-busy="true">Loading companies…</p>
</div>
{% endblock %}