{% extends "base.html" %}
{% block title %}Runtime Findings{% endblock %}

{% block extra_css %}
<style>
    .runtime-findings-page {
        max-width: 100%;
        min-width: 0;
    }
    .runtime-findings-page .page-header {
        margin-bottom: 1.25rem;
    }
    .runtime-findings-page .page-header__text {
        min-width: 0;
        flex: 1 1 12rem;
    }
    .runtime-findings-page .page-header__lenses {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        flex-shrink: 0;
    }
    .runtime-findings-page .panel {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .runtime-findings-table {
        width: 100%;
        min-width: 36rem;
        table-layout: fixed;
    }
    .runtime-findings-table th:nth-child(1),
    .runtime-findings-table td:nth-child(1) { width: 6.5rem; }
    .runtime-findings-table th:nth-child(3),
    .runtime-findings-table td:nth-child(3) { width: 6.5rem; }
    .runtime-findings-table th:nth-child(4),
    .runtime-findings-table td:nth-child(4) { width: 7rem; }
    .runtime-findings-table th:nth-child(5),
    .runtime-findings-table td:nth-child(5) { width: 4.5rem; }
    .runtime-findings-table th:nth-child(6),
    .runtime-findings-table td:nth-child(6) { width: 7.5rem; }
    .runtime-findings-table td {
        vertical-align: top;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .runtime-findings-table .cell-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        overflow: hidden;
        line-height: 1.35;
        max-width: 100%;
    }
    .runtime-findings-table .cell-mono {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 100%;
    }
    .runtime-findings-table .cell-when {
        font-size: 0.75rem;
        white-space: nowrap;
    }
</style>
{% endblock %}

{% block content %}
<div class="runtime-findings-page">
    <div class="page-header">
        <div class="page-header__text">
            <h1 class="page-title">Findings</h1>
            <p class="muted" style="margin: 0.35rem 0 0;">Runtime detection from gateway traces.</p>
        </div>
        <div class="page-header__lenses">
            <div class="lens-toggle" role="tablist" aria-label="Findings lens">
                <a class="lens-toggle__item" href="{% url 'ui:findings_explorer' %}?source=code" role="tab" aria-selected="false">Static code</a>
                <a class="lens-toggle__item is-active" href="{% url 'ui:findings_runtime' %}" role="tab" aria-selected="true">Runtime detection</a>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-header">
            <h2 class="panel-title">Runtime detections ({{ total_count }})</h2>
        </div>
        {% if findings %}
        <div class="table-scroll">
            <table class="table runtime-findings-table">
                <thead>
                    <tr>
                        <th>Severity</th>
                        <th>Title</th>
                        <th>Surface</th>
                        <th>Model</th>
                        <th>Risk</th>
                        <th>When</th>
                    </tr>
                </thead>
                <tbody>
                    {% for f in findings %}
                    <tr>
                        <td><span class="severity-badge severity-{{ f.severity }}">{{ f.severity }}</span></td>
                        <td><span class="cell-title" title="{{ f.title }}">{{ f.title }}</span></td>
                        <td><code class="cell-mono" title="{{ f.trace_type }}">{{ f.surface_label|default:f.trace_type }}</code></td>
                        <td><span class="cell-mono" title="{{ f.model }}">{{ f.model|default:"—" }}</span></td>
                        <td>{{ f.risk_score|floatformat:2 }}</td>
                        <td class="muted cell-when">{{ f.started_display|default:f.started_at|default:"—" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="muted" style="padding: 2rem; text-align: center;">No runtime detections yet.</p>
        {% endif %}
    </div>
</div>
{% endblock %}