{% extends "_base.html" %}
{% block title %}{{ episode.title or 'New episode' }} — offshore{% endblock %}
{% block content %}
<div class="flex flex-col md:flex-row items-stretch justify-between gap-8 mb-8">
  <div class="flex-1 flex flex-col justify-between">
    <div>
      <h1 class="text-3xl font-bold mb-2">{{ 'New episode' if is_new else 'Edit episode' }}</h1>
      <p class="text-sm text-gray-500 dark:text-gray-400"><span class="text-gray-600 dark:text-gray-400">*</span> required</p>
    </div>
    {% set audio_url = (episode.audio.url | string) if episode.audio else '' %}
    {% set has_audio = audio_url and audio_url != 'None' and not is_new %}
    {% if has_audio %}
    <div class="mt-6">
      <div data-audio-player class="flex items-center gap-3 w-full max-w-md bg-white dark:bg-gray-800 rounded-md p-2 border border-gray-200 dark:border-gray-700 shadow-sm">
        <audio data-audio-element src="{{ episode.audio.url }}" preload="metadata" class="hidden"></audio>
        
        <button type="button" data-play-btn class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 hover:bg-gray-800 dark:hover:bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500">
          <svg data-icon-play class="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          <svg data-icon-pause class="w-4 h-4 hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
        </button>

        <div class="flex-1 flex items-center h-5 cursor-pointer group" data-progress-container>
          <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full relative overflow-hidden group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
            <div data-progress-fill class="absolute top-0 left-0 h-full bg-gray-900 dark:bg-gray-100 w-0 pointer-events-none"></div>
          </div>
        </div>

        <div data-time-display class="text-xs font-mono text-gray-500 dark:text-gray-400 w-24 text-right">
          0:00 / 0:00
        </div>
      </div>
    </div>
    {% endif %}
  </div>
    {% set show_img_str = (show.image_url | string) if show.image_url else '' %}
    {% set show_img = show_img_str if show_img_str != 'None' else '' %}
    {% set ep_img_str = (episode.image_url | string) if episode.image_url else '' %}
    {% set ep_img = ep_img_str if ep_img_str != 'None' else '' %}
    {% set active_img = ep_img or show_img %}
    
    <div data-cover-container data-fallback-url="{{ show_img }}" class="hidden md:block flex-shrink-0 w-48 h-48 overflow-hidden bg-gray-50 dark:bg-[#121214]" {% if not active_img %}style="display: none;"{% endif %}>
      <img data-cover-image src="{{ active_img }}" alt="Cover" referrerpolicy="no-referrer" class="w-full h-full object-cover">
    </div>
</div>

<form method="post" action="/episodes/save" class="ui-form-grid mb-12"
      hx-post="/episodes/save" hx-target="#save-status" hx-swap="innerHTML" hx-indicator="#save-status">
  <input type="hidden" name="slug" value="{{ slug }}">
  <input type="hidden" name="is_new" value="{{ 'true' if is_new else 'false' }}">
  <input type="hidden" name="original_guid" value="{{ episode.guid }}">
  <input type="hidden" name="skip_audio_verify" id="skip-audio-verify" value="false">

  <label>Draft</label>
  <input type="checkbox" id="draft-checkbox" data-draft-checkbox name="draft" value="true" {% if episode.meta.draft %}checked{% endif %} class="rounded border-gray-300 text-gray-700 dark:text-gray-300 focus:ring-gray-500 place-self-start mt-2">

  {% if not is_new %}
  <label>GUID</label>
  <div class="w-full">
    <input type="text" value="{{ episode.guid }}" disabled title="Episode GUID. This should never be changed." class="font-mono bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 cursor-not-allowed">
    <div class="ui-muted text-xs mt-1">{% if episode.guid.startswith('draft-') %}A permanent GUID will be generated when you publish this draft.{% else %}Generated on episode creation and shouldn’t be edited. Changing it would look like a brand-new episode to subscribers.{% endif %}</div>
  </div>
  {% endif %}

  <label>Title <span class="text-gray-600 dark:text-gray-400">*</span></label>
  <input type="text" name="title" value="{{ episode.title }}" required>
  <label>Subtitle</label>
  <input type="text" name="subtitle" value="{{ episode.subtitle or '' }}">
  <label>Publish date <span class="text-gray-600 dark:text-gray-400">*</span></label>
  <input type="datetime-local" name="pub_date" value="{{ episode.pub_date.strftime('%Y-%m-%dT%H:%M') }}" {% if not is_new %}readonly title="pub_date is locked. Use Republish to change it."{% endif %} required {% if not is_new %}class="bg-gray-100 dark:bg-gray-800 cursor-not-allowed"{% endif %}>
  <label>Season &amp; Episode</label>
  <div class="flex gap-2 w-full"><input type="number" name="season" placeholder="Season" aria-label="Season" value="{{ episode.season if episode.season is not none else '' }}"><input type="number" step="any" name="episode_number" placeholder="Episode" aria-label="Episode number" value="{{ episode.episode_number if episode.episode_number is not none else '' }}"></div>
  <label>Type</label>
  <select name="episode_type">{% for t in episode_types %}<option value="{{ t }}" {% if episode.episode_type == t %}selected{% endif %}>{{ t }}</option>{% endfor %}</select>
  <label>Explicit</label>
  <input type="checkbox" name="explicit" value="true" {% if episode.explicit %}checked{% endif %} class="rounded border-gray-300 text-gray-700 dark:text-gray-300 focus:ring-gray-500 place-self-start mt-2">

  <label>Audio URL <span class="text-gray-600 dark:text-gray-400" id="audio-url-req">{% if not episode.meta.draft %}*{% endif %}</span></label>
  <div class="w-full">
    <input type="url" id="audio-url-input" data-audio-url-input name="audio_url" value="{{ '' if is_new else episode.audio.url or '' }}" placeholder="{{ 'https://example.com/episode.mp3' if is_new else '' }}" {% if not episode.meta.draft %}required{% endif %}>
    {% if probe_entry is defined and probe_entry %}
      <p class="ui-muted mt-2">
        {% if probe_entry.ok %}
          <span class="status-badge ok rounded inline-block" style="padding: 2px; vertical-align: -2px;" title="probed"><span class="sr-only">probed</span>{% include "icon_circle.svg" %}</span>
          {{ probe_entry.mime_type or 'unknown type' }}
          {%- if probe_entry.length_bytes %}, {% if probe_entry.length_bytes >= 1048576 %}{{ "%.1f MB"|format(probe_entry.length_bytes / 1048576) }}{% elif probe_entry.length_bytes >= 1024 %}{{ "%.1f KB"|format(probe_entry.length_bytes / 1024) }}{% else %}{{ probe_entry.length_bytes }} bytes{% endif %}{% endif -%}{%- if probe_entry.duration_seconds %}{% set total = probe_entry.duration_seconds|int %}{% set h = total // 3600 %}{% set m = (total % 3600) // 60 %}{% set s = total % 60 %}, {% if h %}{{ '%d:%02d:%02d'|format(h, m, s) }}{% else %}{{ '%d:%02d'|format(m, s) }}{% endif %}{% endif -%}{% else %}<span class="status-badge fail rounded inline-block" style="padding: 2px; vertical-align: -2px;" title="probe failed"><span class="sr-only">probe failed</span>{% include "icon_triangle.svg" %}</span>{{ probe_entry.error or 'unknown error' }}{% endif %}. Accessed {{ probe_entry.probed_at.strftime('%Y-%m-%d %H:%M') }}.
      </p>
    {% elif episode.audio.length_bytes %}
      <p class="ui-muted mt-2">
        <span class="status-badge ok rounded inline-block" style="padding: 2px; vertical-align: -2px;" title="probed"><span class="sr-only">probed</span>{% include "icon_circle.svg" %}</span>
        {{ episode.audio.mime_type or 'unknown type' }}
        {%- if episode.audio.length_bytes %}, {% if episode.audio.length_bytes >= 1048576 %}{{ "%.1f MB"|format(episode.audio.length_bytes / 1048576) }}{% elif episode.audio.length_bytes >= 1024 %}{{ "%.1f KB"|format(episode.audio.length_bytes / 1024) }}{% else %}{{ episode.audio.length_bytes }} bytes{% endif %}{% endif -%}
        {%- if episode.audio.duration_seconds %}
          {% set total = episode.audio.duration_seconds|int %}
          {% set h = total // 3600 %}{% set m = (total % 3600) // 60 %}{% set s = total % 60 %}
          , {% if h %}{{ '%d:%02d:%02d'|format(h, m, s) }}{% else %}{{ '%d:%02d'|format(m, s) }}{% endif %}
        {% endif -%}
      </p>
    {% endif %}
  </div>

  <label>Episode artwork URL</label>
  <div class="w-full">
    <input type="url" name="image_url" value="{{ episode.image_url or '' }}">
    {% if episode_image_check.image == "fail" %}<p class="ui-muted mt-2"><span class="status-badge fail rounded inline-block" style="padding: 2px; vertical-align: -2px;" title="image check failed"><span class="sr-only">image check failed</span>
                        {% include "icon_triangle.svg" %}
                      </span> {{ episode_image_check.image_warnings[0] if episode_image_check.image_warnings else "could not verify this image" }}</p>{% elif episode_image_check.image_warnings %}{% for w in episode_image_check.image_warnings %}<p class="ui-muted mt-2"><span class="status-badge warn rounded inline-block" style="padding: 2px; vertical-align: -2px;" title="note">
                        <span class="sr-only">note</span>
                        {% include "icon_square.svg" %}
                      </span> {{ w }}</p>{% endfor %}{% endif %}
  </div>
  <label>Episode page link</label>
  <input type="url" name="link" value="{{ episode.link or '' }}">

  <label>People</label>
  <div class="w-full">
    <p class="ui-muted mb-2">Hosts and guests, chosen from the show roster or create new entries right here.</p>
    <div id="persons-editor" class="mb-2" data-person-editor data-mode="remote" data-slug="{{ slug }}" data-roster='{{ roster_json|tojson }}' data-roles='{{ person_roles|tojson }}'></div>
    <input type="hidden" name="persons_json" id="persons-json" value='{{ persons_json|tojson }}'>
    <div class="flex gap-2"><button type="button" data-add-person-role="host" class="ui-button">+ host</button><button type="button" data-add-person-role="guest" class="ui-button">+ guest</button></div>
  </div>

  <label>Shownote (Markdown)<br /><span class="text-xs ui-muted font-normal"><a href="https://offshore.pressed.press/MD/index.xml">Learn more</a></span></label>
  <div class="w-full flex flex-col gap-4"><textarea id="shownote-md" name="shownote_md" class="font-mono text-sm h-64 resize-y" hx-post="/preview" hx-trigger="load, keyup changed delay:400ms" hx-target="#shownote-preview">{{ episode.shownote_md }}</textarea><div class="w-full"><h4 class="text-sm font-semibold mb-2">Preview</h4><div id="shownote-preview" class="w-full min-h-64 p-4 rounded-md border border-dashed border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-[#1a1a1c] overflow-y-auto"></div></div></div>

  <div class="col-span-full flex flex-wrap gap-3 mt-4"><button type="submit" class="ui-button ui-button-primary">Save</button>{% if not is_new %}<button type="button" onclick="document.getElementById('republish-dialog').showModal()" class="ui-button">Republish…</button><button type="submit" formaction="/episodes/delete?guid={{ episode.guid|guid_query }}" formmethod="post" class="ui-button ui-button-danger" onclick="return confirm('Delete this episode? Its lock entry is preserved.')">Delete</button><button type="button" class="ui-button" hx-post="/episodes/probe?guid={{ episode.guid|guid_query }}" hx-target="#probe-result" hx-vals='{"slug": "{{ slug }}"}'>Probe audio</button>{% endif %}</div>
  <div id="save-status" class="col-span-full log-slot" hx-indicator="#save-status"><div class="working"><span class="spinner"></span> Saving{% if not is_new %} and verifying audio{% endif %}…</div></div>
</form>

<div id="probe-result" class="mb-12"></div>
{% if not is_new %}
<dialog id="republish-dialog" class="backdrop:bg-black/50 p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#121214] text-gray-900 dark:text-gray-100 max-w-lg w-full shadow-xl"><form method="post" action="/episodes/republish?guid={{ episode.guid|guid_query }}"><input type="hidden" name="slug" value="{{ slug }}"><h3 class="text-xl font-semibold mb-2">Republish episode</h3><p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Changing an episode's <code>pub_date</code> will look like a <strong>brand new item</strong> to some podcast clients. Subscribers may re-download and be notified.</p><label class="block font-medium mb-1">New pub_date</label><input type="datetime-local" name="new_pub_date" required value="{{ episode.pub_date.strftime('%Y-%m-%dT%H:%M') }}" class="w-full bg-transparent mb-6"><div class="flex gap-3 justify-end"><button type="button" onclick="this.closest('dialog').close()" class="ui-button">Cancel</button><button type="submit" class="ui-button ui-button-primary">I understand, republish</button></div></form></dialog>
{% endif %}
{% endblock %}
{% block person_add_modal %}{% include "_add_person_overlay.html" %}{% endblock %}