{% 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" data-isslop-tool>
    <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="/tools" class="sidebar-link">
                <span class="icon">&#x1F9F0;</span>
                All tools
            </a>
            <a href="/tools/isslop" class="sidebar-link active">
                <span class="icon">&#x1F9EA;</span>
                AI Usage Analyzer
            </a>
            <a href="/docs/isslop-checks.html" class="sidebar-link">
                <span class="icon">&#x1F4D6;</span>
                About the checks
            </a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-heading">How it grades</div>
            <ul class="isslop-side-list">
                <li>Origin score: how AI-like the code is.</li>
                <li>Quality deficit: anti-patterns and low curation.</li>
                <li>The A-F grade certifies human authorship.</li>
                <li>Clean AI code is not slop, but lowers the grade.</li>
                <li>Messy human code is not slop.</li>
            </ul>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-heading">Tips</div>
            <ul class="isslop-side-list">
                <li>Git repositories are shallow-cloned (3 GB cap).</li>
                <li>Websites render in a real browser after JavaScript.</li>
                <li>Images get their own AI-generation review.</li>
                <li>One analysis runs at a time per visitor.</li>
                <li>Reports and badges are shareable capability URLs.</li>
            </ul>
        </div>
    </aside>

    <div class="isslop-main">
        <header class="isslop-header">
            <h1><span class="icon">🧪</span> AI Usage Analyzer</h1>
            <p>Measure how a codebase or website was made. Every verdict comes from a transparent,
               reproducible pipeline: static multi-signal analysis, an AI review pass, image forensics
               and a persistent report with an authenticity badge you can embed. Using AI is not the
               crime; shipping its defaults is.</p>
        </header>

        <section class="isslop-definitions" aria-label="The three verdicts">
            <p class="isslop-definitions-lead">
                <strong>Slop ships the model's defaults. Sophisticated AI ships the engineer's decisions.
                Human ships what no model would ever write.</strong>
            </p>
            <div class="isslop-definition-grid">
                <div class="isslop-definition-card">
                    <span class="isslop-cat isslop-cat-ai-slop">ai-slop</span>
                    <p>Untouched LLM defaults, shipped as-is. Low effort by definition, because the
                       model's defaults are terrible.</p>
                </div>
                <div class="isslop-definition-card">
                    <span class="isslop-cat isslop-cat-sophisticated-ai">sophisticated-ai</span>
                    <p>Clear signs of AI, steered by a programmer who knows exactly what they are
                       doing. The model typed; the engineer decided.</p>
                </div>
                <div class="isslop-definition-card">
                    <span class="isslop-cat isslop-cat-human-clean">human</span>
                    <p>Source code no AI would ever write that way. Opinionated, particular,
                       unmistakably someone's.</p>
                </div>
            </div>
        </section>

        <dp-isslop></dp-isslop>
    </div>
</div>
{% endblock %}
