{% extends 'base.html' %}

{% block title %}Listar Militantes{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h2>Lista de Militantes</h2>
        <a href="{{ url_for('novo_militante') }}" class="btn btn-primary mb-3">Novo Militante</a>
        
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>CPF</th>
                    <th>Email</th>
                    <th>Telefone</th>
                    <th>Endereço</th>
                    <th>Filiado</th>
                </tr>
            </thead>
            <tbody>
                {% for militante in militantes %}
                <tr class="clickable-row" data-href="{{ url_for('editar_militante', id=militante.id) }}">
                    <td>{{ militante.nome }}</td>
                    <td>{{ militante.cpf }}</td>
                    <td>{{ militante.email }}</td>
                    <td>{{ militante.telefone }}</td>
                    <td>{{ militante.endereco }}</td>
                    <td>{{ 'Sim' if militante.filiado else 'Não' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
.clickable-row {
    cursor: pointer;
}
.clickable-row:hover {
    background-color: #f5f5f5;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const rows = document.querySelectorAll('.clickable-row');
    rows.forEach(row => {
        row.addEventListener('click', function() {
            window.location.href = this.dataset.href;
        });
    });
});
</script>
{% endblock %}