{% extends "base.html" %}

{% block title %}Festivos y Vacaciones{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-4">
        <div class="card p-4">
            <h4 class="fw-bold mb-4">Agregar Festivo</h4>
            <p class="text-muted small">Los días festivos bloquean todas las reservas de ese día.</p>
            <form method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <label class="form-label">Fecha</label>
                    {{ form.date }}
                </div>
                <div class="mb-3">
                    <label class="form-label">Etiqueta (Opcional)</label>
                    {{ form.label }}
                </div>
                <button type="submit" class="btn btn-primary w-100">Agregar</button>
            </form>
        </div>
    </div>

    <div class="col-md-8">
        <h2 class="fw-bold mb-4">Tus Días Bloqueados</h2>
        <div class="card border-0 shadow-sm">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Fecha</th>
                        <th>Descripción</th>
                        <th class="text-end pe-4">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in holidays %}
                    <tr>
                        <td class="ps-4 fw-medium">{{ item.date|date:"D, d M Y" }}</td>
                        <td>{{ item.label|default:"-" }}</td>
                        <td class="text-end pe-4">
                            <button class="btn btn-link text-danger p-0">Eliminar</button>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="3" class="text-center py-4 text-muted">No tienes días festivos registrados.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    input {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
    }
</style>
{% endblock %}