{% extends "_base.html" %}
{% block title %}{{ episode.title or 'New episode' }} — offshore{% endblock %}
{% block content %}
<h1>{{ 'New episode' if is_new else 'Edit episode' }}</h1>

<form method="post" action="/episodes/save" class="stack"
      hx-post="/episodes/save"
      hx-target="#save-status"
      hx-swap="innerHTML">
  <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">

  {% if not is_new %}
  <label>GUID</label>
  <div class="muted" style="font-family: ui-monospace, SFMono-Regular, Menlo, monospace; align-self: center;">
    {{ episode.guid }}
    <div style="font-size: .8rem;">Write-once. Changing it would look like a brand-new episode to subscribers.</div>
  </div>
  {% endif %}

  <label>Title</label>            <input type="text" name="title" value="{{ episode.title }}" required>
  <label>Subtitle</label>         <input type="text" name="subtitle" value="{{ episode.subtitle or '' }}">
  <label>Description</label>      <textarea name="description" style="min-height: 3rem;">{{ episode.description or '' }}</textarea>

  <label>pub_date</label>
  <input type="datetime-local" name="pub_date"
         value="{{ episode.pub_date.strftime('%Y-%m-%dT%H:%M') }}"
         {% if not is_new %}disabled title="pub_date is locked. Use Republish to change it."{% endif %} required>

  <label>Episode number</label>   <input type="number" name="episode_number" value="{{ episode.episode_number if episode.episode_number is not none else '' }}">
  <label>Season</label>            <input type="number" name="season" value="{{ episode.season if episode.season is not none else '' }}">
  <label>Type</label>
    <select name="episode_type">
      {% for t in ['full', 'trailer', 'bonus'] %}
        <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 %}>

  <label>Audio URL</label>         <input type="url" name="audio_url" value="{{ episode.audio.url }}" required>
  <label>Image URL</label>         <input type="url" name="image_url" value="{{ episode.image_url or '' }}">
  <label>Episode page URL</label>  <input type="url" name="link" value="{{ episode.link or '' }}">

  <label>People</label>
  <div>
    <p class="muted" style="margin-top:0;">Hosts and guests, chosen from the show roster (edit under Show settings). Also drives <code>&lt;itunes:author&gt;</code> in the feed.</p>
    <div id="persons-editor"></div>
    <input type="hidden" name="persons_json" id="persons-json" value='{{ persons_json|tojson }}'>
    <button type="button" onclick="addPersonRow('host','')">+ host</button>
    <button type="button" onclick="addPersonRow('guest','')">+ guest</button>
  </div>

  <label>Shownote (Markdown)</label>
  <div>
    <textarea id="shownote-md" name="shownote_md"
              hx-post="/preview" hx-trigger="keyup changed delay:400ms" hx-target="#shownote-preview">{{ episode.shownote_md }}</textarea>
    <h4>Preview</h4>
    <div id="shownote-preview" class="preview"></div>
  </div>

  <div class="full row">
    <button type="submit" class="primary">Save</button>
    {% if not is_new %}
      <button type="button" onclick="document.getElementById('republish-dialog').showModal()">Republish…</button>
      <button type="submit" formaction="/episodes/{{ episode.guid }}/delete" formmethod="post" class="danger"
              onclick="return confirm('Delete this episode? Its lock entry is preserved.')">Delete</button>
      <button type="button" hx-post="/episodes/{{ episode.guid }}/probe" hx-target="#probe-result"
              hx-vals='{"slug": "{{ slug }}"}'>Probe now</button>
    {% endif %}
  </div>
  <div id="save-status" class="full"></div>
</form>

<div id="probe-result"></div>

{% if not is_new %}
<dialog id="republish-dialog">
  <form method="post" action="/episodes/{{ episode.guid }}/republish">
    <input type="hidden" name="slug" value="{{ slug }}">
    <h3>Republish episode</h3>
    <p>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>New pub_date <input type="datetime-local" name="new_pub_date" required
      value="{{ episode.pub_date.strftime('%Y-%m-%dT%H:%M') }}"></label>
    <div class="row" style="margin-top: 1rem;">
      <button type="submit" class="danger">I understand, republish</button>
      <button type="button" onclick="this.closest('dialog').close()">Cancel</button>
    </div>
  </form>
</dialog>
{% endif %}

<script>
  // Render an initial preview so the pane isn't empty on load.
  htmx.ajax('POST', '/preview', {
    target: '#shownote-preview',
    values: { shownote_md: document.getElementById('shownote-md').value },
  });

  const rosterMap = {{ roster_json|tojson }};
  const roster = rosterMap.map(p => p.id);
  const rosterById = {};
  rosterMap.forEach(p => rosterById[p.id] = p);

  function personsFromInput() {
    try { return JSON.parse(document.getElementById('persons-json').value || '[]'); }
    catch (e) { return []; }
  }
  function writePersons(list) {
    document.getElementById('persons-json').value = JSON.stringify(list);
    renderPersons();
  }
  function renderPersons() {
    const list = personsFromInput();
    const root = document.getElementById('persons-editor');
    root.innerHTML = '';
    list.forEach((p, i) => {
      const row = document.createElement('div');
      row.className = 'row';
      row.style.marginBottom = '.25rem';
      const role = document.createElement('select');
      ['host', 'cohost', 'guest', 'editor', 'producer'].forEach(r => {
        const o = document.createElement('option');
        o.value = r; o.text = r; if (p.role === r) o.selected = true;
        role.appendChild(o);
      });
      role.onchange = e => { list[i].role = e.target.value; writePersons(list); };
      const ref = document.createElement('select');
      roster.forEach(id => {
        const o = document.createElement('option');
        o.value = id; o.text = `${rosterById[id].name} (${id})`;
        if (p.ref === id) o.selected = true;
        ref.appendChild(o);
      });
      ref.onchange = e => { list[i].ref = e.target.value; writePersons(list); };
      const del = document.createElement('button');
      del.type = 'button'; del.textContent = '×';
      del.onclick = () => { list.splice(i, 1); writePersons(list); };
      row.append(role, ref, del);
      root.appendChild(row);
    });
  }
  function addPersonRow(role) {
    const list = personsFromInput();
    if (roster.length === 0) { alert('Add someone to the roster first (Show → Add person).'); return; }
    list.push({ role, ref: roster[0] });
    writePersons(list);
  }
  renderPersons();
</script>
{% endblock %}