{#- partials/step_card.html
    Renders a single step card.

    Context:
        step  — dict with keys:
            result              (str)  PASS | FAIL | WARN | INFO | SKIP
            step_number         (str/int)
            step_title          (str)
            test_case_id        (str)
            duration            (float)
            dur_bar_width       (int)  pre-computed bar width 0-60px
            text                (str, optional)
            description         (str, optional)
            description_is_html (bool)
            is_json             (bool)
            json_raw            (object, optional)
            screenshot_html     (str, optional)
            attachment_html     (str, optional)
            http_status_code    (int, optional)   HTTP status code
            http_method         (str, optional)   GET/POST/PUT/etc.
            preview_text        (str, optional)   short preview (hidden when expanded)
            phase               (str, optional)   test phase label
            step_group          (str, optional)   step group label
            api_data            (dict, optional)  structured API data for tab rendering
        total_steps — int, total number of steps in this test case
#}

{%- set result_upper  = step.result | upper -%}
{%- set badge         = badge_map(result_upper) -%}
{%- set border_cls    = border_map(result_upper) -%}
{%- set step_id       = step.test_case_id | default('unknown') ~ '-s' ~ step.step_number | default('unknown') -%}
{%- set collapse_id   = 'collapse-' ~ step.test_case_id | default('unknown') ~ '-' ~ step.step_number | default('unknown') -%}

{%- set extra_cls = '' -%}
{%- if result_upper == 'SKIP' %}{% set extra_cls = ' skip-hl' %}{% endif -%}
{%- if result_upper == 'FAIL' and step.is_critical | default(false) %}{% set extra_cls = extra_cls ~ ' fail-hl' %}{% endif -%}

<div id="{{ step_id }}" class="scard {{ border_cls }}{{ extra_cls }}">

    <!-- Step header -->
    <div class="sh" onclick="toggleStep(this)">
        <div class="sh-left">
            {# #15 Step number: N/total #}
            <span class="sn">{{ step.step_number | default('?') }}/{{ total_steps | default('?') }}</span>

            <span class="s-badge {{ result_upper | lower }}"
                  style="{% if result_upper == 'INFO' %}background:var(--info-bg);color:var(--info-text){% elif result_upper == 'SKIP' %}background:var(--skip-bg);color:var(--skip-text){% endif %}">
                {{ result_upper }}
            </span>

            {%- if step.step_type and step.step_type not in ('info', 'default', 'compare', 'api', 'setup', 'execution', 'teardown', 'group_start') %}
            <span class="type-badge">{{ step.step_type }}</span>
            {%- endif %}

            {# #21 Root cause badge for FAIL steps #}
            {%- if result_upper == 'FAIL' %}
            {{ render_root_cause_badge(step.http_status_code, step.text) }}
            {%- endif %}

            <span class="st{% if result_upper == 'SKIP' %} sk{% endif %}">
                {{ step.step_title | default('No Title') }}
            </span>
        </div>

        <div class="flex items-c gap-2">
            {#- #16 HTTP status code badge #}
            {%- if step.http_status_code %}
            <span class="http-b {% if step.http_status_code | int < 300 %}h2{% elif step.http_status_code | int < 500 %}h4{% else %}h5{% endif %}">{{ step.http_status_code }}</span>
            {%- endif %}

            {#- #17 HTTP method badge #}
            {%- if step.http_method %}
            <span class="method-b {{ step.http_method | lower }}">{{ step.http_method }}</span>
            {%- endif %}

            <span class="sd-wrap">
                <span class="sd">{{ '%.2f' | format(step.duration | default(0)) }}s</span>
                {# #18 Duration mini bar — uses pre-computed dur_bar_width #}
                {%- set dur = step.duration | default(0) | float -%}
                {%- set bar_w = step.dur_bar_width | default(0) -%}
                {%- set bar_color = 'var(--fail)' if dur >= 3 else ('var(--warn)' if dur >= 1 else 'var(--pass)') -%}
                <div class="dur-bar" style="width:{{ bar_w }}px;background:{{ bar_color }}"></div>
            </span>
            <svg class="schev" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path d="M19 9l-7 7-7-7"/>
            </svg>
        </div>
    </div>

    {# #22 Preview text — between .sh and .sbody, hidden when step expanded (CSS-controlled via :has) #}
    {%- if step.preview_text %}
    <div class="step-preview">{{ step.preview_text }}</div>
    {%- endif %}

    <!-- Step body -->
    <div class="sbody" id="{{ collapse_id }}">
        <div class="sbody-inner">

{%- if step.text %}
            <p class="mt-3 text-sm text-m"><span style="font-weight:500;color:var(--foreground)">Text:</span> {{ step.text }}</p>
{%- endif %}

{# #26 API data tabs — rendered when step has structured api_data dict #}
{%- if step.api_data %}
    {%- set ad = step.api_data -%}
    {%- set uid = step.test_case_id | default('x') ~ step.step_number | default('0') -%}
    {#- kv summary row: Endpoint / Method / Status / Duration / Start / End -#}
    {%- if ad.url is defined and ad.url %}
    <dl class="kv" style="margin-top:0.75rem">
        <dt>Endpoint</dt><dd class="mono">{{ ad.url }}</dd>
        {%- if ad.method is defined and ad.method %}
        <dt>Method</dt><dd><span class="method-b {{ ad.method | lower }}">{{ ad.method }}</span></dd>
        {%- endif %}
        {%- if ad.http_status_code is defined and ad.http_status_code %}
        {%- set sc = ad.http_status_code | int(0) -%}
        <dt>Status</dt><dd><span class="http-b {% if sc < 300 %}h2{% elif sc < 500 %}h4{% else %}h5{% endif %}">{{ ad.http_status_code }}</span></dd>
        {%- endif %}
        {%- if ad.duration is defined and ad.duration %}
        <dt>Duration</dt><dd>{{ ad.duration }}</dd>
        {%- endif %}
        {%- if ad.start_time is defined and ad.start_time %}
        <dt>Start</dt><dd>{{ ad.start_time }}</dd>
        {%- endif %}
        {%- if ad.end_time is defined and ad.end_time %}
        <dt>End</dt><dd>{{ ad.end_time }}</dd>
        {%- endif %}
    </dl>
    {%- endif %}
    <div class="atabs" style="margin-top:0.75rem">
        <button class="atab active" onclick="swTab(this,'atc-req-{{ uid }}')">Request</button>
        {%- if ad.response_json is defined and ad.response_json %}
        <button class="atab" onclick="swTab(this,'atc-res-{{ uid }}')">Response</button>
        {%- endif %}
        <button class="atab" onclick="swTab(this,'atc-hdr-{{ uid }}')">Headers</button>
        {%- if ad.curl_command is defined and ad.curl_command %}
        <button class="atab" onclick="swTab(this,'atc-curl-{{ uid }}')">cURL</button>
        {%- endif %}
    </div>
    <div id="atc-req-{{ uid }}" class="atab-c active">
        {{- ad.req_body_json | format_json_viewer("Request Body") }}
    </div>
    {%- if ad.response_json is defined and ad.response_json %}
    <div id="atc-res-{{ uid }}" class="atab-c">
        {{- ad.response_json | format_json_viewer("Response") }}
    </div>
    {%- endif %}
    <div id="atc-hdr-{{ uid }}" class="atab-c">
        {{- ad.req_headers_json | format_json_viewer("Request Headers") }}
    </div>
    {%- if ad.curl_command is defined and ad.curl_command %}
    <div id="atc-curl-{{ uid }}" class="atab-c">
        <pre class="curl-block"><code>{{ ad.curl_command | e }}</code></pre>
    </div>
    {%- endif %}
{%- elif step.description %}
{%-   if step.description_is_html %}
            {{ step.description | safe }}
{%-   elif step.is_json and step.json_raw is not none %}
            <div class="mt-3">
                {{ step.json_raw | format_json_viewer("Description (JSON)") }}
            </div>
{%-   else %}
            <p class="mt-3 text-sm" style="font-weight:500;color:var(--foreground)">Description:</p>
            <textarea class="log-txt" readonly style="margin-top:0.5rem;width:100%;resize:vertical">{{ step.description }}</textarea>
{%-   endif %}
{%- endif %}

{%- if step.screenshot_html %}
            {{ step.screenshot_html | safe }}
{%- endif %}

{%- if step.attachment_html %}
            {{ step.attachment_html | safe }}
{%- endif %}

        </div>
    </div>

    <div class="step-foot">Duration: {{ '%.2f' | format(step.duration | default(0)) }}s</div>

</div>