{% extends "base.html" %}
{% block title %}Schedules — Mornings{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <h2>Schedules</h2>
    <p>Morning announcements</p>
</div>

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

{% if schedules %}
<div class="table-wrap animate-in">
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Time</th>
            <th>Days</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    {% for s in schedules %}
        <tr>
            <td>{{ s.name }}
                {% if s.absorbed_by %}
                <span class="badge badge-info" title="Absorbed by show: {{ s.absorbed_by }}">
                    &#128250; {{ s.absorbed_by }}
                </span>
                {% endif %}
            </td>
            <td class="text-mono">{{ s.time }}</td>
            <td>{{ s.day_names | join(", ") }}</td>
            <td>
                <form method="post" action="{{ root_path }}/schedules/{{ s.id }}/toggle" class="inline-form">
                    <button type="submit" class="badge {{ 'badge-active' if s.enabled else 'badge-failed' }}" style="cursor: pointer;">
                        {{ "Active" if s.enabled else "Off" }}
                    </button>
                </form>
            </td>
            <td>
                <div class="action-group">
                    <button type="button" class="btn btn-secondary btn-sm test-btn" data-url="{{ root_path }}/schedules/{{ s.id }}/test">Test</button>
                    <a href="{{ root_path }}/schedules/{{ s.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
                    <form method="post" action="{{ root_path }}/schedules/{{ s.id }}/delete" class="inline-form">
                        <button type="submit" class="btn btn-danger btn-sm"
                                hx-confirm="Delete this schedule?">Delete</button>
                    </form>
                </div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</div>
{% else %}
<div class="empty-state animate-in">
    <p>No schedules yet. <a href="{{ root_path }}/schedules/new">Create one</a>.</p>
</div>
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
document.querySelectorAll('.test-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        const orig = btn.textContent;
        btn.disabled = true;
        btn.textContent = 'Playing\u2026';
        try {
            const resp = await fetch(btn.dataset.url, {method: 'POST'});
            const data = await resp.json();
            btn.textContent = data.ok ? 'Done!' : 'Error';
            setTimeout(() => { btn.textContent = orig; btn.disabled = false; }, 2000);
        } catch {
            btn.textContent = 'Error';
            setTimeout(() => { btn.textContent = orig; btn.disabled = false; }, 2000);
        }
    });
});
</script>
{% endblock %}