{% extends "_base.html" %}
{% from "_category_select.html" import category_select %}
{% block title %}New show — offshore{% endblock %}
{% block content %}
<h1 class="text-3xl font-bold mb-2">Scaffold a new show</h1>
<p class="ui-muted mb-2">Create a new data file for a podcast. You can edit any field except the slug later.</p>
<p class="ui-muted mb-8"><span class="text-gray-600 dark:text-gray-400">*</span> required</p>

<form method="post" action="/init" class="ui-form-grid">
  <label>Slug</label>
  <div>
    <input type="text" name="slug" required pattern="[a-zA-Z0-9_-]+" class="w-full border border-gray-300 bg-white px-3 py-2 outline-none focus:ring-2 focus:ring-gray-500 dark:border-gray-700 dark:bg-[#121214]">
    <p class="ui-muted mt-1">The slug is a permanent internal identifier for files and directories inside offshore. It cannot be changed later and does not influence the feed content or the published show.</p>
  </div>

  <label>Title</label>
  <input type="text" name="title" required>

  <label>Description</label>
  <textarea name="description" required class="min-h-16"></textarea>

  <label>Homepage URL</label>
  <input type="url" name="link">

  <label>Language</label>
  <select name="language" required>
    {% for code, name in common_languages %}
      <option value="{{ code }}" {% if code == "en" %}selected{% endif %}>{{ name }} ({{ code }})</option>
    {% endfor %}
    {% set common_codes = [] %}
    {% for code, name in common_languages %}
      {% if common_codes.append(code) %}{% endif %}
    {% endfor %}
    <optgroup label="All Languages">
      {% for code, name in all_languages %}
        {% if code not in common_codes %}
          <option value="{{ code }}">{{ name }} ({{ code }})</option>
        {% endif %}
      {% endfor %}
    </optgroup>
  </select>

  <label>People</label>
  <div class="w-full">
    <p class="ui-muted mb-2">Hosts and other roles for the show.</p>
    <div id="persons-editor" data-person-editor data-mode="local" data-roster="[]" data-roles='{{ person_roles|tojson }}' class="mb-2"></div>
    <input type="hidden" name="persons_json" id="persons-json" value="[]">
    <input type="hidden" name="roster_json" id="roster-json" value="[]">
    <button type="button" data-add-person-role="host" class="px-3 py-1 rounded text-sm border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">+ people</button>
  </div>

  <label>Cover image URL</label>
  <input type="url" name="image_url" required>

  <label>Feed self URL</label>
  <input type="url" name="feed_self_url" required>

  {{ category_select("Society & Culture", "", apple_categories) }}

  <label>Explicit</label>
  <input type="checkbox" name="explicit" value="true">

  <div class="ui-full"><button type="submit" class="ui-button ui-button-primary">Create show</button></div>
</form>
{% endblock %}

{% block person_add_modal %}
  {% include "_add_person_overlay.html" %}
{% endblock %}