{{!
    @template local_unifiedgrader/feedback_view_forum

    Student read-only feedback view for forum activities.
    Shows grade, feedback text, rubric/marking guide, the student's forum posts,
    and annotated attachment files (if any).

    Context variables required:
    - cmid: Course module ID
    - activityname: Activity name
    - activityurl: URL to the forum
    - gradedisplay: Formatted grade string (e.g. "85 / 100")
    - feedback: HTML feedback text
    - hasfeedback: Whether feedback text exists
    - postcontent: Pre-rendered HTML of the student's forum posts
    - hasposts: Whether the student has made any posts
    - haspdffiles: Whether there are annotatable attachment files
    - selectedfileid: Currently selected file ID
    - selectedfileurl: Preview URL of the selected PDF
    - selectedfilename: Filename of the selected PDF
    - pdffiles: Array of PDF files
    - hasmultiplefiles: Whether there are multiple PDF files
    - pdffilesjson: JSON-encoded array of PDF files
    - hasannotatedpdf: Whether an annotated PDF exists for the selected file
    - annotatedpdfurl: URL of the annotated PDF (for inline viewer)
    - downloadfilename: Suggested filename for the feedback PDF download
    - annotatedpdfmapjson: JSON map of fileid to annotated PDF URL
    - feedbackdownloadurl: URL to download the combined feedback summary + annotated PDF
    - userid: Current student user ID
    - hasrubric: Whether rubric grading is used
    - rubriccriteria: Array of rubric criteria with levels
    - rubrictotal: Sum of selected rubric level scores
    - hasguide: Whether marking guide is used
    - guidecriteria: Array of guide criteria with scores and remarks
    - guidetotal: Sum of achieved guide scores
    - guidemaxtotal: Sum of max guide scores
    - hasadvancedgrading: Whether rubric or guide is active
    - gradingmethodname: Display name of the grading method
    - showrightcolumn: Whether to show the right column
}}
<div class="local-unifiedgrader-feedback" data-region="feedback-viewer"
     data-cmid="{{cmid}}" data-fileid="{{selectedfileid}}"
     data-pdfurl="{{selectedfileurl}}" data-pdffiles="{{pdffilesjson}}"
     data-annotatedpdfmap="{{annotatedpdfmapjson}}">

    {{! Header bar with back button, activity name, download, grade badge }}
    <div class="d-flex align-items-center justify-content-between border-bottom py-2 px-3 mb-3">
        <div class="d-flex align-items-center gap-2">
            <a href="{{activityurl}}" class="btn btn-sm btn-outline-secondary"
               title="{{#str}} backtocourse, local_unifiedgrader {{/str}}">
                <i class="fa fa-arrow-left" aria-hidden="true"></i>
            </a>
            <h5 class="mb-0">{{activityname}}</h5>
            <a href="{{feedbackdownloadurl}}" class="btn btn-sm btn-outline-primary ms-2" download="{{downloadfilename}}"
               data-region="download-feedback-pdf">
                <i class="fa fa-download me-1" aria-hidden="true"></i>
                {{#str}} download_feedback_pdf, local_unifiedgrader {{/str}}
            </a>
        </div>
        {{#gradedisplay}}
            <span class="badge bg-primary fs-6">
                {{#str}} grade, local_unifiedgrader {{/str}}: {{gradedisplay}}
            </span>
        {{/gradedisplay}}
        {{#haspenalties}}
            {{#penalties}}
                <span class="badge bg-warning text-dark local-unifiedgrader-penalty-badge">
                    {{text}}
                </span>
            {{/penalties}}
        {{/haspenalties}}
    </div>

    <div class="row g-3 px-3">
        {{! Left column: Forum posts + Annotated files }}
        <div class="{{#showrightcolumn}}col-lg-7{{/showrightcolumn}}{{^showrightcolumn}}col-12{{/showrightcolumn}}">

            {{#haspdffiles}}
                {{! Tabbed view: Posts and Annotated Files }}
                <ul class="nav nav-tabs mb-2" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-action="forum-tab" data-tab="posts"
                                type="button" role="tab">
                            <i class="fa fa-comments-o me-1" aria-hidden="true"></i>
                            {{#str}} forum_tab_posts, local_unifiedgrader {{/str}}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-action="forum-tab" data-tab="files"
                                type="button" role="tab">
                            <i class="fa fa-file-pdf-o me-1" aria-hidden="true"></i>
                            {{#str}} forum_tab_files, local_unifiedgrader {{/str}}
                        </button>
                    </li>
                </ul>

                {{! Posts panel (default visible) }}
                <div data-region="forum-tab-posts">
                    {{#hasposts}}
                        <div class="card">
                            <div class="card-body" style="max-height: calc(100vh - 260px); overflow-y: auto;">
                                {{{postcontent}}}
                            </div>
                        </div>
                    {{/hasposts}}
                    {{^hasposts}}
                        <div class="alert alert-info">
                            {{#str}} forum_no_posts, local_unifiedgrader {{/str}}
                        </div>
                    {{/hasposts}}
                </div>

                {{! Annotated files panel (hidden by default) }}
                <div data-region="forum-tab-files" class="d-none">
                    {{#hasmultiplefiles}}
                        <div class="mb-2">
                            <select data-action="file-selector" class="form-select form-select-sm">
                                {{#pdffiles}}
                                    <option value="{{fileid}}" data-url="{{previewurl}}">
                                        {{filename}}
                                    </option>
                                {{/pdffiles}}
                            </select>
                        </div>
                    {{/hasmultiplefiles}}

                    {{! PDF viewer with read-only annotation layer }}
                    <div data-region="pdf-viewer-wrapper"
                         style="height: calc(100vh - 260px); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.375rem; overflow: hidden;">
                        <div data-region="pdf-viewer-component" class="h-100" data-readonly="1">
                            {{> local_unifiedgrader/pdf_viewer }}
                        </div>
                    </div>
                </div>
            {{/haspdffiles}}

            {{^haspdffiles}}
                {{! No annotatable files — show posts directly without tabs }}
                {{#hasposts}}
                    <div class="card">
                        <div class="card-header py-2">
                            <h6 class="mb-0">
                                <i class="fa fa-comments-o me-1" aria-hidden="true"></i>
                                {{#str}} forum_your_posts, local_unifiedgrader {{/str}}
                            </h6>
                        </div>
                        <div class="card-body" style="max-height: calc(100vh - 220px); overflow-y: auto;">
                            {{{postcontent}}}
                        </div>
                    </div>
                {{/hasposts}}
                {{^hasposts}}
                    <div class="alert alert-info">
                        {{#str}} forum_no_posts, local_unifiedgrader {{/str}}
                    </div>
                {{/hasposts}}
            {{/haspdffiles}}
        </div>

        {{! Right column: Feedback + Rubric/Guide }}
        {{#showrightcolumn}}
            <div class="col-lg-5">
                {{#hasfeedback}}
                    <div class="card mb-3">
                        <div class="card-header py-2">
                            <h6 class="mb-0">
                                <i class="fa fa-comment-o me-1" aria-hidden="true"></i>
                                {{#str}} feedback, local_unifiedgrader {{/str}}
                            </h6>
                        </div>
                        <div class="card-body" style="max-height: 300px; overflow-y: auto;">
                            {{{feedback}}}
                        </div>
                    </div>
                {{/hasfeedback}}

                {{! Rubric display (read-only) }}
                {{#hasrubric}}
                    <div class="card mb-3">
                        <div class="card-header py-2 d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="fa fa-th me-1" aria-hidden="true"></i>
                                {{gradingmethodname}}
                            </h6>
                            <span class="badge bg-primary">{{rubrictotal}} pts</span>
                        </div>
                        <div class="card-body p-0">
                            {{#rubriccriteria}}
                                <div class="border-bottom p-3">
                                    <div class="fw-bold small mb-2">{{description}}</div>
                                    <div class="d-flex flex-wrap gap-1">
                                        {{#levels}}
                                            <div class="p-2 border rounded small flex-fill
                                                {{#selected}} bg-primary bg-opacity-10 border-primary {{/selected}}
                                                {{^selected}} bg-light text-muted {{/selected}}"
                                                 style="min-width: 80px;">
                                                <div class="fw-bold {{#selected}}text-primary{{/selected}}">
                                                    {{score}} pts
                                                </div>
                                                <div style="font-size: 0.75rem;">{{definition}}</div>
                                            </div>
                                        {{/levels}}
                                    </div>
                                    {{#hasselection}}
                                        <div class="small text-end mt-1 text-primary fw-bold">
                                            {{selectedscore}} pts
                                        </div>
                                    {{/hasselection}}
                                    {{#hasremark}}
                                        <div class="mt-2 p-2 rounded small"
                                             style="background-color: rgba(13, 202, 240, 0.1); border: 1px solid rgba(13, 202, 240, 0.3);">
                                            <div class="fw-semibold text-info mb-1" style="font-size: 0.7rem;">
                                                <i class="fa fa-comment me-1" aria-hidden="true"></i>
                                                {{#str}} teacher_remark, local_unifiedgrader {{/str}}
                                            </div>
                                            <div>{{{remark}}}</div>
                                        </div>
                                    {{/hasremark}}
                                </div>
                            {{/rubriccriteria}}
                        </div>
                    </div>
                {{/hasrubric}}

                {{! Marking guide display (read-only) }}
                {{#hasguide}}
                    <div class="card mb-3">
                        <div class="card-header py-2 d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="fa fa-list-ol me-1" aria-hidden="true"></i>
                                {{gradingmethodname}}
                            </h6>
                            <span class="badge bg-primary">{{guidetotal}} / {{guidemaxtotal}}</span>
                        </div>
                        <div class="card-body p-0">
                            {{#guidecriteria}}
                                <div class="border-bottom p-3">
                                    <div class="d-flex justify-content-between align-items-start mb-1">
                                        <div class="fw-bold small">{{shortname}}</div>
                                        <span class="badge {{#hasscore}}bg-primary{{/hasscore}}{{^hasscore}}bg-secondary{{/hasscore}}">
                                            {{#hasscore}}{{score}}{{/hasscore}}{{^hasscore}}&ndash;{{/hasscore}}
                                            / {{maxscore}}
                                        </span>
                                    </div>
                                    {{#description}}
                                        <div class="small text-muted mb-1">{{{description}}}</div>
                                    {{/description}}
                                    {{#hasremark}}
                                        <div class="mt-2 p-2 rounded small"
                                             style="background-color: rgba(13, 202, 240, 0.1); border: 1px solid rgba(13, 202, 240, 0.3);">
                                            <div class="fw-semibold text-info mb-1" style="font-size: 0.7rem;">
                                                <i class="fa fa-comment me-1" aria-hidden="true"></i>
                                                {{#str}} teacher_remark, local_unifiedgrader {{/str}}
                                            </div>
                                            <div>{{{remark}}}</div>
                                        </div>
                                    {{/hasremark}}
                                </div>
                            {{/guidecriteria}}
                        </div>
                    </div>
                {{/hasguide}}
            </div>
        {{/showrightcolumn}}
    </div>
</div>

{{#js}}
    {{#haspdffiles}}
    (function() {
        var container = document.querySelector('[data-region="feedback-viewer"]');
        if (!container) return;

        var tabs = container.querySelectorAll('[data-action="forum-tab"]');
        var postsPanel = container.querySelector('[data-region="forum-tab-posts"]');
        var filesPanel = container.querySelector('[data-region="forum-tab-files"]');
        var viewerInitialized = false;

        tabs.forEach(function(tab) {
            tab.addEventListener('click', function() {
                var target = tab.dataset.tab;

                // Update active tab styling.
                tabs.forEach(function(t) { t.classList.remove('active'); });
                tab.classList.add('active');

                // Toggle panel visibility.
                if (target === 'posts') {
                    postsPanel.classList.remove('d-none');
                    filesPanel.classList.add('d-none');
                } else {
                    postsPanel.classList.add('d-none');
                    filesPanel.classList.remove('d-none');

                    // Lazy-init the PDF viewer on first switch to files tab
                    // (avoids rendering into a hidden container).
                    if (!viewerInitialized) {
                        viewerInitialized = true;
                        require(['local_unifiedgrader/feedback_viewer'], function(FeedbackViewer) {
                            FeedbackViewer.init();
                        });
                    }
                }
            });
        });
    })();
    {{/haspdffiles}}
{{/js}}
