{% extends "base.html" %}
{% block title %}Presupuestos{% endblock %}
{% block page_title %}Presupuestos{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('presupuestos.nuevo') }}" class="btn btn-primary btn-sm">
  <i class="bi bi-plus-lg me-1"></i>Nuevo presupuesto
</a>
{% endblock %}

{% block content %}
<div class="card">
  <div class="card-body p-0">
    {% if presupuestos %}
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th>Número</th>
            <th>Cliente</th>
            <th>Fecha</th>
            <th>Válido hasta</th>
            <th>Estado</th>
            <th class="text-end">Total</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for p in presupuestos %}
          <tr onclick="window.location='{{ url_for('presupuestos.detalle', id=p.id) }}'" style="cursor:pointer">
            <td class="fw-semibold">{{ p.numero }}</td>
            <td>{{ p.cliente_nombre or '—' }}</td>
            <td>{{ p.fecha }}</td>
            <td>{{ p.fecha_validez or '—' }}</td>
            <td>
              <span class="badge-estado-{{ p.estado }}" style="padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:600">
                {{ p.estado|capitalize }}
              </span>
            </td>
            <td class="text-end fw-semibold">{{ "%.2f"|format(p.total) }} €</td>
            <td class="text-end" onclick="event.stopPropagation()">
              <a href="{{ url_for('presupuestos.detalle', id=p.id) }}" class="btn btn-sm btn-outline-primary btn-action">
                <i class="bi bi-eye"></i>
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
      <i class="bi bi-file-earmark-text fs-1 d-block mb-2"></i>
      <p>No hay presupuestos todavía.</p>
      <a href="{{ url_for('presupuestos.nuevo') }}" class="btn btn-primary btn-sm">
        Crear el primero
      </a>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}