{% extends "base.html" %}
{% block content %}
<h2>👁️ Permissões de Spy</h2>
<p class="text-muted">Ramais protegidos (diretoria) não podem ser monitorados, independente das regras abaixo.</p>

<form method="post" action="/app/pbx/spy/save">

<div class="table-responsive mb-3">
<table class="table table-sm table-striped">
  <thead>
    <tr>
      <th>Quem monitora</th>
      <th>Ramal alvo</th>
      <th>Tipo</th>
      <th>Ativo</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="rules-tbody">
{% for r in rules %}
    <tr>
      <td>
        <input type="hidden" name="id" value="{{ r.id }}">
        <input type="text" class="form-control form-control-sm" name="spy_ext_{{ r.id }}" value="{{ r.spy_extension }}" style="width:100px" list="peer-list">
      </td>
      <td>
        <input type="text" class="form-control form-control-sm" name="tgt_ext_{{ r.id }}" value="{{ r.target_extension }}" style="width:100px" list="peer-list">
      </td>
      <td>
        <select class="form-select form-select-sm" name="spy_type_{{ r.id }}">
          <option value="all"{% if r.spy_type == 'all' %} selected{% endif %}>Todos</option>
          <option value="chanspy"{% if r.spy_type == 'chanspy' %} selected{% endif %}>Só Escuta</option>
          <option value="whisper"{% if r.spy_type == 'whisper' %} selected{% endif %}>Sussurro</option>
          <option value="barge"{% if r.spy_type == 'barge' %} selected{% endif %}>Intervir</option>
        </select>
      </td>
      <td class="text-center">
        <input type="checkbox" class="form-check-input" name="enabled_{{ r.id }}" value="1"{% if r.enabled %} checked{% endif %}>
      </td>
      <td>
        <button type="button" class="btn btn-sm btn-danger" onclick="this.closest('tr').remove()">×</button>
      </td>
    </tr>
{% else %}
    <tr id="no-rules-row">
      <td colspan="5" class="text-center text-muted py-3">Nenhuma regra cadastrada. Clique em "+ Adicionar" para criar.</td>
    </tr>
{% endfor %}
  </tbody>
</table>
</div>

<div class="mb-3">
  <button type="button" class="btn btn-outline-secondary" onclick="addRow()">+ Adicionar Regra</button>
</div>

<div class="text-center mt-3">
  <button type="submit" class="btn btn-primary btn-lg">💾 Salvar</button>
</div>

<datalist id="peer-list">
{% for p in peers %}
  <option value="{{ p.name }}">
{% endfor %}
</datalist>

<hr class="mt-5">
<h4>🔒 Ramais Protegidos (não podem ser monitorados)</h4>
<p class="text-muted">Marque "Protegido" nos ramais que não podem ser spiados.</p>
<div class="table-responsive">
<table class="table table-sm">
  <thead><tr><th>Ramal</th><th>Nome</th><th>Protegido</th></tr></thead>
  <tbody>
{% for p in peers %}
  <tr>
    <td>{{ p.name }}</td>
    <td>{{ p.display_name or '' }}</td>
    <td>
      <input type="hidden" name="peer_id" value="{{ p.id }}">
      <input type="checkbox" class="form-check-input" name="spy_protected_{{ p.id }}" value="1"{% if p.spy_protected %} checked{% endif %}>
    </td>
  </tr>
{% endfor %}
  </tbody>
</table>
</div>
</form>

<script>
let rowCounter = {{ rules|length }};
function addRow() {
  const tbody = document.getElementById('rules-tbody');
  const noRow = document.getElementById('no-rules-row');
  if (noRow) noRow.remove();
  rowCounter++;
  const id = 'new_' + rowCounter;
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td><input type="hidden" name="id" value="${id}"><input type="text" class="form-control form-control-sm" name="spy_ext_${id}" style="width:100px" list="peer-list"></td>
    <td><input type="text" class="form-control form-control-sm" name="tgt_ext_${id}" style="width:100px" list="peer-list"></td>
    <td><select class="form-select form-select-sm" name="spy_type_${id}"><option value="all">Todos</option><option value="chanspy">Só Escuta</option><option value="whisper">Sussurro</option><option value="barge">Intervir</option></select></td>
    <td class="text-center"><input type="checkbox" class="form-check-input" name="enabled_${id}" value="1" checked></td>
    <td><button type="button" class="btn btn-sm btn-danger" onclick="this.closest('tr').remove()">×</button></td>
  `;
  tbody.appendChild(tr);
}
</script>

{% endblock %}