{% extends 'base.html' %}

{% block title %}Intro - AutograderGen{% endblock %}

{% block content %}
<style>
    .docs-section-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: #334155;
        border-left: 5px solid #475569;
        padding-left: 15px;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
    }

    .workflow-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        border: 1px solid rgba(0,0,0,0.06);
        padding: 2.5rem;
        margin-bottom: 2rem;
    }

    .diagram-container {
        background: #fdfdfd;
        border-radius: 10px;
        border: 1px solid #eaeaea;
        padding: 2rem 1.5rem;
        margin: 1.5rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow-x: auto;
    }

    .diagram-container .mermaid {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .diagram-container .mermaid svg {
        width: 100% !important;
        max-width: 1100px !important;
        min-width: 700px !important;
        height: auto !important;
    }

    .code-example {
        background-color: #f8fafc;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 1.25rem 1.5rem;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
        overflow: auto;
        max-height: 380px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
        margin: 1rem 0 0 0;
    }
    .code-example code {
        color: #0f172a !important;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: inherit;
    }
</style>

<h3 class="docs-section-title">What is AutograderGen?</h3>
<div class="workflow-card">
    <p class="lead text-secondary mb-3" style="font-size: 1.05rem;">
        A tool for lecturers to edit and generate assessment scripts for <a
            href="https://guides.gradescope.com/hc/en-us/articles/22066635961357-Grading-a-Programming-Assignment"
            target="_blank">Grading a Programming Assignment</a> on Gradescope. It supports filling out an
        interactive web form or uploading a YAML configuration to edit and generate packaged ZIP files ready to be
        uploaded to Gradescope.
    </p>
    <p class="text-muted">The diagram below illustrates how a lecturer uses AutograderGen to edit and generate assessment rules, package the autograder, deploy it to Gradescope, and how students' submissions are automatically evaluated in isolation.</p>

    <div class="diagram-container">
        <div class="mermaid">
            graph LR
                classDef actor fill:#f8fafc,stroke:#334155,stroke-width:2px,color:#0f172a;
                classDef tool fill:#f1f5f9,stroke:#475569,stroke-width:1.5px,color:#1e293b;
                classDef artifact fill:#ffffff,stroke:#64748b,stroke-width:1.5px,stroke-dasharray: 3 3,color:#334155;
                classDef platform fill:#e2e8f0,stroke:#1e293b,stroke-width:2px,color:#0f172a;
                classDef output fill:#f8fafc,stroke:#1e293b,stroke-width:2px,color:#0f172a;

                Lecturer[Lecturer] -->|Edit YAML or<br/>Web Form| App[AutograderGen]
                App -->|Generate| Zip[autograder.zip]
                App -->|Generate| TestStubs["stub_correct.zip<br/>stub_wrong.zip"]

                Zip -->|Upload| Sandbox["Gradescope<br/>Sandbox"]
                TestStubs -->|Verify| Sandbox

                Sandbox -->|Publish| Active["Gradescope<br/>Active"]
                Student[Student] -->|Submit<br/>Solution| Active
                Active -->|Evaluate| Results["Marks &<br/>Results"]

                class Lecturer,Student actor;
                class App tool;
                class Zip,TestStubs artifact;
                class Sandbox,Active platform;
                class Results output;
        </div>
    </div>
</div>

<h3 class="docs-section-title">YAML Examples</h3>
<p class="text-muted">Select one of the validated YAML configuration examples below to view its structure. You can import any example directly into the builder interface.</p>

<div class="row">
    {% for ex in examples %}
    <div class="col-12 mb-4">
        <div class="card h-100 shadow-sm border-0">
            <div class="card-body d-flex flex-column">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title text-primary font-weight-bold mb-0">{{ ex.title }}</h5>
                    <a href="/generate?load_example={{ ex.id }}" class="btn btn-sm btn-primary">Import</a>
                </div>
                <p class="card-text text-muted small flex-grow-1">{{ ex.description }}</p>
                <div class="code-example">
                    <code>{{ ex.yaml }}</code>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
    mermaid.initialize({
        startOnLoad: true,
        theme: 'neutral',
        themeVariables: {
            primaryColor: '#f1f5f9',
            primaryBorderColor: '#64748b',
            primaryTextColor: '#1e293b',
            lineColor: '#64748b',
            secondaryColor: '#f8fafc',
            tertiaryColor: '#ffffff'
        },
        flowchart: {
            useMaxWidth: false,
            htmlLabels: true
        }
    });
</script>
{% endblock %}