{% extends "base.html" %}

{% block title %}Queue — Dionysis Media Video{% endblock %}

{% block content %}
<div class="card">
    <h1>Dionysis Media Video</h1>
    <p class="small">Combine an image and an audio file into a YouTube-ready 1080p MP4 video. Uploads are queued and processed in order.</p>
</div>

<div class="card">
    <h2>New Job</h2>
    <form action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data">
        <label for="title">Title (optional)</label>
        <input type="text" id="title" name="title" placeholder="Untitled">

        <div class="grid-2">
            <div>
                <label for="image">Image file</label>
                <input type="file" id="image" name="image" accept="image/*" required>
            </div>
            <div>
                <label for="audio">Audio file</label>
                <input type="file" id="audio" name="audio" accept="audio/*" required>
            </div>
        </div>

        <div style="margin-top: 16px;">
            <button type="submit">Add to Queue</button>
        </div>
    </form>
    {% if cfg.ADMIN_PASSWORD %}
    <p class="small">This app is password protected. Add ?password=... to URLs or use /admin/login.</p>
    {% endif %}</div>

<div class="card">
    <h2>Queue</h2>
    {% if jobs %}
    <table>
        <thead>
            <tr>
                <th>#ID</th>
                <th>Title</th>
                <th>Status</th>
                <th>Created</th>
                <th>Updated</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for job in jobs %}
            <tr>
                <td>#{{ job.id }}</td>
                <td>{{ job.title }}</td>
                <td>
                    {% if job.status == 'error' %}
                        <span class="status error" title="Click to view error" onclick="toggleError({{ job.id }})">{{ job.status }}</span>
                        <div id="error-{{ job.id }}" class="error-detail" style="display:none;">{{ job.error_message or 'No error message.' }}</div>
                    {% else %}
                        <span class="status {{ job.status }}">{{ job.status }}</span>
                    {% endif %}
                </td>
                <td>{{ job.created_at }}</td>
                <td>{{ job.updated_at }}</td>
                <td class="actions">
                    {% if job.status == 'complete' %}
                        <a class="button" href="{{ url_for('download', job_id=job.id) }}">Download MP4</a>
                    {% endif %}
                    {% if job.status == 'error' %}
                        <form action="{{ url_for('retry_job', job_id=job.id) }}" method="post">
                            <button type="submit" class="secondary">Retry</button>
                        </form>
                    {% endif %}
                    {% if job.status != 'processing' %}
                        <form action="{{ url_for('delete_job', job_id=job.id) }}" method="post" onsubmit="return confirm('Delete job #{{ job.id }}?')">
                            <button type="submit" class="danger">Delete</button>
                        </form>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
        <div class="empty">No jobs yet. Upload an image and audio file above.</div>
    {% endif %}
</div>

<script>
function toggleError(id) {
    var el = document.getElementById('error-' + id);
    if (el) {
        el.style.display = el.style.display === 'none' ? 'block' : 'none';
    }
}
</script>

<meta http-equiv="refresh" content="5">
{% endblock %}