{% extends "base.html" %}

{% block title %}Assignment Template - Anzar{% endblock %}

{% block content %}
<div class="template-container" x-data="assignmentTemplatePage()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <h1 class="page-title">Assignment Template</h1>
        <p class="page-subtitle">Step 6: Set up grading template for the assignment</p>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="ph-file-text"></i>
                Template Configuration
            </h3>
        </div>
        <div class="card-body">
            <!-- Checking template -->
            <div x-show="checking" class="loading-container">
                <div class="spinner-modern"></div>
                <p class="loading-text">Checking for template file...</p>
            </div>
            
            <!-- PDF Parsing Option -->
            <div x-show="showPDFParsingOption">
                <div class="alert alert-success mb-4">
                    <i class="ph-check-circle"></i>
                    <div>
                        <h4>Parseable PDFs Detected</h4>
                        <p><span x-text="analysisData?.parseable_pdfs || 0"></span> out of <span x-text="analysisData?.total_submissions || 0"></span> submissions have PDFs with metadata that can be automatically parsed.</p>
                    </div>
                </div>

                <div class="parsing-options">
                    <h4 class="section-title mb-3">Choose parsing method:</h4>

                    <div class="option-cards">
                        <div class="option-card recommended">
                            <div class="recommended-badge">Recommended</div>
                            <div class="option-header">
                                <i class="ph-file-pdf"></i>
                                <h5>Parse PDF Metadata</h5>
                            </div>
                            <p class="option-description">
                                Automatically extract questions and answers from PDF metadata.
                                <span x-text="parseablePercentage"></span>% of submissions can be parsed.
                            </p>
                            <button @click="parsePDFsDirectly()" class="btn btn-primary">
                                <i class="ph-robot"></i>
                                Parse PDFs Automatically
                            </button>
                        </div>

                        <div class="option-card">
                            <div class="option-header">
                                <i class="ph-file-text"></i>
                                <h5>Use Template Method</h5>
                            </div>
                            <p class="option-description">
                                Create a template to manually define the structure of submissions.
                                Use this if PDFs don't have metadata.
                            </p>
                            <button @click="useTemplateMethod()" class="btn btn-secondary">
                                <i class="ph-file-plus"></i>
                                Use Template Method
                            </button>
                        </div>
                    </div>

                    <div x-show="showLowParseableWarning" class="alert alert-warning mt-4">
                        <i class="ph-warning"></i>
                        <p>Note: Only <span x-text="parseablePercentage"></span>% of submissions have parseable metadata.
                        <span x-text="nonParseableCount"></span> submissions will be skipped if you use automatic parsing.</p>
                    </div>
                </div>
            </div>

            <!-- Template exists -->
            <div x-show="showTemplateExists">
                <div class="alert alert-success mb-4">
                    <i class="ph-check-circle"></i>
                    <div>
                        <h4>Template Found</h4>
                        <p class="file-path" x-text="templatePath"></p>
                    </div>
                </div>

                <p class="mb-4">A template file has been detected. You can proceed with parsing submissions.</p>

                <button @click="proceedToParse()" class="btn btn-primary">
                    <i class="ph-arrow-right"></i>
                    Proceed to Parse Submissions
                </button>
            </div>

            <!-- No template -->
            <div x-show="showNoTemplate">
                <div class="alert alert-info mb-4">
                    <i class="ph-info"></i>
                    <div>
                        <h4>Template Required</h4>
                        <p>No template file found. You need to provide a template for grading.</p>
                    </div>
                </div>

                <div class="template-options">
                    <h4 class="section-title mb-3">Choose an option:</h4>

                    <div class="option-cards">
                        <div class="option-card">
                            <div class="option-header">
                                <i class="ph-file-plus"></i>
                                <h5>Create Example Template</h5>
                            </div>
                            <p class="option-description">Generate a sample template.md file that you can customize.</p>
                            <button @click="createTemplate()" class="btn btn-primary">
                                <i class="ph-plus"></i>
                                Create Example Template
                            </button>
                        </div>

                        <div class="option-card">
                            <div class="option-header">
                                <i class="ph-upload"></i>
                                <h5>Upload Existing Template</h5>
                            </div>
                            <p class="option-description">If you have a template file, provide its path:</p>
                            <div class="input-group mb-3">
                                <input type="text"
                                       x-model="templatePathInput"
                                       class="form-control"
                                       placeholder="Enter template file path">
                            </div>
                            <button @click="copyTemplate()" class="btn btn-secondary">
                                <i class="ph-copy"></i>
                                Copy Template
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Creating template -->
            <div x-show="showCreatingTemplate">
                <div class="loading-container">
                    <div class="spinner-modern"></div>
                    <p class="loading-text">Creating template...</p>
                </div>
            </div>

            <!-- Template created -->
            <div x-show="showTemplateCreated">
                <div class="alert alert-success mb-4">
                    <i class="ph-check-circle"></i>
                    <div>
                        <h4>Template Created Successfully</h4>
                        <p class="file-path" x-text="createdTemplatePath"></p>
                    </div>
                </div>

                <p class="mb-4">Please edit the template file to match your assignment requirements, then proceed.</p>

                <button @click="proceedToParse()" class="btn btn-primary">
                    <i class="ph-arrow-right"></i>
                    Proceed to Parse Submissions
                </button>
            </div>

            <!-- Error container -->
            <div x-show="showError">
                <div class="alert alert-error" x-text="errorMessage"></div>
                <div class="btn-group mt-3">
                    <button @click="reloadPage()" class="btn btn-secondary">
                        <i class="ph-arrow-clockwise"></i>
                        Retry
                    </button>
                    <button @click="goBack()" class="btn btn-secondary">
                        <i class="ph-arrow-left"></i>
                        Back
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.template-container {
    animation: fadeIn 0.3s ease;
}

.file-path {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    word-break: break-all;
    margin-top: 0.5rem;
}

.loading-container {
    text-align: center;
    padding: 3rem 1rem;
}

.loading-text {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.template-options {
    margin-top: 2rem;
}

.option-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.option-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition-base);
    position: relative;
}

.option-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.option-card.recommended {
    border-color: var(--color-success);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(40, 167, 69, 0.05) 100%);
}

.recommended-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--color-success);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.option-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.option-header i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.option-header h5 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.option-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.input-group {
    position: relative;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
{% endblock %}

{% block scripts %}
<script src="/frontend/static/js/assignment_template.js"></script>
{% endblock %}