{% extends "base.html" %}

{% block title %}Base de Cadastros — {{ app_name }}{% endblock %}

{% block content %}
<div class="content-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <div>
            <h2 style="color: #123B6D; font-weight: 800;">👥 Base de Pessoas Cadastradas</h2>
            <p style="color: #5A6E85; font-size: 0.9rem;">Consulta global de apoiadores e mobilizados</p>
        </div>
        {% if current_user.can_write() %}
        <a href="{{ url_for('cadastros.novo') }}" class="btn-primary-orange">
            🟠 + Novo Cadastro
        </a>
        {% endif %}
    </div>

    <!-- Filtros -->
    <form method="GET" action="{{ url_for('cadastros.index') }}" style="display: flex; gap: 1rem; flex-wrap: wrap; background: #F8FAFC; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; border: 1px solid #E2E8F0;">
        <div style="flex: 1; min-width: 180px;">
            <select name="bairro" style="width: 100%; padding: 0.5rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                <option value="">[ Todos os Bairros ]</option>
                {% for b in bairros %}
                    <option value="{{ b }}" {% if bairro_filtro == b %}selected{% endif %}>{{ b }}</option>
                {% endfor %}
            </select>
        </div>

        <div style="flex: 1; min-width: 180px;">
            <select name="zona" style="width: 100%; padding: 0.5rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                <option value="">[ Todas as Zonas ]</option>
                {% for z in zonas %}
                    <option value="{{ z }}" {% if zona_filtro == z %}selected{% endif %}>{{ z }}</option>
                {% endfor %}
            </select>
        </div>

        <div style="flex: 1; min-width: 180px;">
            <select name="cadastrador_id" style="width: 100%; padding: 0.5rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                <option value="">[ Todos os Multiplicadores ]</option>
                {% for c in cadastradores %}
                    <option value="{{ c.id }}" {% if cadastrador_filtro == (c.id|string) %}selected{% endif %}>{{ c.nome }}</option>
                {% endfor %}
            </select>
        </div>

        <button type="submit" class="btn-blue" style="padding: 0.55rem 1.25rem;">Filtrar</button>
    </form>

    <div class="table-responsive">
        <table class="custom-table">
            <thead>
                <tr>
                    <th>Nome Completo</th>
                    <th>Telefone</th>
                    <th>Título / Z. / Sec.</th>
                    <th>Bairro</th>
                    <th>Zona</th>
                    <th>Multiplicado por</th>
                    <th>Data</th>
                </tr>
            </thead>
            <tbody>
                {% for c in cadastros %}
                <tr>
                    <td style="font-weight: 600; color: #123B6D;">{{ c.nome_completo }}</td>
                    <td>{{ c.telefone or 'N/A' }}</td>
                    <td>
                        {% if c.titulo_eleitor or c.zona_eleitoral or c.secao_eleitoral %}
                            <span style="font-weight: 600; font-size: 0.85rem; color: #0D9488;">
                                {{ c.titulo_eleitor or 'N/I' }}
                            </span>
                            {% if c.zona_eleitoral or c.secao_eleitoral %}
                                <br><small style="color: #64748B;">Z: {{ c.zona_eleitoral or '-' }} | Sec: {{ c.secao_eleitoral or '-' }}</small>
                            {% endif %}
                        {% else %}
                            <span style="color: #94A3B8; font-size: 0.85rem;">Não informado</span>
                        {% endif %}
                    </td>
                    <td>{{ c.bairro }}</td>
                    <td><span class="badge badge-warning" style="background: #E3F2FD; color: #1976D2;">{{ c.zona }}</span></td>
                    <td>{{ c.cadastrador.nome if c.cadastrador else 'N/A' }}</td>
                    <td style="color: #5A6E85; font-size: 0.85rem;">{{ c.criado_em.strftime('%d/%m/%Y %H:%M') }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" style="text-align: center; color: #5A6E85;">Nenhum registro encontrado.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}