{% extends "base.html" %}

{% block title %}Horarios Especiales{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-4">
        <div class="card p-4">
            <h4 class="fw-bold mb-4">Agregar Horario Especial</h4>
            <p class="text-muted small">Úsalo para días específicos que no siguen tu horario semanal habitual.</p>
            <form method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <label class="form-label">Fecha</label>
                    {{ form.date }}
                </div>
                <div class="row">
                    <div class="col-6 mb-3">
                        <label class="form-label">Inicio</label>
                        {{ form.start_time }}
                    </div>
                    <div class="col-6 mb-3">
                        <label class="form-label">Fin</label>
                        {{ form.end_time }}
                    </div>
                </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 Horarios Especiales</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>Horario</th>
                        <th class="text-end pe-4">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in special_days %}
                    <tr>
                        <td class="ps-4 fw-medium">{{ item.date|date:"D, d M Y" }}</td>
                        <td>{{ item.start_time|time:"H:i" }} - {{ item.end_time|time:"H:i" }}</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 horarios especiales 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 %}