{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h3>Categorias</h3>
  <a class="btn btn-primary" href="{% url 'cadastrar_categoria' %}">Nova Categoria</a>
</div>

<form class="mb-3">
  <div class="input-group">
    <input name="busca" value="{{ busca }}" class="form-control" placeholder="Buscar categoria...">
    <button class="btn btn-outline-secondary">Buscar</button>
  </div>
</form>

<table class="table table-striped">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Descrição</th>
      <th>Ativa</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for c in categorias %}
    <tr>
      <td>{{ c.nome }}</td>
      <td>{{ c.descricao|default:"-" }}</td>
      <td>{{ c.ativa|yesno:"Sim,Não" }}</td>
      <td>
        <a class="btn btn-sm btn-outline-secondary" href="{% url 'detalhe_categoria' c.pk %}">Ver</a>
        <a class="btn btn-sm btn-outline-primary" href="{% url 'editar_categoria' c.pk %}">Editar</a>
        <form action="{% url 'toggle_categoria' c.pk %}" method="post" style="display:inline">{% csrf_token %}
          <button class="btn btn-sm btn-warning" type="submit">{% if c.ativa %}Inativar{% else %}Ativar{% endif %}</button>
        </form>
      </td>
    </tr>
    {% empty %}
    <tr><td colspan="4">Nenhuma categoria encontrada.</td></tr>
    {% endfor %}
  </tbody>
</table>

{% if categorias.has_other_pages %}
  <nav>
    <ul class="pagination">
      {% if categorias.has_previous %}<li class="page-item"><a class="page-link" href="?page={{ categorias.previous_page_number }}">Anterior</a></li>{% endif %}
      <li class="page-item disabled"><span class="page-link">Página {{ categorias.number }} de {{ categorias.paginator.num_pages }}</span></li>
      {% if categorias.has_next %}<li class="page-item"><a class="page-link" href="?page={{ categorias.next_page_number }}">Próxima</a></li>{% endif %}
    </ul>
  </nav>
{% endif %}

{% endblock %}