{% extends "_base.html" %}
{% block title %}Import — offshore{% endblock %}
{% block content %}
<h1 class="text-3xl font-bold mb-2">Import show</h1>
<p class="ui-muted mb-8">
  Import from an RSS feed or an offshore JSON file.
  The new show is added to <code>{{ workspace.shows_dir }}</code>.
</p>
<form method="post" action="/import" hx-post="/import" hx-encoding="multipart/form-data"
      hx-target="#import-error" hx-swap="innerHTML" hx-boost="false"
      class="ui-form-grid" id="import-form" enctype="multipart/form-data">
  <label for="import-url">URL or local path</label>
  {# The two sources are exclusive: filling one greys out the other (app.js, data-exclusive). #}
  <input id="import-url" type="text" name="url" autofocus data-exclusive="import-source"
         class="disabled:cursor-not-allowed disabled:opacity-50"
         placeholder="https://example.com/feed.xml  or  /path/to/show.json">
  <label for="import-file">— OR — upload a file</label>
  {# The × sits inside the file box; !pr-10 beats the form grid's px-3 so the filename doesn't run under it. #}
  <div class="relative">
    <input id="import-file" type="file" name="file" data-exclusive="import-source"
           class="!pr-10 disabled:cursor-not-allowed disabled:opacity-50"
           accept=".json,application/json,.xml,application/rss+xml,text/xml">
    <button type="button" data-clear-file="import-file" title="Remove the chosen file" aria-label="Remove the chosen file"
            class="hidden absolute right-2 top-1/2 -translate-y-1/2 rounded px-2 py-0.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white">×</button>
  </div>
  <label for="import-slug">New slug</label>
  <input id="import-slug" type="text" name="slug" required pattern="[a-zA-Z0-9_-]+"
         placeholder="my-show">
  <label for="import-feed-self-url">Feed self URL</label>
  <input id="import-feed-self-url" type="url" name="feed_self_url" required
         placeholder="https://your-domain.com/podcast.xml" aria-describedby="import-feed-hint">
  <p id="import-feed-hint" class="ui-muted md:col-start-2 -mt-2">
    Where your regenerated feed will live.
  </p>
  <div id="import-error" class="ui-full" aria-live="polite"></div>
  <div class="ui-full">
    <button type="submit" class="ui-button ui-button-primary">Import</button>
  </div>
</form>
{% endblock %}