@page "/clip-jobs"
@model Fragalytics.Web.Pages.ClipJobs.IndexModel
@{
    ViewData["Title"] = "Clip Jobs";
}

<section class="card">
    <h1>Clip Jobs</h1>
    <p class="muted">You can manually attach a rendered `.mp4` or `.webm` file to any clip job. Once attached, the clip is playable in the page and on related highlight views.</p>
    <table>
        <thead><tr><th>ID</th><th>Status</th><th>Renderer</th><th>Ticks</th><th>Playback</th><th>Upload</th><th>Payload</th></tr></thead>
        <tbody>
        @if (Model.ClipJobs.Count == 0)
        {
            <tr><td colspan="7" class="muted">No clip jobs created yet.</td></tr>
        }
        else
        {
            @foreach (var row in Model.ClipJobs)
            {
                <tr>
                    <td>#@row.ClipJob.Id</td>
                    <td><span class="pill status-@row.ClipJob.Status">@row.ClipJob.Status</span></td>
                    <td>@row.ClipJob.Renderer</td>
                    <td>@row.ClipJob.StartTick - @row.ClipJob.EndTick</td>
                    <td>
                        @if (row.ClipAsset is null)
                        {
                            <span class="muted">Not available</span>
                        }
                        else
                        {
                            <video class="clip-player" controls preload="metadata">
                                <source src="/clip-jobs?handler=Media&amp;clipJobId=@row.ClipJob.Id" type="@row.ClipAsset.ContentType" />
                            </video>
                        }
                    </td>
                    <td>
                        <form method="post" enctype="multipart/form-data" asp-page-handler="UploadClip">
                            <input type="hidden" name="clipJobId" value="@row.ClipJob.Id" />
                            <input type="file" name="clipUpload" accept=".mp4,.webm" required />
                            <button type="submit" class="secondary">Attach Clip</button>
                        </form>
                    </td>
                    <td><code>@string.Join(", ", row.ClipJob.Payload.Select(item => $"{item.Key}={item.Value}"))</code></td>
                </tr>
            }
        }
        </tbody>
    </table>
</section>