{% extends "_base.html" %}
{% from "_category_select.html" import category_select %}
{% block title %}Show settings — offshore{% endblock %}
{% block content_wrapper_class %}max-w-none p-0{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto p-4 md:p-6 lg:p-10">
<h1 class="text-3xl font-bold mb-2">Show settings</h1>
<p class="ui-muted mb-8"><span class="text-gray-600 dark:text-gray-400">*</span> required</p>

<form method="post" action="/show/edit" class="ui-form-grid mb-12">
  <input type="hidden" name="slug" value="{{ slug }}">
  <label>Title <span class="text-gray-600 dark:text-gray-400">*</span></label><input type="text" name="title" value="{{ show.title }}" required>
  <label>Subtitle</label><input type="text" name="subtitle" value="{{ show.subtitle or '' }}">
  <label>Description <span class="text-gray-600 dark:text-gray-400">*</span></label><textarea name="description" required class="font-mono text-sm" style="min-height:8rem">{{ show.description }}</textarea>
  <label>Homepage URL</label><input type="url" name="link" value="{{ show.link or '' }}">
  <label>Language <span class="text-gray-600 dark:text-gray-400">*</span></label>
  <select name="language" required>
    {% set common_codes = common_languages|map(attribute=0)|list %}{% set all_codes = all_languages|map(attribute=0)|list %}
    {% if show.language not in common_codes and show.language not in all_codes %}<option value="{{ show.language }}" selected>{{ show.language }}</option>{% endif %}
    {% for code, name in common_languages %}<option value="{{ code }}" {% if show.language == code %}selected{% endif %}>{{ name }} ({{ code }})</option>{% endfor %}
    <optgroup label="All Languages">{% for code, name in all_languages %}{% if code not in common_codes %}<option value="{{ code }}" {% if show.language == code %}selected{% endif %}>{{ name }} ({{ code }})</option>{% endif %}{% endfor %}</optgroup>
  </select>
  <label>Type</label><select name="type"><option value="episodic" {% if show.type == 'episodic' %}selected{% endif %}>episodic</option><option value="serial" {% if show.type == 'serial' %}selected{% endif %}>serial</option></select>
  <label>Copyright</label>
  <div class="flex gap-2 w-full">
    {% if copyright_year_mode == 'range' %}{% set copyright_year_display = earliest_year|string + '-' + current_year|string %}{% elif copyright_year_mode == 'current' %}{% set copyright_year_display = current_year|string %}{% else %}{% set copyright_year_display = 'none' %}{% endif %}
    <details id="copyright-year-picker" class="relative w-48"><summary class="flex cursor-pointer list-none items-center justify-between border border-gray-300 bg-white px-3 py-2 dark:border-gray-700 dark:bg-gray-950"><span id="copyright-year-display">{{ copyright_year_display }}</span><span aria-hidden="true" class="ml-2 text-gray-500">⌄</span></summary><div role="listbox" aria-label="Copyright year format" class="absolute left-0 top-full z-20 mt-1 w-full border border-gray-300 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-950"><button type="button" role="option" data-value="current" data-display="{{ current_year }}" class="block w-full px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-800">{{ current_year }} (current year)</button><button type="button" role="option" data-value="range" data-display="{{ earliest_year }}-{{ current_year }}" class="block w-full px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-800">{{ earliest_year }}{% if earliest_year != current_year %}-{{ current_year }}{% endif %} (auto-calculated)</button><button type="button" role="option" data-value="none" data-display="none" class="block w-full px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-800">none</button></div><input type="hidden" name="copyright_year_mode" value="{{ copyright_year_mode }}"></details>
    <input type="text" name="copyright" value="{{ show.copyright or '' }}" placeholder="Name or Organization" class="flex-1">
  </div>
  <label>Owner</label><div class="flex flex-wrap md:flex-nowrap gap-2 items-center w-full"><input type="text" name="owner_name" id="owner_name" value="{{ show.owner.name if show.owner else '' }}" placeholder="Name" oninput="document.getElementById('owner_email').required = !!this.value.trim();" class="flex-1"><input type="email" name="owner_email" id="owner_email" value="{{ show.owner.email if show.owner else '' }}" placeholder="Email" {% if show.owner and show.owner.name %}required{% endif %} class="flex-[2]"><label class="flex items-center gap-2 whitespace-nowrap text-sm cursor-pointer"><input type="checkbox" name="owner_locked" value="true" {% if show.owner %}{% if show.owner.locked %}checked{% endif %}{% else %}checked{% endif %}> Locked?</label></div>

  <label>People</label><div class="w-full"><p class="ui-muted mb-2">Hosts and other main participants for the show.</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 }}'><button type="button" data-add-person-role="host" class="ui-button">+ people</button></div>
  <label>Cover image URL <span class="text-gray-600 dark:text-gray-400">*</span></label><input type="url" name="image_url" value="{{ show.image_url }}" required>
  {% if show_image_check.image == "fail" %}<div class="col-span-full"><p class="ui-muted mt-1"><span class="badge fail gap-1" aria-label="image check failed" title="image check failed">{% include "icon_triangle.svg" %} image check failed</span> {{ show_image_check.image_warnings[0] if show_image_check.image_warnings else "could not verify this image" }}</p></div>{% elif show_image_check.image_warnings %}<div class="col-span-full">{% for w in show_image_check.image_warnings %}<p class="ui-muted mt-1"><span class="badge warn gap-1" aria-label="image" title="image">{% include "icon_square.svg" %} image</span> {{ w }}</p>{% endfor %}</div>{% endif %}
  <label>Feed self URL <span class="text-gray-600 dark:text-gray-400">*</span></label><input type="url" name="feed_self_url" value="{{ show.feed_self_url }}" required>
  <label>WebSub URL</label><input type="url" name="hub_url" value="{{ show.hub_url or '' }}">
  <label>Keywords</label><input type="text" name="keywords" value="{{ show.keywords|join(', ') }}" placeholder="comma-separated">
  <div class="col-span-full">{{ category_select(show.categories[0].cat, show.categories[0].sub or "", apple_categories) }}</div>
  <label>Explicit</label><input type="checkbox" name="explicit" value="true" {% if show.explicit %}checked{% endif %} class="place-self-start mt-2">
  <label>Output path<br><span class="text-xs ui-muted font-normal">Full file path for the generated feed including the filename (e.g. <code>/my/site/podcast.xml</code>).</span></label>
  <div class="w-full"><input type="text" name="output_path" value="{{ output_path_value if output_path_value is defined else (show.output_path or '') }}" placeholder="{{ show_dir }}/podcast.xml" class="font-mono {% if output_path_error is defined and output_path_error %}border-gray-500{% endif %}">{% if output_path_error is defined and output_path_error %}<p class="ui-muted mt-1">{{ output_path_error }}</p>{% endif %}</div>
  <div class="col-span-full mt-4"><button type="submit" class="ui-button ui-button-primary">Save</button></div>
</form>
</div>

<section class="border-t border-gray-200 dark:border-gray-800">
<div class="max-w-4xl mx-auto px-4 py-4 md:px-6 md:py-5 lg:px-10 lg:py-4">
<h2 class="text-xl font-semibold mb-4">People roster</h2>
<div class="overflow-x-auto rounded-lg border text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-950 shadow-sm mb-8"><table id="people-roster-table" class="ui-table"><thead><tr class="bg-gray-100/80 dark:bg-gray-800/80"><th class="font-medium">Name</th><th class="font-medium">Link</th><th></th></tr></thead><tbody>{% for p in show.people %}<tr><td>{{ p.name }}</td><td>{% if p.href and p.href.startswith('mailto:') %}{{ p.href[7:] }} <span class="text-xs opacity-70">(Email)</span>{% else %}{{ p.href or '' }}{% endif %}</td><td class="whitespace-nowrap text-right"><button type="button" data-edit-person data-pid="{{ p.id }}" data-pname="{{ p.name }}" data-phref="{{ p.href or '' }}" class="ui-button">Edit</button></td></tr>{% endfor %}</tbody></table></div>

<h3 class="text-lg font-medium mb-4">Add person</h3>
<form method="post" action="/show/people/add" hx-boost="false" class="ui-form-grid mb-12"><input type="hidden" name="slug" value="{{ slug }}"><label>Name <span class="text-gray-600 dark:text-gray-400">*</span></label><input type="text" name="name" required><label>Link Type</label><select id="add-href-type" name="href_type"><option value="none">None</option><option value="website" selected>Website</option><option value="email">Email</option></select><label>Link</label><input id="add-href-value" type="url" name="href_value" placeholder="https://…"><div class="col-span-full mt-2"><button type="submit" class="ui-button">Add</button></div></form>

</div>
</section>

<section class="border-t border-gray-200 dark:border-gray-800">
<div class="max-w-4xl mx-auto px-4 py-4 md:px-6 md:py-5 lg:px-10 lg:py-4">
<h2 class="text-xl font-semibold mb-4">Advanced</h2><form id="advanced-settings-form" method="post" action="/show/edit-toggles" class="mb-12"><input type="hidden" name="slug" value="{{ slug }}"><div class="ui-form-grid mb-6"><label>Show GUID</label><input type="text" value="{{ show.guid }}" disabled title="Show 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><p class="ui-muted mb-4">Disable remote checks completely. When set, offshore will not try to validate remote images and audio files from the url you provided. Explicit "Probe Audio" functionality will still fetch remote audio files.</p><div class="flex flex-wrap gap-6 items-start"><div class="flex flex-col gap-1"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="disable_remote_image_checks" value="true" {% if show.meta.disable_remote_image_checks %}checked{% endif %} hx-post="/show/edit-toggles" hx-trigger="change" hx-include="#advanced-settings-form" hx-target="#advanced-image-save-status" hx-swap="innerHTML"> Disable image checks</label><div id="advanced-image-save-status" class="min-h-5" aria-live="polite"></div></div><div class="flex flex-col gap-1"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="disable_remote_audio_checks" value="true" {% if show.meta.disable_remote_audio_checks %}checked{% endif %} hx-post="/show/edit-toggles" hx-trigger="change" hx-include="#advanced-settings-form" hx-target="#advanced-audio-save-status" hx-swap="innerHTML"> Disable audio checks</label><div id="advanced-audio-save-status" class="min-h-5" aria-live="polite"></div></div></div></form>

<h3 class="text-lg font-semibold mb-4" id="xsl">XSL Stylesheet</h3>
<p class="ui-muted mb-4">The XSL stylesheet can make your RSS feed appears as a human-readable webpage when viewed in a browser. Upload a custom .xsl file to customize the appearance, or revert to the default.</p>
<div id="xsl-status-container" hx-get="/show/{{ slug }}/xsl" hx-trigger="load">
  <p class="ui-muted">Loading...</p>
</div>

</div>
</section>

<section class="border-t border-gray-200 dark:border-gray-800">
<div class="max-w-4xl mx-auto px-4 py-4 md:px-6 md:py-5 lg:px-10 lg:py-4">
<h2 class="text-xl font-semibold mb-4 text-red-600 dark:text-red-500">Danger zone</h2><p class="mb-4">Permanently delete this show and all its episodes. This cannot be undone.</p><button type="button" onclick="document.getElementById('delete-dialog').showModal()" class="ui-button ui-button-danger mb-12">Delete show</button>
</form></dialog>
</div>
</section>
{% endblock %}

{% block person_add_modal %}{% include "_add_person_overlay.html" %}{% endblock %}
{% block person_edit_modal %}
<div id="edit-person-overlay" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-white/80 p-4 dark:bg-black/80" role="presentation" aria-hidden="true"><section role="dialog" aria-modal="true" aria-labelledby="edit-person-title" class="relative w-full max-w-lg border border-gray-200 bg-white p-6 text-gray-900 shadow-2xl dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 md:p-8"><button type="button" aria-label="Close edit person" data-close-edit-person class="absolute right-4 top-4 p-2 text-gray-500">×</button><form id="edit-person-form" hx-boost="false" method="post" action="/show/people/edit" class="grid grid-cols-1 items-baseline gap-x-4 gap-y-4 md:grid-cols-[6rem_1fr]"><h2 id="edit-person-title" class="col-span-full mb-2 pr-10 text-xl font-semibold">Edit person</h2><input type="hidden" name="slug" value="{{ slug }}"><input type="hidden" name="original_id" id="edit-original-id"><label class="font-medium">Name</label><input id="edit-person-name" type="text" name="name" required><label class="font-medium">Link Type</label><select id="edit-href-type" name="href_type"><option value="none">None</option><option value="website">Website</option><option value="email">Email</option></select><label class="font-medium">Link</label><input id="edit-href-value" type="text" name="href_value"><p id="edit-person-error" class="col-span-full m-0 min-h-[1.5em] text-sm text-gray-600 dark:text-gray-400"></p><div class="col-span-full mt-4 flex gap-3"><button type="submit" class="ui-button ui-button-primary">Save</button><button type="button" data-close-edit-person class="ui-button">Cancel</button></div></form></section></div>
{% endblock %}