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

{% block extra_css %}
<style>
    .findings-cards {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .finding-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 1rem 1.1rem;
    }
    .finding-card-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .finding-card-meta {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.35rem;
        word-break: break-word;
    }
    .finding-expand {
        margin-top: 0.75rem;
        border-top: 1px solid var(--border-default);
        padding-top: 0.75rem;
    }
    .finding-expand > summary {
        list-style: none;
        cursor: pointer;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--accent-primary);
        user-select: none;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    .finding-expand > summary::-webkit-details-marker { display: none; }
    .finding-expand > summary::before {
        content: "▸";
        display: inline-block;
        transition: transform 0.15s ease;
        font-size: 0.7rem;
    }
    .finding-expand[open] > summary::before {
        transform: rotate(90deg);
    }
    .finding-body-text {
        margin-top: 0.5rem;
        font-size: 0.8125rem;
        color: var(--text-secondary);
        line-height: 1.45;
    }
    .finding-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        gap: 0.5rem 1.25rem;
        margin-top: 0.65rem;
        font-size: 0.8125rem;
    }
    .finding-detail-row {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }
    .finding-detail-row dt {
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }
    .finding-detail-row dd {
        margin: 0;
        color: var(--text-secondary);
        word-break: break-word;
    }
    .findings-explorer-form {
        --findings-control-height: 2.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-end;
    }

    .findings-explorer-form .form-group {
        margin-bottom: 0;
    }

    .findings-explorer-form .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: var(--text-secondary);
    }

    .findings-explorer-form .eeg-input {
        box-sizing: border-box;
        width: 100%;
        height: var(--findings-control-height);
        min-height: var(--findings-control-height);
        padding: 0 1.75rem 0 0.75rem;
        font-size: 0.875rem;
        line-height: 1.25;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.55rem center;
        background-size: 0.75rem;
    }

    .findings-explorer-form__field--severity .eeg-input {
        width: 9.5rem;
    }

    .findings-explorer-form__field--status .eeg-input {
        width: 9.5rem;
    }

    .findings-explorer-form__field--project .eeg-input {
        width: 12.5rem;
    }

    .findings-explorer-form__actions-label {
        visibility: hidden;
        height: 1.25rem;
        margin-bottom: 0.5rem;
        line-height: 1.25rem;
    }

    .findings-explorer-form__actions-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .findings-explorer-form__actions .btn {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        height: var(--findings-control-height);
        min-height: var(--findings-control-height);
        padding: 0 0.75rem !important;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }

    .findings-explorer-filter {
        min-width: 0;
    }

    .findings-explorer-filter svg {
        width: 0.875rem;
        height: 0.875rem;
        flex-shrink: 0;
        display: block;
    }
</style>
{% endblock %}

{% block content %}
    <div class="page-header" style="display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap;">
    <h1 class="page-title">Security Findings</h1>
    <div class="lens-toggle" role="tablist" aria-label="Findings lens">
        <a class="lens-toggle__item {% if lens != 'runtime' %}is-active{% endif %}" href="{% url 'ui:findings_explorer' %}?source=code" role="tab" aria-selected="{% if lens != 'runtime' %}true{% else %}false{% endif %}">Static code</a>
        <a class="lens-toggle__item {% if lens == 'runtime' %}is-active{% endif %}" href="{% url 'ui:findings_runtime' %}" role="tab" aria-selected="{% if lens == 'runtime' %}true{% else %}false{% endif %}">Runtime detection</a>
    </div>
</div>

<div class="panel" style="margin-bottom: 1.5rem;">
    <form method="get" class="findings-explorer-form">
        <div class="form-group findings-explorer-form__field findings-explorer-form__field--severity">
            <label for="findings-filter-severity">Severity</label>
            <select id="findings-filter-severity" name="severity" class="eeg-input">
                <option value="">All</option>
                <option value="critical" {% if filters.severity == 'critical' %}selected{% endif %}>Critical</option>
                <option value="high" {% if filters.severity == 'high' %}selected{% endif %}>High</option>
                <option value="medium" {% if filters.severity == 'medium' %}selected{% endif %}>Medium</option>
                <option value="low" {% if filters.severity == 'low' %}selected{% endif %}>Low</option>
            </select>
        </div>
        <div class="form-group findings-explorer-form__field findings-explorer-form__field--status">
            <label for="findings-filter-status">Status</label>
            <select id="findings-filter-status" name="status" class="eeg-input">
                <option value="">All</option>
                <option value="open" {% if filters.status == 'open' %}selected{% endif %}>Open</option>
                <option value="acknowledged" {% if filters.status == 'acknowledged' %}selected{% endif %}>Acknowledged</option>
                <option value="resolved" {% if filters.status == 'resolved' %}selected{% endif %}>Resolved</option>
                <option value="false_positive" {% if filters.status == 'false_positive' %}selected{% endif %}>False Positive</option>
            </select>
        </div>
        <div class="form-group findings-explorer-form__field findings-explorer-form__field--project">
            <label for="findings-filter-project">Project</label>
            <select id="findings-filter-project" name="project" class="eeg-input">
                <option value="">All Projects</option>
                {% for project in projects %}
                <option value="{{ project.pk }}" {% if filters.project == project.pk|stringformat:'s' %}selected{% endif %}>{{ project.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group findings-explorer-form__actions">
            <label class="findings-explorer-form__actions-label" aria-hidden="true">&nbsp;</label>
            <div class="findings-explorer-form__actions-row">
                <button type="submit" class="btn btn-primary findings-explorer-filter">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
                    </svg>
                    Filter
                </button>
                {% if has_filters %}
                <a href="{% url 'ui:findings_explorer' %}" class="btn btn-secondary">Clear</a>
                {% endif %}
            </div>
        </div>
    </form>
</div>

<div class="panel">
    <div class="panel-header">
        <h2 class="panel-title">{{ total_count }} Finding{{ total_count|pluralize }}</h2>
    </div>

    {% if finding_rows %}
    <div class="findings-cards">
        {% for row in finding_rows %}
        {% include "ui/partials/finding_card.html" with row=row %}
        {% endfor %}
    </div>

    {% if findings.has_other_pages %}
    <div style="display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem;">
        {% if findings.has_previous %}
        <a href="?page={{ findings.previous_page_number }}{% if filters.severity %}&severity={{ filters.severity }}{% endif %}{% if filters.status %}&status={{ filters.status }}{% endif %}{% if filters.project %}&project={{ filters.project }}{% endif %}" class="btn btn-secondary">Previous</a>
        {% endif %}
        <span style="padding: 0.5rem 1rem;">Page {{ findings.number }} of {{ findings.paginator.num_pages }}</span>
        {% if findings.has_next %}
        <a href="?page={{ findings.next_page_number }}{% if filters.severity %}&severity={{ filters.severity }}{% endif %}{% if filters.status %}&status={{ filters.status }}{% endif %}{% if filters.project %}&project={{ filters.project }}{% endif %}" class="btn btn-secondary">Next</a>
        {% endif %}
    </div>
    {% endif %}
    {% else %}
    <p class="muted">No findings match your filters.</p>
    {% endif %}
</div>
{% endblock %}