{% extends "base.html" %}

{% block title %}Grading Criteria - AnZar{% endblock %}

{% block extra_css %}
<style>
    :root {
        --samples-sidebar-width: 420px;
        --samples-sidebar-collapsed-width: 50px;
    }
    .grade-input-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        transition: grid-template-columns 0.3s ease-in-out;
    }
    @media (min-width: 1024px) {
        .grade-input-layout {
            grid-template-columns: 1fr var(--samples-sidebar-width);
        }
        .grade-input-layout.samples-sidebar-collapsed {
            grid-template-columns: 1fr var(--samples-sidebar-collapsed-width);
        }
    }
    .main-column { min-width: 0; }

    /* Responsive Design Improvements */
    @media (max-width: 1023px) {
        .grade-input-layout {
            grid-template-columns: 1fr !important;
            gap: 1rem;
        }

        .samples-sidebar-wrapper {
            order: -1;
            height: auto;
            position: relative;
            top: 0;
        }

        .samples-sidebar-card {
            max-height: 300px;
        }

        .samples-sidebar-content {
            max-height: 250px;
        }

        .action-bar {
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;
        }

        .action-bar .btn-secondary-group,
        .action-bar .btn-tertiary-group {
            justify-content: center;
            margin-left: 0;
        }

        .criteria-loader {
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
        }

        .criteria-loader select {
            margin-bottom: 0.5rem;
        }
    }

    @media (max-width: 640px) {
        .samples-sidebar-wrapper {
            max-height: 200px;
        }

        .samples-sidebar-header {
            padding: 1rem;
        }

        .sample-answer-header {
            padding: 0.5rem;
            font-size: 0.875rem;
        }

        .sample-answer-text {
            padding: 0.5rem;
            font-size: 0.875rem;
        }

        .action-bar {
            padding: 0.75rem;
        }

        .btn {
            font-size: 0.875rem;
            padding: 0.75rem 1rem;
        }

        .modal {
            width: 95%;
            margin: 1rem;
        }

        .modal-header {
            padding: 0.75rem 1rem;
        }

        .modal-body {
            padding: 1rem;
        }

        .modal-footer {
            padding: 0.75rem 1rem;
            flex-direction: column;
            gap: 0.5rem;
        }

        .modal-footer .btn {
            width: 100%;
        }
    }

    /* --- Redesigned Samples Sidebar --- */
    .samples-sidebar-wrapper {
        position: sticky;
        top: 1rem;
        height: calc(100vh - 2rem);
        transition: all 0.3s ease-in-out;
    }
    .samples-sidebar-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .samples-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    .samples-sidebar-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;  /* Enables child scrolling */
        transition: opacity 0.3s ease, visibility 0.3s ease;
        opacity: 1;
        visibility: visible;
    }
    .samples-sidebar-collapsed .samples-sidebar-wrapper {
        position: fixed;
        top: 50%;
        right: 1rem;
        height: auto;
        width: 48px;
        transform: translateY(-50%);
        z-index: 1000;
    }
    .samples-sidebar-collapsed .samples-sidebar-card {
        height: 48px;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .samples-sidebar-collapsed .samples-sidebar-header {
        padding: 0;
        border: none;
        background: transparent;
    }
    .samples-sidebar-collapsed .samples-sidebar-content {
        display: none;
    }
    .samples-sidebar-collapsed .samples-sidebar-wrapper .card-title {
        display: none;
    }
    .sample-answers-container {
        flex-grow: 1;
        overflow-y: auto;
        padding: 1rem;
    }
    .samples-sidebar-toggle {
        background: var(--color-primary);
        border: none;
        color: white;
        border-radius: var(--radius-md);
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
        font-size: 0.875rem;
        font-weight: 600;
    }
    .samples-sidebar-toggle:hover {
        background: var(--color-primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    }
    .samples-sidebar-toggle i {
        transition: transform 0.3s ease;
        font-size: 1.1rem;
    }
    .samples-sidebar-collapsed .samples-sidebar-toggle {
        position: fixed;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 50%;
        z-index: 1001;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    }
    .samples-sidebar-collapsed .samples-sidebar-toggle:hover {
        width: auto;
        min-width: 48px;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md);
    }
    .samples-sidebar-collapsed .samples-sidebar-toggle i {
        font-size: 1.2rem;
    }
    .samples-sidebar-collapsed .samples-sidebar-toggle span {
        display: none;
        margin-left: 0.5rem;
    }
    .samples-sidebar-collapsed .samples-sidebar-toggle:hover span {
        display: inline;
    }

    /* --- Other UI Elements --- */
    .criteria-loader { display: flex; gap: 0.75rem; align-items: center; }
    .criteria-loader select { flex-grow: 1; }
    .action-bar {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }
    .action-bar .btn-primary { flex-grow: 2; font-size: 1rem; padding: 0.875rem 1.5rem; }
    .action-bar .btn-secondary-group { display: flex; gap: 0.5rem; }
    .action-bar .btn-tertiary-group { margin-left: auto; display: flex; gap: 0.5rem; }
    .btn-text { background: none; border: none; color: var(--text-secondary); font-weight: 600; padding: 0.5rem 1rem; cursor: pointer; }
    .btn-text:hover { color: var(--text-primary); }
    .btn-text.text-danger:hover { color: var(--color-danger); }

    /* Modal Styles */
    .modal-backdrop { position: fixed; inset: 0; background-color: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 1040; }
    .modal-backdrop.visible { opacity: 1; pointer-events: all; }
    .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 90%; max-width: 500px; opacity: 0; transition: all 0.3s ease; pointer-events: none; z-index: 1050; }
    .modal.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: all; }
    .modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
    .modal-body { padding: 1.5rem; }
    .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 0.75rem; }
    .btn-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; }
    .prompt-content {
    white-space: pre-wrap;
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
}

.prompt-content strong {
    color: var(--color-primary);
    font-weight: 600;
}

.prompt-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.prompt-content h3:first-child {
    margin-top: 0;
}

    /* Sample Answer Styles */
    .sample-answer-item {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .sample-answer-item:hover {
        border-color: var(--color-primary);
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
        transform: translateY(-2px);
    }
    .sample-answer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        position: relative;
    }
    .sample-answer-header::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--color-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .sample-answer-item:hover .sample-answer-header::before {
        opacity: 1;
    }
    .sample-answer-header strong {
        color: var(--text-primary);
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .sample-answer-header strong::before {
        content: '👤';
        font-size: 1rem;
    }
    .badge.bg-primary {
        background: var(--color-primary) !important;
        color: white;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-sm);
        font-weight: 600;
    }
    .sample-answer-text {
        padding: 1.25rem;
        color: var(--text-primary);
        line-height: 1.7;
        font-size: 0.9rem;
        background: var(--bg-primary);
        position: relative;
        overflow-y: auto;
        max-height: 400px; /* Always limit max height */
    }
    .sample-answer-text.truncated {
        max-height: 5.1em; /* 3 lines × 1.7 line-height */
        overflow: hidden; /* Hide overflow when truncated */
        position: relative;
    }
    .sample-answer-text.truncated::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2em;
        background: linear-gradient(to bottom, transparent, var(--bg-primary));
        pointer-events: none;
    }
    .sample-answer-text::before {
        content: '"';
        position: absolute;
        top: 0;
        left: 0.5rem;
        font-size: 3rem;
        color: var(--color-primary);
        opacity: 0.2;
        font-family: Georgia, serif;
        line-height: 1;
    }
    .sample-answer-text p {
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
    }
    .sample-answer-text p:last-child {
        margin-bottom: 0;
    }
    .sample-answer-text:empty::after {
        content: 'No answer provided';
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.875rem;
    }
    .sample-answer-text pre {
        background: var(--bg-secondary);
        padding: 0.75rem;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        overflow-x: auto;
        border: 1px solid var(--border-color);
        margin: 0.5rem 0;
    }
    .sample-answer-text code {
        background: var(--bg-secondary);
        padding: 0.125rem 0.375rem;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        border: 1px solid var(--border-color);
        color: var(--color-primary);
    }
    .sample-answer-text blockquote {
        border-left: 3px solid var(--color-primary);
        padding-left: 1rem;
        margin: 1rem 0;
        font-style: italic;
        color: var(--text-secondary);
        background: var(--bg-secondary);
        padding: 0.75rem 1rem;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    /* Image attachment placeholder */
    .sample-answer-attachments {
        padding: 0.5rem 1.25rem;
        background: var(--bg-tertiary);
        border-top: 1px dashed var(--border-color);
    }
    .sample-answer-attachments i {
        margin-right: 0.25rem;
    }

    /* Expand/Collapse Button */
    .expand-toggle-btn {
        background: none;
        border: none;
        color: var(--color-primary);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        padding: 0.5rem 1.25rem;
        width: 100%;
        text-align: center;
        transition: all 0.2s ease;
        border-top: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
    }
    .expand-toggle-btn:hover {
        background: var(--bg-hover);
        color: var(--color-primary-dark);
    }
    .expand-toggle-btn::after {
        content: '▼';
        font-size: 0.75rem;
        transition: transform 0.2s ease;
    }
    .expand-toggle-btn:has(+ *):not([x-text*="Show more"])::after {
        transform: rotate(180deg);
    }

    /* Button Loading States */
    .btn.loading {
        position: relative;
        color: transparent !important;
        pointer-events: none;
    }
    .btn.loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        border: 2px solid currentColor;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Loading spinner */
    .loading-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--border-color);
        border-top: 3px solid var(--color-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }

    /* Form Textarea and Control Styles */
    .form-textarea {
        width: 100%;
        min-height: 120px;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        font-family: var(--font-family);
        font-size: 0.875rem;
        line-height: 1.5;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        resize: vertical;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        font-family: var(--font-family);
        font-size: 0.875rem;
        line-height: 1.5;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-textarea::placeholder,
    .form-control::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
    }

    /* Visual Feedback Improvements */
    .form-textarea:focus,
    .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
        outline: none;
    }

    .form-textarea:invalid {
        border-color: var(--color-danger);
    }

    .btn:focus {
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
        outline: none;
    }

    .btn:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* Improved accessibility */
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Success/Error states */
    .form-group.has-error .form-textarea {
        border-color: var(--color-danger);
    }

    .form-group.has-success .form-textarea {
        border-color: var(--color-success);
    }

    .error-message {
        color: var(--color-danger);
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .success-message {
        color: var(--color-success);
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Keyboard navigation improvements */
    .btn:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .samples-sidebar-toggle:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Question Content Styles */
    .question-content {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--text-primary);
        margin-bottom: 1rem;
    }

    .question-content p {
        margin-bottom: 0.75rem;
    }

    .question-content p:last-child {
        margin-bottom: 0;
    }

    .question-content ul,
    .question-content ol {
        margin-bottom: 0.75rem;
        padding-left: 1.5rem;
    }

    .question-content li {
        margin-bottom: 0.25rem;
    }

    .question-content code {
        background-color: var(--bg-secondary);
        padding: 0.125rem 0.25rem;
        border-radius: var(--radius-sm);
        font-family: var(--font-mono);
        font-size: 0.875rem;
    }

    .question-content pre {
        background-color: var(--bg-secondary);
        padding: 1rem;
        border-radius: var(--radius-md);
        overflow-x: auto;
        font-family: var(--font-mono);
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .question-content blockquote {
        border-left: 4px solid var(--color-primary);
        padding-left: 1rem;
        margin: 1rem 0;
        font-style: italic;
        color: var(--text-secondary);
    }
</style>
{% endblock %}

{% block content %}
<div x-data="gradeInputPage()" x-init="init()">
    <div class="page-header">
        <h2><i class="ph-clipboard-text"></i> Grading Criteria</h2>
        <p>Configure grading criteria for automated grading.</p>
    </div>

    <div class="grade-input-layout" :class="{ 'samples-sidebar-collapsed': samplesCollapsed }">
        <!-- Main Content Column -->
        <div class="main-column">
            <div x-show="!hasData" class="card">
                <div class="card-body text-center p-5">
                    <i class="ph-warning-circle text-warning" style="font-size: 3rem;"></i>
                    <h3 class="card-title justify-content-center mt-3">No Question Data Found</h3>
                    <p class="text-secondary mt-2 mb-4">Please return to the Grading Hub and select a question.</p>
                    <button @click="skipQuestion()" class="btn btn-primary"><i class="ph-arrow-left"></i> Go Back</button>
                </div>
            </div>

            <div x-show="hasData" class="d-flex flex-column gap-3">
                <!-- Question Display -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ph-question"></i>
                            Question <span x-text="isQuiz ? '(Quiz)' : '(Assignment)'"></span>
                        </h3>
                        <div class="d-flex align-items-center gap-2">
                            <label class="form-label mb-0" style="font-size: 0.875rem; color: var(--text-secondary);">Max Points:</label>
                            <input type="number" class="form-control form-control-sm" style="width: 80px;"
                                   x-model.number="pointsPossible" min="0" step="0.5">
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="question-content" x-html="questionTextHtml"></div>
                        <div class="question-meta mt-3">
                            <small class="text-secondary">
                                <span x-show="answerCount">
                                    <i class="ph-users"></i>
                                    <span x-text="answerCount"></span> student answers available
                                </span>
                                <span class="mx-2" x-show="answerCount && attachmentsCount > 0">•</span>
                                <span x-show="attachmentsCount > 0" class="text-info">
                                    <i class="ph-image"></i>
                                    <span x-text="attachmentsCount"></span> with images (sent to LLM)
                                </span>
                                <span class="mx-2" x-show="(answerCount || attachmentsCount > 0) && isRegrade">•</span>
                                <span x-show="isRegrade" class="text-warning">
                                    <i class="ph-arrow-clockwise"></i> Regrading mode
                                </span>
                            </small>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body criteria-loader">
                        <select
                            class="form-control"
                            x-model="selectedCriteria"
                            @change="applySelectedCriteria()"
                            aria-label="Load saved grading criteria"
                            title="Load saved criteria">
                            <option value="">Load Saved Criteria...</option>
                            <template x-for="c in savedCriteria" :key="c.name">
                                <option :value="c.name" x-text="c.name"></option>
                            </template>
                        </select>
                        <button
                            class="btn btn-outline"
                            @click="showSaveModal = true"
                            :disabled="isLoadingSavedCriteria"
                            aria-label="Save current grading criteria for reuse"
                            title="Save current criteria for reuse">
                            <i class="ph-floppy-disk" x-show="!isLoadingSavedCriteria" aria-hidden="true"></i>
                            <i class="ph-spinner" x-show="isLoadingSavedCriteria" aria-hidden="true"></i>
                            <span x-show="!isLoadingSavedCriteria">Save</span>
                            <span x-show="isLoadingSavedCriteria" class="visually-hidden">Loading...</span>
                        </button>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header"><h3 class="card-title"><i class="ph-list-checks"></i> Grading Criteria</h3></div>
                    <div class="card-body">
                        <div class="form-group" :class="{ 'has-error': !form.correct_answer.trim() && form.correct_answer !== '', 'has-success': form.correct_answer.trim() !== '' }">
                            <label for="correctAnswer" class="form-label">
                                <i class="ph-check-circle" aria-hidden="true"></i> Correct Answer / Key Points <span class="required" aria-label="Required">*</span>
                            </label>
                            <textarea
                                id="correctAnswer"
                                x-model="form.correct_answer"
                                class="form-textarea"
                                required
                                aria-describedby="correctAnswerHelp"
                                placeholder="Enter the correct answer or key points..."></textarea>
                            <div id="correctAnswerHelp" class="form-text text-secondary">The correct answer or key points that students should include.</div>
                        </div>
                        <div class="form-group" :class="{ 'has-error': !form.grading_rubric.trim() && form.grading_rubric !== '', 'has-success': form.grading_rubric.trim() !== '' }">
                            <label for="gradingRubric" class="form-label">
                                <i class="ph-clipboard-text" aria-hidden="true"></i> Grading Rubric <span class="required" aria-label="Required">*</span>
                            </label>
                            <textarea
                                id="gradingRubric"
                                x-model="form.grading_rubric"
                                class="form-textarea"
                                required
                                aria-describedby="gradingRubricHelp"
                                placeholder="Enter criteria for partial credit..."></textarea>
                            <div id="gradingRubricHelp" class="form-text text-secondary">Detailed criteria for how points will be awarded.</div>
                        </div>
                        <div class="form-group">
                            <label for="goodAnswerExamples" class="form-label">
                                <i class="ph-thumbs-up" aria-hidden="true"></i> Examples of Good Answers (Optional)
                            </label>
                            <textarea
                                id="goodAnswerExamples"
                                x-model="form.good_examples"
                                class="form-textarea"
                                aria-describedby="goodAnswerHelp"
                                placeholder="Provide examples of high-quality responses..."></textarea>
                            <div id="goodAnswerHelp" class="form-text text-secondary">Example answers that demonstrate excellent understanding.</div>
                        </div>
                        <div class="form-group">
                            <label for="badAnswerExamples" class="form-label">
                                <i class="ph-thumbs-down" aria-hidden="true"></i> Examples of Poor Answers (Optional)
                            </label>
                            <textarea
                                id="badAnswerExamples"
                                x-model="form.bad_examples"
                                class="form-textarea"
                                aria-describedby="badAnswerHelp"
                                placeholder="Provide examples of poor or incorrect responses..."></textarea>
                            <div id="badAnswerHelp" class="form-text text-secondary">Example answers that show common mistakes or misunderstandings.</div>
                        </div>
                        <div class="form-group">
                            <label for="gradedExamples" class="form-label">
                                <i class="ph-list-numbers" aria-hidden="true"></i> Examples of Graded Answers (Optional)
                            </label>
                            <textarea
                                id="gradedExamples"
                                x-model="form.graded_examples"
                                class="form-textarea"
                                aria-describedby="gradedExamplesHelp"
                                placeholder="Provide examples with specific grades..."></textarea>
                            <div id="gradedExamplesHelp" class="form-text text-secondary">Sample answers with their grades to help calibrate the AI grading.</div>
                        </div>
                        <div class="form-group mb-0">
                            <label for="feedbackFormat" class="form-label">
                                <i class="ph-chat-text" aria-hidden="true"></i> Feedback Format Instructions (Optional)
                            </label>
                            <div style="display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem;">
                                <template x-for="preset in feedbackPresets" :key="preset.label">
                                    <button type="button"
                                            class="btn btn-sm"
                                            :class="form.feedback_format === preset.value ? 'btn-primary' : 'btn-outline'"
                                            :title="preset.description"
                                            @click="applyFeedbackPreset(preset.value)"
                                            style="font-size: 0.75rem; padding: 0.25rem 0.625rem;">
                                        <i :class="preset.icon" aria-hidden="true"></i>
                                        <span x-text="preset.label"></span>
                                    </button>
                                </template>
                            </div>
                            <textarea
                                id="feedbackFormat"
                                x-model="form.feedback_format"
                                class="form-textarea"
                                aria-describedby="feedbackFormatHelp"
                                placeholder="e.g., 'Start with a positive comment...'"></textarea>
                            <div id="feedbackFormatHelp" class="form-text text-secondary">Choose a preset or write your own instructions for how the AI should format feedback.</div>
                            <!-- Warning for Brief/single-paragraph formats -->
                            <div x-show="form.feedback_format && form.feedback_format.includes('brief 1-2 sentence')"
                                 x-transition
                                 style="margin-top: 0.5rem; padding: 0.625rem 0.875rem; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 6px; display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-warning);">
                                <i class="ph-warning" style="flex-shrink: 0; margin-top: 0.125rem;"></i>
                                <span>Brief feedback produces a single paragraph, which limits the structured block editing on the review page. Consider using <strong>Structured</strong> or <strong>Bullet Points</strong> format for better review and editing capabilities.</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="action-bar" style="display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;">
                    <div class="main-actions" style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.75rem;">
                        <button
                            class="btn btn-primary"
                            :disabled="!canStartGrading || isStartingGrading"
                            @click="startGrading()"
                            :class="{ 'loading': isStartingGrading }"
                            :aria-label="isRegrade ? 'Start AI regrading process' : 'Start AI grading process'">
                            <i class="ph-play" x-show="!isStartingGrading" aria-hidden="true"></i>
                            <span x-text="isRegrade ? 'Start AI Regrading' : 'Start AI Grading'"></span>
                        </button>
                        <button
                            class="btn btn-secondary"
                            @click="openCalibration()"
                            :disabled="!canStartGrading"
                            aria-label="Trial-run this criteria on 2-3 submissions without saving"
                            title="Grade 2-3 submissions first to sanity-check the criteria, nothing is saved">
                            <i class="ph-beaker" aria-hidden="true"></i>
                            <span>Trial</span>
                        </button>
                        <button
                            class="btn btn-secondary"
                            @click="navigateToConsistency()"
                            aria-label="Run consistency check on current criteria"
                            title="Consistency Check">
                            <i class="ph-chart-line" aria-hidden="true"></i>
                            <span>Check</span>
                        </button>
                        <button
                            class="btn btn-secondary"
                            @click="showPromptPreviewModal()"
                            aria-label="Preview AI prompt that will be generated"
                            title="Preview Prompt">
                            <i class="ph-eye" aria-hidden="true"></i>
                            <span>Preview</span>
                        </button>
                    </div>
                    <div class="tertiary-actions" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
                        <button
                            class="btn btn-danger"
                            @click="skipQuestion()"
                            aria-label="Skip this question and return to grading hub">
                            Skip
                        </button>
                        <button
                            class="btn btn-danger"
                            @click="cancelGrading()"
                            aria-label="Cancel grading and return to dashboard">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Column -->
        <div class="samples-sidebar-wrapper">
            <div class="samples-sidebar-card card">
                <div class="samples-sidebar-header">
                    <h3 class="card-title" x-show="!samplesCollapsed"><i class="ph-users-three" aria-hidden="true"></i> Sample Answers</h3>
                    <button
                        class="samples-sidebar-toggle"
                        @click="samplesCollapsed = !samplesCollapsed"
                        :aria-expanded="!samplesCollapsed"
                        aria-controls="samples-sidebar-content"
                        title="Toggle sidebar visibility">
                        <i class="ph-eye" aria-hidden="true" x-show="!samplesCollapsed"></i>
                        <i class="ph-eye-closed" aria-hidden="true" x-show="samplesCollapsed"></i>
                        <span x-show="!samplesCollapsed">Hide</span>
                        <span x-show="samplesCollapsed">Show</span>
                    </button>
                </div>
                <div class="samples-sidebar-content" id="samples-sidebar-content">
                    <div class="card-body py-2">
                        <p class="text-secondary small">Review samples to help write criteria.</p>
                    </div>
                    <div class="sample-answers-container" role="region" aria-label="Sample student answers">
                        <!-- Loading state -->
                        <div x-show="isLoadingSampleAnswers" class="text-center p-4">
                            <div class="loading-spinner"></div>
                            <p class="text-secondary mt-2">Loading sample answers...</p>
                        </div>

                        <!-- Content -->
                        <div x-show="!isLoadingSampleAnswers">
                            <template x-if="sampleAnswers.length === 0">
                                <p class="text-center text-secondary p-4">No sample answers available.</p>
                            </template>
                            <template x-for="(sample, index) in sampleAnswers" :key="index">
                                <div class="sample-answer-item">
                                    <div class="sample-answer-header">
                                        <strong x-text="sample.student_name || 'Unknown Student'"></strong>
                                        <span x-show="sample.grade" class="badge bg-primary" x-text="sample.grade + ' pts'"></span>
                                    </div>
                                    <div class="sample-answer-text"
                                         :class="{'truncated': shouldTruncate(sample.student_answer) && !isSampleExpanded(index)}"
                                         x-html="sample.student_answer ? (window.parseMarkdown ? window.parseMarkdown(sample.student_answer) : escapeHtmlString(sample.student_answer)) : 'No answer provided'"></div>
                                    <!-- Image attachment placeholder -->
                                    <div x-show="sample.has_attachments === 'Yes'" class="sample-answer-attachments">
                                        <small class="text-secondary">
                                            <i class="ph-paperclip"></i>
                                            <span x-text="getAttachmentCount(sample) + ' image(s) attached'"></span>
                                            <span class="text-muted">(sent to LLM)</span>
                                        </small>
                                    </div>
                                    <button x-show="shouldTruncate(sample.student_answer)"
                                            @click="toggleSampleExpansion(index)"
                                            class="expand-toggle-btn"
                                            x-text="isSampleExpanded(index) ? 'Show less' : 'Show more'"></button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <div class="modal-backdrop" :class="{'visible': showSaveModal}" @click="showSaveModal = false"></div>
    <div class="modal" :class="{'visible': showSaveModal}">
        <div class="modal-header">
            <h3 class="card-title">Save Criteria</h3>
            <button class="btn-close" @click="showSaveModal = false">&times;</button>
        </div>
        <div class="modal-body">
            <p>Save the current grading criteria for reuse in this assignment.</p>
            <div class="form-group">
                <label for="criteriaName" class="form-label">Criteria Name</label>
                <input type="text" id="criteriaName" class="form-control" x-model="newCriteriaName" placeholder="e.g., 'Essay Question Rubric'">
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" @click="showSaveModal = false">Cancel</button>
            <button class="btn btn-primary" @click="handleSaveCriteria()" :disabled="!newCriteriaName.trim() || isSavingCriteria" :class="{ 'loading': isSavingCriteria }">
                <span x-show="!isSavingCriteria">Save</span>
                <span x-show="isSavingCriteria">Saving...</span>
            </button>
        </div>
    </div>

    <div class="modal-backdrop" :class="{'visible': showPromptPreview}" @click="showPromptPreview = false"></div>
    <div class="modal" :class="{'visible': showPromptPreview}">
        <div class="modal-header">
            <h3 class="card-title"><i class="ph-code"></i> AI Prompt Preview</h3>
            <button class="btn-close" @click="showPromptPreview = false">&times;</button>
        </div>
        <div class="modal-body">
            <p class="text-secondary">This is a preview of the prompt that will be sent to the AI.</p>
            <div class="prompt-content" x-html="promptContentHtml"></div>
        </div>
    </div>

    <!-- Calibration trial run: grade 2-3 submissions, preview only, nothing saved -->
    <div class="modal-backdrop" :class="{'visible': calibOpen}" @click="closeCalibration()"></div>
    <div class="modal" :class="{'visible': calibOpen}" style="max-width: 720px;">
        <div class="modal-header">
            <h3 class="card-title"><i class="ph-beaker"></i> Trial Run - nothing is saved</h3>
            <button class="btn-close" @click="closeCalibration()">&times;</button>
        </div>
        <div class="modal-body">
            <p class="text-secondary" style="margin-top: 0;">
                Grade up to 3 sample submissions with the current criteria to sanity-check the
                outcome before committing to the full round. Results are shown here only.
            </p>

            <div x-show="calibLoading" style="text-align: center; padding: 1.5rem;">
                <div class="spinner" style="margin: 0 auto;"></div>
            </div>

            <div x-show="!calibLoading && calibError" x-cloak
                 style="color: #dc2626; font-size: 0.875rem; padding: 0.5rem 0;" x-text="calibError"></div>

            <!-- Pick submissions -->
            <div x-show="!calibLoading && !calibResults && calibStudents.length > 0">
                <template x-for="s in calibStudents" :key="s.student_id">
                    <label style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer;">
                        <input type="checkbox" :checked="calibSelected.includes(s.student_id)"
                               @change="toggleCalibStudent(s.student_id)"
                               :disabled="!calibSelected.includes(s.student_id) && calibSelected.length >= 3">
                        <div style="min-width: 0;">
                            <div style="font-weight: 600;" x-text="s.student_name"></div>
                            <div style="font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px;"
                                 x-text="s.answer_preview || '(no recorded answer)'"></div>
                        </div>
                    </label>
                </template>
            </div>

            <!-- Results -->
            <template x-if="calibResults">
                <div>
                    <div style="font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.75rem;"
                         x-text="calibResults.message + ' (max ' + calibResults.max_points + ' pts)'"></div>
                    <template x-for="p in calibResults.previews" :key="p.student_id">
                        <div style="border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem;">
                            <div style="display: flex; align-items: center; gap: 0.5rem;">
                                <strong x-text="p.student_name"></strong>
                                <template x-if="p.success">
                                    <span class="badge badge-success" style="margin-left: auto;"
                                          x-text="p.points + ' / ' + calibResults.max_points + ' pts'"></span>
                                </template>
                                <template x-if="!p.success">
                                    <span class="badge badge-danger" style="margin-left: auto;">failed</span>
                                </template>
                                <span x-show="p.success && p.confidence !== null && p.confidence !== undefined && p.confidence < 0.6"
                                      x-cloak title="The AI response was only partially parseable"
                                      style="padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #d97706; background: rgba(217, 119, 6, 0.12); border: 1px solid rgba(217, 119, 6, 0.4);">check</span>
                            </div>
                            <div x-show="p.answer_preview" style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.4rem; max-height: 3.6rem; overflow: hidden;"
                                 x-text="'Answer: ' + p.answer_preview"></div>
                            <div x-show="p.feedback" style="font-size: 0.8125rem; margin-top: 0.5rem; white-space: pre-wrap;" x-text="p.feedback"></div>
                            <div x-show="p.error" x-cloak style="font-size: 0.8125rem; color: #dc2626; margin-top: 0.4rem;" x-text="p.error"></div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 0.75rem;">
            <button class="btn btn-secondary" @click="closeCalibration()">Close</button>
            <button class="btn btn-secondary" @click="calibResults = null" x-show="calibResults" x-cloak>Pick different submissions</button>
            <button class="btn btn-primary" @click="runCalibration()"
                    :disabled="calibRunning || calibSelected.length === 0 || !!calibResults">
                <i class="ph-play" aria-hidden="true"></i>
                <span x-text="calibRunning ? 'Grading trial...' : 'Run trial'"></span>
            </button>
        </div>
    </div>
</div>
{% endblock %}

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