{% extends "base.html" %} {% block title %}Generated Video{% endblock %} {%
block content %}
<div class="container mx-auto px-4 py-8">
  <a
    href="{{ url_for('gallery') }}"
    class="text-blue-400 hover:underline mb-4 inline-block"
    >&larr; Back to Gallery</a
  >

  {% if video %}
  <h1 class="text-2xl font-bold mb-4">Video Generation Job</h1>
  <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    {% if video.status == 'completed' and video.video_url %}
    <video src="{{ video.video_url }}" controls class="w-full"></video>
    {% elif video.status in ('queued', 'processing') %}
    <div
      class="w-full bg-black aspect-video flex flex-col items-center justify-center p-6 text-center"
      id="video-poll-status"
      data-video-id="{{ video.id }}"
    >
      <p class="text-xl font-semibold">
        Status: <strong id="poll-status-text">{{ video.status }}</strong>
      </p>
      <p class="text-gray-400 mt-2">
        Your video is being processed. This page will update automatically when
        it's ready.
      </p>
      <div class="spinner mt-4"></div>
      <button
        id="cancel-video-btn"
        class="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md text-sm"
      >
        Cancel Job
      </button>
      <p id="cancel-msg" class="text-sm mt-2 hidden"></p>
    </div>
    {% elif video.status == 'failed' %}
    <div
      class="w-full bg-black aspect-video flex flex-col items-center justify-center p-6 text-center"
    >
      <p class="text-xl font-semibold text-red-500">Generation Failed</p>
      <p class="text-gray-400 mt-2">
        {{ video.error or 'An unknown error occurred.' }}
      </p>
    </div>
    {% else %}
    <div
      class="w-full bg-black aspect-video flex flex-col items-center justify-center p-6 text-center"
    >
      <p class="text-xl font-semibold">Video Not Available</p>
      <p class="text-gray-400 mt-2">Status: {{ video.status }}</p>
    </div>
    {% endif %}

    <div class="p-6">
      <h2 class="text-xl font-semibold mb-2">Prompt</h2>
      <p class="text-gray-300 bg-gray-900 p-3 rounded-md">{{ video.prompt }}</p>
      <div class="mt-4 text-sm text-gray-400">
        <p><strong>Model:</strong> {{ video.model_id }}</p>
        <p><strong>Job ID:</strong> <code>{{ video.job_id }}</code></p>
        <p>
          <strong>Created:</strong> {{ video.created_at | fromisoformat |
          humantime }}
        </p>
        <p>
          <strong>Last Update:</strong> {{ video.updated_at | fromisoformat |
          humantime }}
        </p>
      </div>
    </div>
  </div>
  {% else %}
  <h1 class="text-2xl font-bold">Video job not found</h1>
  <p class="text-gray-400 mt-2">Could not find details for this video job.</p>
  {% endif %}
</div>
{% endblock %}