{% extends "base.html" %}
{% block title %}Categorías{% endblock %}
{% block page_title %}Categorías{% endblock %}

{% block content %}
<div class="row g-3">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-tags me-2"></i>Categorías existentes</div>
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead><tr><th>Color</th><th>Nombre</th><th>Tipo</th><th></th></tr></thead>
          <tbody>
            {% for c in categorias %}
            <tr>
              <td>
                <span class="d-inline-block rounded-circle" style="width:18px;height:18px;background:{{ c.color }}"></span>
              </td>
              <td class="fw-semibold small">{{ c.nombre }}</td>
              <td>
                <span class="badge {% if c.tipo == 'ingreso' %}bg-success{% else %}bg-danger{% endif %} bg-opacity-75">
                  {{ c.tipo|capitalize }}
                </span>
              </td>
              <td class="text-end">
                <form method="post" action="{{ url_for('informes.eliminar_categoria', id=c.id) }}" class="d-inline"
                      onsubmit="return confirm('¿Eliminar categoría?')">
                  <button class="btn btn-outline-danger btn-action"><i class="bi bi-trash"></i></button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-lg-5">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-plus-circle me-2"></i>Nueva categoría</div>
      <div class="card-body p-4">
        <form method="post" action="{{ url_for('informes.nueva_categoria') }}">
          <div class="mb-3">
            <label class="form-label">Nombre *</label>
            <input type="text" name="nombre" class="form-control" required placeholder="Ej: Publicidad">
          </div>
          <div class="mb-3">
            <label class="form-label">Tipo *</label>
            <select name="tipo" class="form-select" required>
              <option value="gasto">Gasto</option>
              <option value="ingreso">Ingreso</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Color</label>
            <input type="color" name="color" class="form-control form-control-color" value="#6c757d">
          </div>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i>Crear categoría
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}