{{!
    @template local_unifiedgrader/marking_panel

    Right panel containing grade input, feedback, comment library, and teacher notes.

    This template is rendered as a partial of grading_interface.
    Dynamic content is managed by the marking_panel JS component.

    Example context (json):
    {
        "uniqid": "abc123",
        "canviewnotes": true,
        "canmanagenotes": true,
        "hasfeedbackfileplugin": false,
        "feedbackfileshtml": ""
    }
}}
<div data-region="marking-content" class="p-3">

    {{! Attempt selector (shown by JS when multiple attempts exist) }}
    <div data-region="attempt-selector" class="d-none mb-3">
        <div class="d-flex align-items-center gap-2">
            <label class="small fw-bold mb-0" for="attempt-select-{{uniqid}}">
                {{#str}} attempt, local_unifiedgrader {{/str}}
            </label>
            <select id="attempt-select-{{uniqid}}"
                    data-action="attempt-select"
                    class="form-select form-select-sm"
                    style="max-width: 250px;">
            </select>
        </div>
    </div>

    {{! Late submission indicator (shown by JS when submission is past due date) }}
    <div data-region="late-indicator" class="d-none mb-3">
        <span class="badge bg-warning text-dark w-100 py-2 d-flex align-items-center justify-content-center gap-1">
            <i class="fa fa-clock-o" aria-hidden="true"></i>
            <span data-region="late-text"></span>
        </span>
    </div>

    {{! Plagiarism section (shown by JS when plagiarism links exist) }}
    <div data-region="plagiarism-section" class="d-none card mb-3">
        <div class="card-header py-2">
            <h6 class="mb-0">
                <i class="fa fa-shield me-1"></i>
                {{#str}} plagiarism, local_unifiedgrader {{/str}}
            </h6>
        </div>
        <div class="card-body py-2" data-region="plagiarism-body"></div>
    </div>

    {{! Mark-as-graded toggle (shown by JS when grading is disabled, e.g. grade type "None") }}
    <div data-region="mark-graded-section" class="d-none mb-3">
        <div class="card">
            <div class="card-body py-2 d-flex align-items-center justify-content-between">
                <label class="form-check-label fw-bold mb-0" for="mark-graded-toggle-{{uniqid}}">
                    {{#str}} mark_as_graded, local_unifiedgrader {{/str}}
                </label>
                <div class="form-check form-switch mb-0">
                    <input type="checkbox" class="form-check-input" role="switch"
                           id="mark-graded-toggle-{{uniqid}}"
                           data-action="mark-graded-toggle">
                </div>
            </div>
        </div>
    </div>

    {{! Grade section (hidden by JS when forum grading is disabled) }}
    <div data-region="grade-section" class="card mb-3">
        <div class="card-header py-2">
            <h6 class="mb-0">{{#str}} grade, local_unifiedgrader {{/str}}</h6>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-start gap-2">
                {{! Grade input (constrained width) }}
                <div style="max-width: 300px; flex-shrink: 0;">
                    {{! Simple grading: number input with percentage }}
                    <div data-region="simple-grade">
                        <div class="input-group">
                            <input type="number"
                                   data-action="grade-input"
                                   class="form-control"
                                   step="any"
                                   min="0"
                                   placeholder="{{#str}} grade, local_unifiedgrader {{/str}}"
                                   aria-label="{{#str}} grade, local_unifiedgrader {{/str}}">
                            <span class="input-group-text" data-region="max-grade">/ --</span>
                            <span class="input-group-text text-muted" data-region="grade-percentage"></span>
                        </div>
                    </div>

                    {{! Scale grading: dropdown selector (hidden by default) }}
                    <div data-region="scale-grade" class="d-none">
                        <select data-action="scale-input"
                                class="form-select"
                                aria-label="{{#str}} grade, local_unifiedgrader {{/str}}">
                        </select>
                    </div>
                </div>

                {{! Penalties button }}
                <button type="button"
                        class="btn btn-outline-secondary btn-sm mt-1"
                        data-action="toggle-penalties"
                        title="{{#str}} penalties, local_unifiedgrader {{/str}}">
                    <i class="fa fa-minus-circle me-1" aria-hidden="true"></i>
                    {{#str}} penalties, local_unifiedgrader {{/str}}
                </button>
            </div>

            {{! Penalty badges (rendered by JS) }}
            <div data-region="penalty-badges" class="mt-2 d-flex flex-wrap gap-1"></div>

            {{! Final grade after penalties (hidden when no penalties active) }}
            <div data-region="final-grade-display" class="d-none mt-2">
                <small class="fw-bold text-danger">
                    {{#str}} finalgradeafterpenalties, local_unifiedgrader {{/str}}
                    <span data-region="final-grade-value"></span> / <span data-region="final-grade-max"></span>
                    <span data-region="final-grade-percentage" class="text-muted"></span>
                </small>
            </div>

            {{! Advanced grading placeholder (rubric/marking guide) }}
            <div data-region="advanced-grading" class="d-none mb-3"></div>

        </div>
    </div>

    {{! Rubric / Marking guide section (collapsible, expanded by default, populated by JS) }}
    <div data-region="rubric-section" class="d-none card mb-3">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-2 flex-grow-1"
                 role="button"
                 data-bs-toggle="collapse"
                 data-bs-target="#rubric-collapse-{{uniqid}}"
                 aria-expanded="true"
                 aria-controls="rubric-collapse-{{uniqid}}"
                 style="cursor: pointer;">
                <h6 class="mb-0 d-flex align-items-center gap-2">
                    <span data-region="rubric-title"></span>
                    <span class="badge bg-primary" data-region="rubric-total"></span>
                </h6>
            </div>
            <div class="d-flex align-items-center gap-2 ms-2">
                <i class="fa fa-chevron-down collapse-icon"
                   aria-hidden="true"
                   role="button"
                   data-bs-toggle="collapse"
                   data-bs-target="#rubric-collapse-{{uniqid}}"
                   style="cursor: pointer;"></i>
            </div>
        </div>
        <div id="rubric-collapse-{{uniqid}}" class="collapse show">
            <div class="card-body p-0" data-region="rubric-body"></div>
        </div>
    </div>

    {{! Overall Feedback section (collapsible, collapsed by default) }}
    <div class="card mb-3" data-region="overall-feedback-section">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-2 flex-grow-1 collapsed"
                 role="button"
                 data-bs-toggle="collapse"
                 data-bs-target="#feedback-collapse-{{uniqid}}"
                 aria-expanded="false"
                 aria-controls="feedback-collapse-{{uniqid}}"
                 style="cursor: pointer;">
                <h6 class="mb-0">
                    {{#str}} overall_feedback, local_unifiedgrader {{/str}}
                </h6>
            </div>
            <div class="d-flex align-items-center gap-2 ms-2">
                <button type="button"
                        class="btn btn-link btn-sm p-0 text-muted"
                        data-action="toggle-comment-library"
                        title="{{#str}} clib_title, local_unifiedgrader {{/str}}">
                    <i class="fa fa-commenting" aria-hidden="true"></i>
                </button>
                <i class="fa fa-chevron-down collapse-icon"
                   aria-hidden="true"
                   role="button"
                   data-bs-toggle="collapse"
                   data-bs-target="#feedback-collapse-{{uniqid}}"
                   style="cursor: pointer;"></i>
            </div>
        </div>
        <div id="feedback-collapse-{{uniqid}}" class="collapse" data-region="feedback-collapse">
            <div class="card-body">

                {{! Saved feedback display (shown by JS when feedback exists and not editing) }}
                <div data-region="feedback-display" class="d-none mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small fw-bold text-success">
                            <i class="fa fa-check-circle me-1"></i>
                            {{#str}} feedback_saved, local_unifiedgrader {{/str}}
                        </span>
                        <div class="d-flex gap-1">
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-action="edit-feedback">
                                <i class="fa fa-pencil me-1"></i>{{#str}} edit_feedback, local_unifiedgrader {{/str}}
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger" data-action="delete-feedback">
                                <i class="fa fa-trash me-1"></i>{{#str}} delete_feedback, local_unifiedgrader {{/str}}
                            </button>
                        </div>
                    </div>
                    <div data-region="feedback-display-content" class="border rounded p-3 bg-light small"></div>
                </div>

                {{! Feedback editor wrapper (shown/hidden by JS) }}
                <div data-region="feedback-editor-wrapper">
                    <div class="mb-3">
                        <textarea id="feedback-editor-{{uniqid}}"
                                  data-action="feedback-input"
                                  class="form-control"
                                  rows="10"
                                  placeholder="{{#str}} overall_feedback, local_unifiedgrader {{/str}}"></textarea>
                    </div>

                </div>

            </div>
        </div>
    </div>

    {{! Save button (standalone, always visible) }}
    <button data-action="save-grade" class="btn btn-primary w-100 mb-3" type="button">
        {{#str}} savefeedback, local_unifiedgrader {{/str}}
    </button>

    {{! Feedback files section (collapsible, collapsed by default) }}
    {{#hasfeedbackfileplugin}}
    <div data-region="feedback-files-section" class="card mb-3">
        <div class="card-header py-2 d-flex justify-content-between align-items-center collapsed"
             role="button"
             data-bs-toggle="collapse"
             data-bs-target="#feedbackfiles-collapse-{{uniqid}}"
             aria-expanded="false"
             aria-controls="feedbackfiles-collapse-{{uniqid}}">
            <h6 class="mb-0">
                <i class="fa fa-files-o me-1"></i>
                {{#str}} feedbackfiles, local_unifiedgrader {{/str}}
            </h6>
            <i class="fa fa-chevron-down collapse-icon" aria-hidden="true"></i>
        </div>
        <div id="feedbackfiles-collapse-{{uniqid}}" class="collapse">
            <div class="card-body" data-region="feedback-files-body">
                {{{feedbackfileshtml}}}
                <div class="mt-2 text-end">
                    <button data-action="save-feedback-files" class="btn btn-sm btn-primary" type="button">
                        <i class="fa fa-save me-1"></i>
                        {{#str}} save {{/str}}
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{/hasfeedbackfileplugin}}

    {{! Teacher notes section }}
    {{#canviewnotes}}
    <div data-region="notes-section" class="card mb-3">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <h6 class="mb-0">{{#str}} notes, local_unifiedgrader {{/str}}</h6>
            {{#canmanagenotes}}
            <button data-action="add-note" class="btn btn-sm btn-outline-primary" type="button">
                {{#str}} addnote, local_unifiedgrader {{/str}}
            </button>
            {{/canmanagenotes}}
        </div>
        <div class="card-body">
            <p class="text-muted small mb-2">{{#str}} notes_desc, local_unifiedgrader {{/str}}</p>

            {{! Note editor (hidden by default) }}
            {{#canmanagenotes}}
            <div data-region="note-editor" class="d-none mb-3">
                <textarea data-action="note-input"
                          class="form-control mb-2"
                          rows="3"
                          placeholder="{{#str}} addnote, local_unifiedgrader {{/str}}"></textarea>
                <div class="d-flex gap-2">
                    <button data-action="save-note" class="btn btn-sm btn-primary" type="button">
                        {{#str}} savenote, local_unifiedgrader {{/str}}
                    </button>
                    <button data-action="cancel-note" class="btn btn-sm btn-outline-secondary" type="button">
                        Cancel
                    </button>
                </div>
            </div>
            {{/canmanagenotes}}

            {{! Notes list }}
            <div data-region="notes-list">
                <div data-region="no-notes" class="text-muted small text-center py-2">
                    {{#str}} nonotes, local_unifiedgrader {{/str}}
                </div>
            </div>
        </div>
    </div>
    {{/canviewnotes}}

</div>
