{% extends "_base.html" %}
{% block title %}{{ show.title }} — 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 flex flex-col md:flex-row items-start justify-between gap-8">
    <div class="flex-1">
      <h1 class="text-3xl font-bold mb-2">{{ show.title }}</h1>
      <p class="text-gray-600 dark:text-gray-400 mb-8">{{ show.description }}</p>

      <div class="flex flex-wrap items-center gap-4">
        <form method="post" action="/check"
              hx-post="/check" hx-target="#log-check-content" hx-swap="innerHTML"
              hx-indicator="#log-check" class="m-0">
          <input type="hidden" name="slug" value="{{ slug }}">
          <button type="submit" class="px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors shadow-sm">Run checks</button>
        </form>
        <form method="post" action="/generate"
              hx-post="/generate" hx-target="#log-generate-content" hx-swap="innerHTML"
              hx-indicator="#log-generate" class="m-0">
          <input type="hidden" name="slug" value="{{ slug }}">
          <button type="submit" class="px-4 py-2 rounded-md bg-gray-900 hover:bg-gray-800 text-white dark:bg-gray-100 dark:hover:bg-white dark:text-gray-900 text-sm font-medium transition-colors shadow-sm">Generate feed</button>
        </form>
      </div>
    </div>
    {% set show_img_str = show.image_url | string %}
    {% set has_show_img = show_img_str and show_img_str != 'None' %}
    {% if has_show_img %}
    <div class="hidden md:block flex-shrink-0 w-48 h-48 overflow-hidden bg-gray-50 dark:bg-[#121214]">
      <img src="{{ show.image_url }}" alt="Show cover" referrerpolicy="no-referrer" class="w-full h-full object-cover">
    </div>
    {% endif %}
  </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">Activity</h2>
    <div class="log-slot" id="log-check">
      <div class="working htmx-indicator">
        <span class="spinner"></span> Running checks…
      </div>
      <div id="log-check-content">
        {% include "_check_report.html" %}
      </div>
    </div>
    <div class="log-slot" id="log-probe">
      <div class="working htmx-indicator">
        <span class="spinner"></span> Starting probe…
      </div>
      <div id="log-probe-content"></div>
    </div>
    <div class="log-slot" id="log-generate">
      <div class="working htmx-indicator">
        <span class="spinner"></span> Generating feed…
      </div>
      <div id="log-generate-content">
        {% if feed_url %}
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Feed previously generated
            {% if feed_generated_at %}on {{ feed_generated_at.strftime('%Y-%m-%d %H:%M') }}{% endif %}
            — <a href="{{ feed_url }}" download class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:underline">download podcast.xml</a>.
          </p>
        {% endif %}
      </div>
    </div>
  </div>
 </section>

<section class="mt-10 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">Episodes ({{ episodes|length }})</h2>
    <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#121214] shadow-sm">
      <table class="w-full table-fixed text-left border-collapse text-sm">
        <colgroup>
          <col class="w-16">
          <col>
          <col class="w-40">
          <col class="w-24">
          <col class="w-28">
        </colgroup>
        <thead class="bg-gray-50 dark:bg-[#1a1a1c] border-b border-gray-200 dark:border-gray-800">
          <tr>
            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">#</th>
            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">Title</th>
            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">Publish date</th>
            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">Duration</th>
            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300 text-center">Status</th>
          </tr>
        </thead>
          {% for ep in episodes %}
          {%- set pe = probe.get(ep.guid) -%}
          {% include "_episode_row.html" %}
          {% endfor %}
      </table>
    </div>
  </div>
</section>
{% endblock %}