{#
  Metrics Section — 5 cards: Total, Passed, Failed, Pass Rate, Duration
  Uses V2 CSS classes from components.css (no Tailwind dependency).

  Context variables:
    metrics.total        — int
    metrics.passed       — int
    metrics.failed       — int
    metrics.pass_rate    — float (0-100)
    metrics.pass_rate_str — str (formatted, e.g. "85.0")
    metrics.duration     — str (formatted, e.g. "12.34")

  Global:
    pass_rate_color(rate) — returns V2 CSS class: clr-pass | clr-warn | clr-fail
#}

<div class="metrics-grid">

    <!-- Total Tests -->
    <div class="metric-card">
        <div class="metric-icon info-i">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
            </svg>
        </div>
        <div class="metric-label">Total Tests</div>
        <div class="metric-value">{{ metrics.total }}</div>
    </div>

    <!-- Passed -->
    <div class="metric-card">
        <div class="metric-icon pass-i">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        </div>
        <div class="metric-label">Passed</div>
        <div class="metric-value pass-v">{{ metrics.passed }}</div>
    </div>

    <!-- Failed -->
    <div class="metric-card{% if metrics.failed > 0 %} metric-card-fail{% endif %}">
        <div class="metric-icon info-i">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </div>
        <div class="metric-label">Failed</div>
        <div class="metric-value{% if metrics.failed > 0 %} fail-v{% endif %}">{{ metrics.failed }}</div>
    </div>

    <!-- Pass Rate -->
    {%- set pr_cls    = pass_rate_color(metrics.pass_rate) -%}
    {%- set _donut_pass = metrics.pass_rate >= 80 -%}
    {%- set _d_clr   = 'var(--pass)' if _donut_pass else ('var(--warn)' if metrics.pass_rate >= 50 else 'var(--fail)') -%}
    {%- set _offset  = 188.5 * (1 - metrics.pass_rate / 100) -%}
    <style>.donut-fg-c{stroke:{{ _d_clr }}}.donut-txt{fill:{{ _d_clr }}}@keyframes donut-fill{to{stroke-dashoffset:{{ "%.1f"|format(_offset) }}}}</style>
    <div class="metric-card">
        <div class="metric-icon info-i">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
        </div>
        <div class="metric-label">Pass Rate</div>
        <div class="donut-wrap">
            <svg viewBox="0 0 68 68" width="64" height="64">
                <circle class="donut-bg-c" cx="34" cy="34" r="30"/>
                <circle class="donut-fg-c{% if _donut_pass %} pass-rate-pass{% endif %}"
                        cx="34" cy="34" r="30" transform="rotate(-90 34 34)"/>
                <text class="donut-txt{% if _donut_pass %} pass-rate-pass{% endif %} {{ pr_cls }}"
                      x="34" y="34">{{ metrics.pass_rate_str }}%</text>
            </svg>
        </div>
    </div>

    <!-- Duration -->
    <div class="metric-card">
        <div class="metric-icon info-i">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
        <div class="metric-label">Duration</div>
        <div class="metric-value">{{ metrics.duration }}s</div>
    </div>

</div>