{#
  partials/results_table.html — Results summary table with filter buttons
  Context variables:
    execution_results — list of dicts:
      test_case, description, time, step, status, error_message, step_id
#}

<div class="table-wrap">
    <table class="rtable" id="executionResultsTable">
        <thead>
            <tr>
                <th>Test Case ID</th>
                <th>Description</th>
                <th>Duration (s)</th>
                <th>Step</th>
                <th>Status</th>
                <th>Error Message</th>
            </tr>
        </thead>
        <tbody id="rtb">
            {% for result in execution_results %}
            {% set status_lower = result.status | lower %}
            {% if status_lower == 'fail' %}
            <tr data-status="{{ status_lower }}"
                onclick="togDetail(this)"
                style="cursor:pointer">
                <td style="font-weight:600;color:var(--fail)">{{ result.test_case }}</td>
                <td class="text-m trunc" style="max-width:240px">{{ result.description | default("—") }}</td>
                <td class="mono {% if result.time | default(0) | float > 3 %}dur-slow{% elif result.time | default(0) | float > 1 %}dur-med{% else %}dur-fast{% endif %}">
                    {{ "%.2f" | format(result.time | default(0)) }}s
                </td>
                <td class="text-m">
                    {% if result.step_id %}
                    <span onclick="event.stopPropagation();goStepById('{{ result.test_case }}','{{ result.step_id }}')"
                          title="Jump to step"
                          style="cursor:pointer;display:inline-flex;align-items:center;gap:4px;color:var(--fail-text)">
                        {{ result.step | default("—") }}
                        <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" style="flex-shrink:0;opacity:0.7"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </span>
                    {% else %}
                    {{ result.step | default("—") }}
                    {% endif %}
                </td>
                <td><span class="s-badge fail">FAIL</span></td>
                <td style="color:var(--fail-text)">
                    {% if result.step_id %}
                    <span onclick="event.stopPropagation();goStepById('{{ result.test_case }}','{{ result.step_id }}')"
                          class="trunc"
                          title="{{ result.error_message | default('') }}"
                          style="max-width:160px;display:inline-block;vertical-align:middle;cursor:pointer;text-decoration:underline;text-decoration-style:dotted">
                        {{ result.error_message | default("—", true) or "—" }}
                    </span>
                    {% else %}
                    <span class="trunc" style="max-width:160px;display:inline-block;vertical-align:middle">
                        {{ result.error_message | default("—", true) or "—" }}
                    </span>
                    {% endif %}
                    <svg style="vertical-align:middle;transition:transform .2s" class="detail-chev"
                         xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path d="M19 9l-7 7-7-7"/>
                    </svg>
                </td>
            </tr>
            <tr class="detail-row collapsed">
                <td colspan="6">
                    {% if result.error_message %}
                    <div class="err-box">
                        <div class="err-title">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"
                                 viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/>
                            </svg>
                            Assertion Error
                        </div>
                        <pre>{{ result.error_message }}</pre>
                    </div>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr data-status="{{ status_lower }}"
                onclick="goTC('{{ result.test_case }}')">
                <td style="font-weight:600">{{ result.test_case }}</td>
                <td class="text-m trunc" style="max-width:240px">{{ result.description | default("—") }}</td>
                <td class="mono {% if result.time | default(0) | float > 3 %}dur-slow{% elif result.time | default(0) | float > 1 %}dur-med{% else %}dur-fast{% endif %}">
                    {{ "%.2f" | format(result.time | default(0)) }}s
                </td>
                <td class="text-m">{{ result.step | default("—") }}</td>
                <td>
                    {% if status_lower == "pass" %}
                    <span class="s-badge pass">PASS</span>
                    {% elif status_lower == "warn" %}
                    <span class="s-badge warn">WARN</span>
                    {% else %}
                    <span class="s-badge" style="background:var(--muted);color:var(--muted-foreground)">{{ result.status | upper }}</span>
                    {% endif %}
                </td>
                <td class="text-m trunc" style="max-width:280px">
                    {% if result.step_id %}
                    <span onclick="event.stopPropagation();goStepById('{{ result.test_case }}','{{ result.step_id }}')"
                          title="{{ result.error_message | default('') }}"
                          style="cursor:pointer;text-decoration:underline;text-decoration-style:dotted">
                        {{ result.error_message | default("—", true) or "—" }}
                    </span>
                    {% else %}
                    {{ result.error_message | default("—", true) or "—" }}
                    {% endif %}
                </td>
            </tr>
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
</div>