{% extends "base.html" %}
{% block title %}Birthdays & Anniversaries — Mornings{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <h2>Birthdays & Anniversaries</h2>
    <p>Family birthday and anniversary reminders</p>
</div>

<div class="mb-6 animate-in">
    <a href="{{ root_path }}/birthdays/new" class="btn btn-primary">Add Occasion</a>
</div>

{% if birthdays %}
<div class="table-wrap animate-in">
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Date</th>
            <th>Reminder Time</th>
            <th>Device</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    {% for b in birthdays %}
        <tr>
            <td>{{ b.name }}</td>
            <td>{{ (b.type or "birthday") | capitalize }}</td>
            <td class="text-mono">{{ b.birth_date }}</td>
            <td class="text-mono">{{ b.reminder_time }}</td>
            <td>{{ b.airplay_device or "Default" }}</td>
            <td>
                <div class="action-group">
                    <a href="{{ root_path }}/birthdays/{{ b.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
                    <form method="post" action="{{ root_path }}/birthdays/{{ b.id }}/delete" class="inline-form">
                        <button type="submit" class="btn btn-danger btn-sm"
                                hx-confirm="Delete this occasion?">Delete</button>
                    </form>
                </div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</div>
{% else %}
<div class="empty-state animate-in">
    <p>No occasions yet. <a href="{{ root_path }}/birthdays/new">Add one</a>.</p>
</div>
{% endif %}
{% endblock %}