{% extends 'base.html' %}
{% block title %}{{ titulo }} - {{ block.super }}{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
    <div>
        <a href="{% url 'lista_produtos' %}" class="btn btn-outline-secondary btn-sm mb-2"><i class="bi bi-arrow-left"></i> Produtos</a>
        <h2 class="mb-0"><i class="bi {{ icone }}"></i> {{ titulo }}</h2>
    </div>
    <a href="{% url rota_cadastrar %}" class="btn btn-primary"><i class="bi bi-plus-circle"></i> Cadastrar {{ singular }}</a>
</div>
<div class="card">
    <div class="card-body">
        <form method="get" class="row g-2 mb-3">
            <div class="col-12 col-md-8 col-lg-6"><input name="busca" value="{{ busca }}" class="form-control" placeholder="Buscar {{ singular }}..."></div>
            <div class="col-12 col-md-auto"><button class="btn btn-outline-primary"><i class="bi bi-search"></i> Buscar</button></div>
            {% if busca %}<div class="col-12 col-md-auto"><a href="{% url rota_lista %}" class="btn btn-outline-secondary">Limpar</a></div>{% endif %}
        </form>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead><tr><th>{{ singular }}</th><th>Produtos usando</th><th>Situação</th><th class="text-end">Ações</th></tr></thead>
                <tbody>
                    {% for item in itens %}
                    <tr>
                        <td><strong>{{ item.nome }}</strong></td>
                        <td>{{ item.produtos_associados }}</td>
                        <td>{% if item.ativo %}<span class="badge bg-success">Ativo</span>{% else %}<span class="badge bg-secondary">Inativo</span>{% endif %}</td>
                        <td class="text-end">
                            <a href="{% url rota_editar item.pk %}?next={{ request.get_full_path|urlencode }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i> Editar</a>
                            <form method="post" action="{% url rota_toggle item.pk %}" class="d-inline">{% csrf_token %}
                                <button class="btn btn-sm {% if item.ativo %}btn-outline-warning{% else %}btn-outline-success{% endif %}" type="submit">
                                    {% if item.ativo %}<i class="bi bi-eye-slash"></i> Inativar{% else %}<i class="bi bi-check-circle"></i> Ativar{% endif %}
                                </button>
                            </form>
                            {% if item.produtos_associados %}
                            <button class="btn btn-sm btn-outline-secondary" type="button" disabled title="Inative a opção; ela está sendo usada por produtos."><i class="bi bi-lock"></i> Excluir</button>
                            {% else %}
                            <form method="post" action="{% url rota_excluir item.pk %}" class="d-inline form-excluir-opcao" data-confirm="Tem certeza de que deseja excluir {{ item.nome }}?">{% csrf_token %}
                                <button class="btn btn-sm btn-outline-danger" type="submit"><i class="bi bi-trash"></i> Excluir</button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}<tr><td colspan="4" class="text-center text-muted py-4">Nenhum {{ singular }} cadastrado.</td></tr>{% endfor %}
                </tbody>
            </table>
        </div>
        {% if page_obj.has_other_pages %}
        <nav class="mt-3" aria-label="Paginação de opções">
            <ul class="pagination justify-content-center mb-0">
                {% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if busca %}&busca={{ busca|urlencode }}{% endif %}">Anterior</a></li>{% endif %}
                <li class="page-item active"><span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span></li>
                {% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if busca %}&busca={{ busca|urlencode }}{% endif %}">Próxima</a></li>{% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
 </div>
{% endblock %}
{% block extra_js %}
<script>
document.querySelectorAll('.form-excluir-opcao').forEach(form => {
    form.addEventListener('submit', event => {
        if (!window.confirm(form.dataset.confirm)) event.preventDefault();
    });
});
</script>
{% endblock %}