{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/sidebar.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/isslop.css') }}">
{% endblock %}

{% block content %}
<div class="isslop-layout isslop-source-page" data-isslop-source>
    <aside class="sidebar-card" role="navigation" aria-label="AI Usage Analyzer">
        <div class="sidebar-heading" role="heading" aria-level="2">AI Usage Analyzer</div>
        <div class="sidebar-nav">
            <a href="{{ report_url }}" class="sidebar-link">
                <span class="icon">&#x1F4C4;</span>
                Back to report
            </a>
            <a href="/tools/isslop" class="sidebar-link">
                <span class="icon">&#x1F9EA;</span>
                New analysis
            </a>
            <a href="/docs/isslop-checks.html" class="sidebar-link">
                <span class="icon">&#x1F4D6;</span>
                The criteria
            </a>
        </div>

        {% if signals %}
        <div class="sidebar-section">
            <div class="sidebar-heading">Findings in this file</div>
            <div class="sidebar-nav">
                {% for signal in signals[:12] %}
                {% if signal.line %}
                <a href="#L{{ signal.line }}" class="sidebar-link isslop-source-nav">
                    <span class="isslop-signal-chip isslop-signal-{{ signal.severity }}">{{ signal.code }}</span>
                    line {{ signal.line }}
                </a>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </aside>

    <div class="isslop-main">
        <header class="isslop-header">
            <h1><span class="icon">📄</span> {{ path }}</h1>
            <div class="isslop-facts">
                <span class="isslop-cat isslop-cat-{{ category }}">{{ category }}</span>
                <span class="isslop-chip">{{ language }}</span>
                <span class="isslop-chip">origin {{ origin_score }}</span>
                <span class="isslop-chip">quality deficit {{ quality_deficit_score }}</span>
                <span class="isslop-chip">{{ source_lines|length }} lines</span>
                {% if truncated %}<span class="isslop-chip">truncated</span>{% endif %}
            </div>
        </header>

        <section class="isslop-source-card" aria-label="Annotated source">
            <div class="isslop-source-scroll">
                <table class="isslop-source">
                    <tbody>
                        {% for source_line in source_lines %}
                        {% set lineno = loop.index %}
                        {% set hits = marked_lines.get(lineno) %}
                        {% if hits %}
                        <tr class="isslop-source-annotation-row">
                            <td class="isslop-source-num"></td>
                            <td class="isslop-source-annotation">
                                {% for signal in hits %}
                                <span class="isslop-signal-chip isslop-signal-{{ signal.severity }}"
                                      title="{{ signal.evidence or signal.title }}">{{ signal.code }}: {{ signal.title }}</span>
                                {% endfor %}
                            </td>
                        </tr>
                        {% endif %}
                        <tr id="L{{ lineno }}"
                            class="isslop-source-line{% if hits %} isslop-source-hit{% endif %}{% if lineno == focus_line %} isslop-source-focus{% endif %}">
                            <td class="isslop-source-num"><a href="#L{{ lineno }}">{{ lineno }}</a></td>
                            <td class="isslop-source-code">{{ source_line }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="module">
    const target = window.location.hash && document.querySelector(window.location.hash);
    if (target) target.scrollIntoView({ block: "center" });
</script>
{% endblock %}