{% extends "base.html" %}
{% block title %}Chamadas{% endblock %}
{% set active = "calls" %}
{% block content %}
<h4 class="mb-3">📞 Chamadas</h4>
<form method="get" class="row g-2 mb-2">
  <div class="col-auto">
    <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
      <option value="">Todos os status</option>
      <option value="new" {% if status_filter=="new" %}selected{% endif %}>Nova</option>
      <option value="ringing" {% if status_filter=="ringing" %}selected{% endif %}>Tocando</option>
      <option value="answered" {% if status_filter=="answered" %}selected{% endif %}>Atendida</option>
      <option value="completed" {% if status_filter=="completed" %}selected{% endif %}>Concluída</option>
      <option value="missed" {% if status_filter=="missed" %}selected{% endif %}>Perdida</option>
    </select>
  </div>
  <div class="col-auto">
    <select name="direction" class="form-select form-select-sm" onchange="this.form.submit()">
      <option value="">Todas direções</option>
      <option value="inbound" {% if direction_filter=="inbound" %}selected{% endif %}>Entrada</option>
      <option value="outbound" {% if direction_filter=="outbound" %}selected{% endif %}>Saída</option>
      <option value="internal" {% if direction_filter=="internal" %}selected{% endif %}>Interna</option>
    </select>
  </div>
  <div class="col-auto"><input type="text" name="q" class="form-control form-control-sm" placeholder="Buscar número..." value="{{ q or "" }}"></div>
  <div class="col-auto"><button class="btn btn-sm btn-primary">Filtrar</button></div>
</form>
<table class="table table-sm">
<thead><tr><th>#</th><th>Origem</th><th>Destino</th><th>Direção</th><th>Status</th><th>Duração</th><th>Protocolo</th><th>Data</th></tr></thead>
<tbody>{% for c in calls %}<tr>
  <td>{{ c.id }}</td><td>{{ c.caller_num }}</td><td>{{ c.dest_num or "—" }}</td>
  <td><span class="badge {% if c.direction=="inbound" %}bg-info{% elif c.direction=="outbound" %}bg-warning{% else %}bg-secondary{% endif %}">{{ c.direction }}</span></td>
  <td><span class="badge {% if c.status=="completed" %}bg-success{% elif c.status=="missed" %}bg-danger{% elif c.status=="ringing" %}bg-warning{% else %}bg-primary{% endif %}">{{ c.status }}</span></td>
  <td>{% if c.duration %}{{ c.duration }}s{% else %}—{% endif %}</td>
  <td><code>{{ c.protocol or "—" }}</code></td>
  <td>{{ c.created_at.strftime("%d/%m %H:%M") if c.created_at else "—" }}</td>
</tr>{% endfor %}</tbody>
</table>
{% endblock %}