{{!
    @template local_unifiedgrader/grading_interface

    Main grading interface layout with two-panel design.

    Context variables required:
    * cmid - int - Course module ID
    * courseid - int - Course ID
    * userid - int - Initial user ID to display
    * activityinfojson - string - JSON-encoded activity metadata
    * participantsjson - string - JSON-encoded participant list
    * activityname - string - Activity name for display
    * activitytype - string - Activity type (assign, forum, quiz)
    * maxgrade - float - Maximum grade
    * gradingmethod - string - Grading method (simple, rubric, guide)
    * canviewall - bool - Can view all students
    * canviewnotes - bool - Can view teacher notes
    * canmanagenotes - bool - Can create/edit teacher notes
    * issimplegrading - bool - Whether using simple grading
    * uniqid - string - Unique ID for this instance

    Example context (json):
    {
        "cmid": 1,
        "courseid": 1,
        "userid": 2,
        "activityinfojson": "{}",
        "participantsjson": "[]",
        "activityname": "Assignment 1",
        "activitytype": "assign",
        "maxgrade": 100,
        "gradingmethod": "simple",
        "canviewall": true,
        "canviewnotes": true,
        "canmanagenotes": true,
        "issimplegrading": true,
        "uniqid": "abc123"
    }
}}
<div id="{{uniqid}}-unifiedgrader"
     class="local-unifiedgrader-container position-relative"
     data-cmid="{{cmid}}"
     data-courseid="{{courseid}}"
     data-userid="{{userid}}"
     data-activityinfo="{{activityinfojson}}"
     data-participants="{{participantsjson}}"
     data-canviewall="{{canviewall}}"
     data-canviewnotes="{{canviewnotes}}"
     data-canmanagenotes="{{canmanagenotes}}"
     data-gradingmethod="{{gradingmethod}}"
     data-maxgrade="{{maxgrade}}"
     data-groups="{{groupsjson}}"
     data-usergroupids="{{usergroupidsjson}}"
     data-currentgroup="{{currentgroup}}"
     data-draftitemid="{{draftitemid}}"
     data-hasgroupmode="{{hasgroupmode}}"
     data-feedbackfilesdraftid="{{feedbackfilesdraftid}}"
     data-hasfeedbackfileplugin="{{#hasfeedbackfileplugin}}1{{/hasfeedbackfileplugin}}{{^hasfeedbackfileplugin}}0{{/hasfeedbackfileplugin}}"
     data-feedbackfilesclientid="{{feedbackfilesclientid}}"
     data-allowmanualgradeoverride="{{#allowmanualgradeoverride}}1{{/allowmanualgradeoverride}}{{^allowmanualgradeoverride}}0{{/allowmanualgradeoverride}}"
     data-gradesposted="{{#gradesposted}}1{{/gradesposted}}{{^gradesposted}}0{{/gradesposted}}"
     data-gradeshidden="{{gradeshidden}}"
     data-coursecode="{{coursecode}}"
     data-canloginas="{{#canloginas}}1{{/canloginas}}{{^canloginas}}0{{/canloginas}}"
     data-coursefullname="{{coursefullname}}"
     data-enablereportform="{{#enablereportform}}1{{/enablereportform}}{{^enablereportform}}0{{/enablereportform}}"
     data-reportformurl="{{reportformurl}}"
     data-graderfullname="{{graderfullname}}">

    {{! Header bar }}
    <div class="d-flex align-items-stretch border-bottom bg-white" style="height: 80px;">

        {{! Left: Assignment info }}
        <div class="d-flex flex-column justify-content-center px-3 border-end" style="min-width: 220px;">
            <div class="small">
                <a href="{{courseurl}}" class="text-decoration-none">{{courseshortname}}</a>
            </div>
            <div class="fw-bold small">
                <a href="{{activityurl}}" class="text-decoration-none">{{activityname}}</a>
            </div>
            <div class="small">
                <a href="{{submissionsurl}}" class="text-decoration-none text-muted">
                    {{#str}} viewallsubmissions, local_unifiedgrader {{/str}}
                </a>
            </div>
        </div>

        {{! Center: Current student info (populated by JS) }}
        <div class="d-flex align-items-center flex-grow-1 px-3 gap-3" data-region="student-info-header">
            {{! Clickable avatar + name area with profile popout }}
            <div class="d-flex align-items-center gap-3 position-relative"
                 data-action="toggle-profile-popout"
                 role="button"
                 style="cursor: pointer;">
                <img data-region="student-avatar"
                     class="rounded-circle d-none"
                     width="48" height="48"
                     alt="">
                <div>
                    <h4 class="mb-0 fs-6">
                        <span data-region="student-name-header">--</span>
                    </h4>
                    <small class="text-muted" data-region="student-submitted-date"></small>
                </div>
                {{! Profile popout (hidden, populated by JS) }}
                <div data-region="profile-popout"
                     class="d-none local-unifiedgrader-profile-popout">
                </div>
            </div>
            {{! Status badge and submission comments (outside profile click area) }}
            <div class="d-flex align-items-center gap-2">
                <div data-region="student-status-wrapper" class="d-inline-block">
                    <span data-region="student-status-badge" class="badge bg-secondary"></span>
                </div>
                <span data-region="submission-comments" class="position-relative d-inline-block">
                    <button type="button"
                            class="btn btn-link btn-sm p-0 text-muted"
                            data-action="toggle-comments"
                            title="{{#str}} submissioncomments, local_unifiedgrader {{/str}}">
                        <i class="fa fa-comments"></i>
                    </button>
                    <span data-region="comment-count-badge"
                          class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none"
                          style="font-size: 0.6rem;">
                        0
                    </span>
                    <div data-region="comments-popout"
                         class="d-none local-unifiedgrader-comments-popout">
                    </div>
                </span>
            </div>
        </div>

        {{! Right: Save status + post grades toggle + layout toggle + student navigator }}
        <div class="d-flex align-items-center px-3">
            <div data-region="save-status" class="text-muted small"></div>
        </div>

        {{#showpostgrades}}
        <div data-region="post-grades-toggle" class="d-flex align-items-center px-2 border-start">
            <div class="dropdown">
                <button type="button"
                        class="btn btn-sm dropdown-toggle"
                        data-bs-toggle="dropdown"
                        data-action="post-grades-status"
                        aria-expanded="false">
                    <i class="fa"></i>
                    <span class="d-none d-md-inline ms-1"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" data-region="post-grades-menu">
                    <li>
                        <button class="dropdown-item" type="button" data-action="post-grades-now">
                            <i class="fa fa-eye fa-fw me-1"></i>
                            {{#str}} post_grades, local_unifiedgrader {{/str}}
                        </button>
                    </li>
                    <li>
                        <button class="dropdown-item" type="button" data-action="hide-grades">
                            <i class="fa fa-eye-slash fa-fw me-1"></i>
                            {{#str}} unpost_grades, local_unifiedgrader {{/str}}
                        </button>
                    </li>
                    {{#showschedulepost}}
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <div class="px-3 py-2" data-region="schedule-section">
                            <label class="form-label small fw-bold mb-1">
                                <i class="fa fa-clock-o fa-fw me-1"></i>
                                {{#str}} schedule_post, local_unifiedgrader {{/str}}
                            </label>
                            <input type="datetime-local"
                                   class="form-control form-control-sm"
                                   data-action="schedule-date-input">
                            <button class="btn btn-sm btn-primary w-100 mt-2"
                                    type="button"
                                    data-action="schedule-post">
                                {{#str}} schedule_post_btn, local_unifiedgrader {{/str}}
                            </button>
                        </div>
                    </li>
                    {{/showschedulepost}}
                </ul>
            </div>
        </div>
        {{/showpostgrades}}

        <div class="d-flex align-items-center px-2 border-start">
            <div class="btn-group btn-group-sm" role="group" data-region="layout-toggle">
                <button type="button" class="btn btn-outline-secondary active"
                        data-action="layout-both"
                        title="{{#str}} layout_both, local_unifiedgrader {{/str}}">
                    <svg width="16" height="12" viewBox="0 0 16 12">
                        <rect x="0.5" y="0.5" width="9" height="11" rx="1"
                              fill="none" stroke="currentColor" stroke-width="1.2"/>
                        <rect x="10.5" y="0.5" width="5" height="11" rx="1"
                              fill="none" stroke="currentColor" stroke-width="1.2"/>
                    </svg>
                </button>
                <button type="button" class="btn btn-outline-secondary"
                        data-action="layout-preview"
                        title="{{#str}} layout_preview, local_unifiedgrader {{/str}}">
                    <svg width="16" height="12" viewBox="0 0 16 12">
                        <rect x="0.5" y="0.5" width="15" height="11" rx="1"
                              fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="1.2"/>
                        <line x1="10.5" y1="1" x2="10.5" y2="11"
                              stroke="currentColor" stroke-width="1" stroke-dasharray="2 1"/>
                    </svg>
                </button>
                <button type="button" class="btn btn-outline-secondary"
                        data-action="layout-grade"
                        title="{{#str}} layout_grade, local_unifiedgrader {{/str}}">
                    <svg width="16" height="12" viewBox="0 0 16 12">
                        <rect x="0.5" y="0.5" width="15" height="11" rx="1"
                              fill="none" stroke="currentColor" stroke-width="1.2"/>
                        <rect x="5.5" y="0.5" width="10" height="11" rx="0"
                              fill="currentColor" opacity="0.15" stroke="none"/>
                        <line x1="5.5" y1="1" x2="5.5" y2="11"
                              stroke="currentColor" stroke-width="1" stroke-dasharray="2 1"/>
                    </svg>
                </button>
            </div>
        </div>

        {{> local_unifiedgrader/student_navigator }}

    </div>

    {{! Two-panel layout }}
    <div class="container-fluid" style="height: calc(100vh - 80px);">
        <div class="row h-100">

            {{! Left panel: Submission preview }}
            <div class="col-lg-7 col-md-6 h-100 p-0 border-end" data-region="preview-panel">
                {{> local_unifiedgrader/preview_panel }}
            </div>

            {{! Right panel: file selector + marking }}
            <div class="col-lg-5 col-md-6 h-100 p-0 d-flex flex-column" data-region="marking-panel-wrapper">

                {{! Submitted files selector — click to preview in left panel }}
                <div data-region="file-selector" class="d-none border-bottom">
                    <div data-region="file-selector-list" class="d-flex flex-wrap gap-1 px-3 py-2"></div>
                </div>

                <div class="flex-grow-1 overflow-auto" data-region="marking-panel">
                    {{> local_unifiedgrader/marking_panel }}
                </div>
            </div>

        </div>
    </div>

    {{! Loading overlay }}
    <div data-region="loading-overlay" class="d-none position-absolute top-0 start-0 w-100 h-100"
         style="background: rgba(255,255,255,0.7); z-index: 100;">
        <div class="d-flex align-items-center justify-content-center h-100">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">{{#str}} loading, local_unifiedgrader {{/str}}</span>
            </div>
        </div>
    </div>
</div>

{{#js}}
require(['local_unifiedgrader/grader'], function(Grader) {
    Grader.init('{{uniqid}}-unifiedgrader');
});
{{/js}}
