{% from "_bypass.html" import render_bypass %}
{% set row_id = ep.guid|episode_dom_id('row') %}
{% set details_id = ep.guid|episode_dom_id('details') %}
<tbody id="{{ row_id }}">
  <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
    <td class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 font-mono text-gray-500 dark:text-gray-400">{{ ep.episode_number if ep.episode_number is not none else '—' }}</td>
    <td class="px-4 py-3 border-b border-gray-200 dark:border-gray-800">
      <a href="/episodes/edit?guid={{ ep.guid|guid_query }}&amp;slug={{ slug|urlencode }}" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:underline">{{ ep.title }}</a>
      {% if ep.meta.draft %}<span class="status-badge warn inline-flex items-center rounded-full px-2 py-0.5 text-[0.7rem] font-medium font-mono ml-2" aria-label="DRAFT" title="DRAFT">{% include "icon_square.svg" %} DRAFT</span>{% endif %}
      <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate" title="{{ ep.guid }}">{{ ep.guid }}</div>
    </td>
    <td class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400">{{ ep.pub_date.strftime('%Y-%m-%d %H:%M') }}</td>
    <td class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400">
      {% if ep.audio.duration_seconds %}
        {% set total = ep.audio.duration_seconds|int %}
        {% set h = total // 3600 %}{% set m = (total % 3600) // 60 %}{% set s = total % 60 %}
        {% if h %}{{ '%d:%02d:%02d'|format(h, m, s) }}{% else %}{{ '%d:%02d'|format(m, s) }}{% endif %}
      {% else %}
        —
      {% endif %}
    </td>
    {%- set meta_findings = report.get_episode_findings(ep.guid, 'meta') -%}
    {%- set image_findings = report.get_episode_findings(ep.guid, 'image') -%}
    {%- set audio_findings = report.get_episode_findings(ep.guid, 'audio') -%}
    {%- set has_errors = meta_findings or image_findings or audio_findings -%}
    <td class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 text-center" {% if has_errors %}role="button" tabindex="0" aria-controls="{{ details_id }}" aria-expanded="{{ 'true' if expand_details|default(False) else 'false' }}" data-details-target="{{ details_id }}"{% endif %}>
      <div class="flex items-center justify-center gap-1">
      {%- if not has_errors -%}
        <span class="status-badge ok rounded p-1 font-mono" title="OK">
          <span class="sr-only">OK</span>
          {% include "icon_circle.svg" %}
        </span>
      {%- else -%}
        {%- macro render_badge(findings, icon_svg, a11y_text) -%}
          {%- if findings -%}
            {%- set has_fail = findings|selectattr('level', 'equalto', level_fail)|list -%}
            {%- set codes = findings|map(attribute='code')|unique|join(', ') -%}
            {%- if has_fail -%}
              <span class="status-badge fail rounded p-1 font-mono" title="{{ codes }}">
                <span class="sr-only">{{ a11y_text }}: {{ codes }}</span>
                {{ icon_svg|safe }}
              </span>
            {%- else -%}
              <span class="status-badge warn rounded p-1 font-mono" title="{{ codes }}">
                <span class="sr-only">{{ a11y_text }}: {{ codes }}</span>
                {{ icon_svg|safe }}
              </span>
            {%- endif -%}
          {%- endif -%}
        {%- endmacro -%}
        {% set icon_audio %}{% include "icon_audio.svg" %}{% endset %}
        {% set icon_image %}{% include "icon_image.svg" %}{% endset %}
        {% set icon_meta %}{% include "icon_meta.svg" %}{% endset %}
        {{ render_badge(audio_findings, icon_audio, 'Audio issues') }}
        {{ render_badge(image_findings, icon_image, 'Image issues') }}
        {{ render_badge(meta_findings, icon_meta, 'Metadata issues') }}
      {%- endif -%}
      </div>
    </td>
  </tr>
  <tr id="{{ details_id }}" class="bg-gray-200/20 dark:bg-gray-800/20" {% if not (expand_details|default(False) and has_errors) %}hidden{% endif %}>
    <td colspan="5" class="px-4 py-4 border-b border-gray-200 dark:border-gray-800">
      <div class="flex flex-col w-full">
        {%- set has_audio_fail = audio_findings | selectattr("level", "equalto", level_fail) | list | length > 0 -%}
        {%- set _show_audio_bypass = show_audio_bypass if show_audio_bypass is defined else false -%}
        {%- set _show_image_bypass = show_image_bypass if show_image_bypass is defined else false -%}

        {% set all_findings = meta_findings + image_findings + audio_findings %}
        {% if all_findings %}
          <div class="flex flex-col gap-3 w-full">
            {% for f in all_findings %}
              <div class="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 gap-y-2">
                <div class="flex min-w-0 gap-3 items-start">
                  <div class="shrink-0 mt-0.5">
                    <span class="status-badge {{ 'fail' if f.level == level_fail else 'warn' }} rounded p-1 font-mono" title="{{ f.domain.value }}">
                      <span class="sr-only">{{ f.domain.value }}</span>
                      {% if f.domain.value == 'audio' %}
                        {{ icon_audio|safe }}
                      {% elif f.domain.value == 'image' %}
                        {{ icon_image|safe }}
                      {% elif f.domain.value == 'meta' %}
                        {{ icon_meta|safe }}
                      {% else %}
                        {{ f.domain.value }}
                      {% endif %}
                    </span>
                  </div>
                  <div class="min-w-0 break-words text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{{ f.message }}</div>
                </div>
                
                <div class="shrink-0 flex items-center justify-self-end">
                  {% if loop.index0 == meta_findings|length and f.domain.value == 'image' %}
                    {%- if _show_image_bypass -%}
                      {{ render_bypass(ep.image_url, ep.guid, slug) }}
                    {%- elif image_findings|length > 0 -%}
                      <form id="recheck-form-{{ row_id }}"
                            method="post" action="/episodes/probe-image?guid={{ ep.guid|guid_query }}"
                            hx-post="/episodes/probe-image?guid={{ ep.guid|guid_query }}"
                            hx-target="closest tbody" hx-swap="outerHTML"
                            class="inline m-0">
                        <input type="hidden" name="slug" value="{{ slug }}">
                        <button type="submit" class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 htmx-loading-hide transition-colors">{{ icon_image }} recheck</button>
                        <span class="htmx-indicator text-xs text-gray-500 dark:text-gray-400 px-2">rechecking…</span>
                      </form>
                    {%- endif -%}
                  {% elif loop.index0 == meta_findings|length + image_findings|length and f.domain.value == 'audio' %}
                    {%- if _show_audio_bypass -%}
                      {{ render_bypass(ep.audio.url, ep.guid, slug) }}
                    {%- elif has_audio_fail or (pe and not pe.ok) -%}
                      <form id="reprobe-form-{{ row_id }}"
                            method="post" action="/episodes/probe?guid={{ ep.guid|guid_query }}&amp;inline=1"
                            hx-post="/episodes/probe?guid={{ ep.guid|guid_query }}&amp;inline=1"
                            hx-target="closest tbody" hx-swap="outerHTML"
                            class="inline m-0">
                        <input type="hidden" name="slug" value="{{ slug }}">
                        <button type="submit" class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 htmx-loading-hide transition-colors">{{ icon_audio }} reprobe</button>
                        <span class="htmx-indicator text-xs text-gray-500 dark:text-gray-400 px-2">reprobe…</span>
                      </form>
                    {%- endif -%}
                  {% endif %}
                </div>
              </div>
            {% endfor %}
          </div>
        {% else %}
          <p class="text-sm text-gray-500 dark:text-gray-400 m-0">No errors or warnings.</p>
        {% endif %}
      </div>
    </td>
  </tr>
</tbody>