{% extends "base.html" %}
{% block title %}Sounds — Mornings{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <h2>Sounds</h2>
    <p>Upload and manage audio files for announcements</p>
</div>

<form method="post" action="{{ root_path }}/sounds/upload" enctype="multipart/form-data" class="mb-8 animate-in">
    <div class="upload-row">
        <div class="form-group" style="margin-bottom: 0;">
            <label for="file">Audio File <small>(10 MB max)</small></label>
            <input type="file" id="file" name="file" accept="audio/*" required>
        </div>
        <div class="form-group" style="margin-bottom: 0;">
            <label for="name">Display Name <small>(optional)</small></label>
            <input type="text" id="name" name="name" placeholder="Defaults to filename">
        </div>
        <div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </div>
    </div>
</form>

{% if sounds %}
<div class="table-wrap animate-in">
<table>
    <thead>
        <tr><th>Name</th><th>File</th><th>Size</th><th>Preview</th><th>Actions</th></tr>
    </thead>
    <tbody>
    {% for s in sounds %}
        <tr>
            <td>{{ s.name }}</td>
            <td class="text-mono text-muted">{{ s.filename }}</td>
            <td class="text-mono">{{ "%.1f"|format(s.size / 1024) }} KB</td>
            <td>
                <audio controls preload="none">
                    <source src="{{ root_path }}/static/audio/{{ s.filename }}">
                </audio>
            </td>
            <td>
                <div class="action-group">
                    <button type="button" class="btn btn-secondary btn-sm test-btn" data-url="{{ root_path }}/sounds/{{ s.id }}/test">Test</button>
                    <form method="post" action="{{ root_path }}/sounds/{{ s.id }}/delete" class="inline-form">
                        <button type="submit" class="btn btn-danger btn-sm"
                                hx-confirm="Delete {{ s.name }}?">Delete</button>
                    </form>
                </div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</div>
{% else %}
<div class="empty-state animate-in">
    <p>No sounds uploaded yet.</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 %}