{% from "_log_entry.html" import log_entry %}
{%- set fail_count = job.results|rejectattr('ok')|list|length -%}
{%- set ok_count = job.completed - fail_count -%}
{%- set summary -%}
  {%- if job.running -%}
    <span class="badge warn gap-1" aria-label="probing" title="probing">probing</span> {{ job.completed }}/{{ job.total }}
  {%- elif job.error -%}
    <span class="badge fail gap-1" aria-label="error" title="error">error</span> {{ job.error }}
  {%- elif fail_count -%}
    <span class="badge fail gap-1" aria-label="{{ fail_count }} fail" title="{{ fail_count }} fail">{{ fail_count }}</span>
  {%- else -%}
    <span class="badge ok">{{ ok_count }}</span>
  {%- endif -%}
{%- endset -%}
<div id="log-probe-content"{% if job.running %}
     hx-get="/probe-status?slug={{ slug }}"
     hx-target="#log-probe-content"
     hx-swap="outerHTML"
     hx-trigger="load delay:800ms"{% endif %}>
<details class="log-entry overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#121214] shadow-sm mt-4" open>
  <summary class="cursor-pointer px-4 py-3 text-sm bg-gray-50 dark:bg-[#1a1a1c] border-b border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800/50">
    <time class="font-mono text-gray-500 dark:text-gray-400">{{ timestamp.strftime('%Y-%m-%d %H:%M') if timestamp else '' }}</time>
    <strong class="font-semibold text-gray-900 dark:text-gray-100">Audio probed</strong>
    <span class="inline-flex items-center gap-1 ml-1">{{ summary|safe }}</span>
  </summary>
  <div class="overflow-x-auto">
    {% if job.running %}
      <div class="px-4 py-4">
        <div class="ui-progress-outer"><div class="ui-progress-inner" style="width: {{ job.percent }}%"></div></div>
        <p class="ui-muted mt-2">{{ job.completed }} of {{ job.total }} episodes complete&hellip;</p>
      </div>
    {% endif %}
    {% if job.results %}
      <table class="w-full table-fixed text-left border-collapse">
        <colgroup>
          <col class="w-16">
          <col class="w-64">
          <col>
        </colgroup>
        <thead class="sr-only">
          <tr>
            <th class="px-3 py-2 text-center">Status</th>
            <th class="px-3 py-2">Where</th>
            <th class="px-3 py-2">Details</th>
          </tr>
        </thead>
        <tbody>
          {% for r in job.results %}
            <tr class="border-b border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors text-sm">
              {% set ep = episodes | selectattr("guid", "equalto", r.guid) | first if episodes is defined else none %}
              <td class="px-3 py-3 align-top text-center">
                {% if r.ok %}
                  <span class="status-badge ok rounded inline-block" style="padding: 2px;" title="ok"><span class="sr-only">ok</span>{% include "icon_circle.svg" %}</span>
                {% else %}
                  <span class="status-badge fail rounded inline-block" style="padding: 2px;" title="fail"><span class="sr-only">fail</span>{% include "icon_triangle.svg" %}</span>
                {% endif %}
              </td>
              <td class="px-3 py-3 align-top break-words text-gray-700 dark:text-gray-300">
                {% if ep %}
                  <a href="/episodes/edit?guid={{ r.guid|guid_query }}&amp;slug={{ slug|urlencode }}" class="text-gray-700 dark:text-gray-300 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white">{{ ep.title }}</a>
                {% else %}
                  <span class="ui-muted font-mono text-xs">{{ r.guid }}</span>
                {% endif %}
              </td>
              <td class="px-3 py-3 align-top break-words text-gray-700 dark:text-gray-300">{{ r.message }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </div>
</details>
</div>