{% extends "base.html" %}
{% block title %} — Blog{% endblock %}
{% block content %}
<div x-data="blogPanel()" x-init="loadVideos()" class="max-w-5xl space-y-6">
  <div>
    <h1 class="text-xl font-semibold mb-1">Blog</h1>
    <p class="text-sm text-zinc-500 dark:text-zinc-400">
      Write an original piece about a stored video, in any format and voice — a
      review, a news report, an essay. The transcript is the source; the model
      writes something new in the style you describe. Uses the default provider.
    </p>
  </div>

  <form @submit.prevent="convert()" class="space-y-3">
    <div class="flex flex-col gap-1 text-sm">
      <span class="text-zinc-500 dark:text-zinc-400">Video</span>
      <select x-model="videoId"
              class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-2">
        <option value="">Select a fetched video…</option>
        <template x-for="v in videos" :key="v.id">
          <option :value="v.id" :disabled="!v.has_transcript"
                  x-text="v.title + (v.has_transcript ? '' : ' (no transcript)')"></option>
        </template>
      </select>
    </div>

    <div class="flex flex-wrap gap-4 text-sm items-end">
      <label class="flex flex-col gap-1">
        <span class="text-zinc-500 dark:text-zinc-400">Length</span>
        <select x-model="length"
                class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
          <option value="short">Short</option>
          <option value="medium">Medium</option>
          <option value="long">Long</option>
        </select>
      </label>
      <label class="flex flex-col gap-1 flex-1 min-w-64">
        <span class="text-zinc-500 dark:text-zinc-400">Style / format</span>
        <input type="text" x-model="style"
               placeholder="e.g. a movie review in the style of Siskel & Ebert; or a TV newscaster reporting on it"
               class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
      </label>
      <label class="flex flex-col gap-1 flex-1 min-w-48">
        <span class="text-zinc-500 dark:text-zinc-400">Title override (optional)</span>
        <input type="text" x-model="title"
               class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
      </label>
    </div>

    <div class="flex items-center gap-3">
      <button type="submit" :disabled="!videoId || running"
              class="rounded bg-accent px-4 py-2 text-white text-sm font-medium disabled:opacity-50">
        <span x-text="running ? 'Converting…' : 'Convert'"></span>
      </button>
      <button type="button" x-show="running" @click="cancelJob(jobId)"
              class="rounded border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-sm">
        Cancel
      </button>
      <button type="button" x-show="markdown && !running" @click="download()"
              class="rounded border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-sm">
        Download .md
      </button>
      <span x-show="running" class="text-xs text-zinc-500" x-text="progress"></span>
      <span x-show="wordCount && !running" class="text-xs text-zinc-500"
            x-text="wordCount + ' words · ' + (modelUsed || 'model')"></span>
      <span x-show="cost && !running" class="text-xs text-zinc-400" x-text="formatCost(cost)"></span>
      <span x-show="error" class="text-sm text-accent" x-text="error"></span>
    </div>
  </form>

  <div x-show="markdown" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="border border-zinc-200 dark:border-zinc-800 rounded p-4 overflow-auto max-h-[36rem]">
      <div class="text-xs uppercase tracking-wide text-zinc-400 mb-2">Preview</div>
      <div class="prose-blog text-sm" x-html="rendered"></div>
    </div>
    <div class="border border-zinc-200 dark:border-zinc-800 rounded p-4 overflow-auto max-h-[36rem]">
      <div class="text-xs uppercase tracking-wide text-zinc-400 mb-2">Markdown</div>
      <pre class="text-xs whitespace-pre-wrap font-mono" x-text="markdown"></pre>
    </div>
  </div>
</div>
{% endblock %}