{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1>{{ show.name }} -- Preview</h1>
    <div class="action-group">
        <a href="{{ root_path }}/shows" class="btn btn-ghost">Back</a>
        <form method="post" action="{{ root_path }}/shows/{{ show.id }}/preview" class="inline-form">
            <button type="submit" class="btn btn-secondary">Re-render Preview</button>
        </form>
        <form method="post" action="{{ root_path }}/shows/{{ show.id }}/render" class="inline-form">
            <button type="submit" class="btn btn-secondary">Render Full Show</button>
        </form>
        <form method="post" action="{{ root_path }}/shows/{{ show.id }}/play" class="inline-form">
            <button type="submit" class="btn btn-primary" {{ 'disabled' if not render or render.status != 'ready' }}>Play</button>
        </form>
        {% if render and render.status in ('pending', 'rendering') %}
        <form method="post" action="{{ root_path }}/shows/{{ show.id }}/cancel" class="inline-form">
            <button type="submit" class="btn btn-danger">Cancel</button>
        </form>
        {% endif %}
    </div>
</div>

{% if render %}
<div class="card">
    <h3>Render Status:
        <span class="badge {{ 'badge-done' if render.status == 'ready' else 'badge-running' if render.status in ('pending', 'rendering') else 'badge-failed' }}">
            {{ render.status }}
        </span>
    </h3>
    <p>Rendered at: {{ render.rendered_at }}</p>
    {% if render.status == 'ready' %}
    <video controls width="100%" style="max-width: 960px">
        <source src="{{ root_path }}/shows/media/{{ render.video_path.split('/shows/')[-1] }}" type="video/mp4">
    </video>
    {% endif %}
</div>
{% else %}
<div class="empty-state">No renders yet. Click "Render Full Show" above to start one.</div>
{% endif %}

{% if render and render.status in ('pending', 'rendering') %}
<script>
(function() {
    var poll = setInterval(function() {
        fetch("{{ root_path }}/shows/{{ show.id }}/render/status")
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status !== "pending" && data.status !== "rendering") {
                    clearInterval(poll);
                    location.reload();
                }
            });
    }, 3000);
})();
</script>
{% endif %}

{% if segments %}
<h2>Script</h2>
<div class="table-wrap">
<table>
    <thead>
        <tr><th>Offset</th><th>Template</th><th>Narration</th></tr>
    </thead>
    <tbody>
    {% for seg in segments %}
        <tr>
            <td class="text-mono">{{ "%d:%02d" | format(seg.offset_seconds // 60, seg.offset_seconds % 60) }}</td>
            <td><span class="badge">{{ seg.image_template }}</span></td>
            <td>{{ seg.text }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</div>
{% endif %}
{% endblock %}