{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template local_unifiedgrader/feedback_view_quiz

    Student read-only feedback view for quiz activities.
    Shows grade, feedback text, penalties, and the student's rendered quiz attempt.

    Context variables required:
    - cmid: Course module ID
    - activityname: Activity name
    - activityurl: URL to the quiz
    - gradedisplay: Formatted grade string (e.g. "85 / 100")
    - feedback: HTML feedback text
    - hasfeedback: Whether feedback text exists
    - attemptcontent: Pre-rendered HTML of the student's quiz attempt
    - hasattempt: Whether the student has a finished attempt
    - feedbackdownloadurl: URL to download the combined feedback summary PDF
    - downloadfilename: Suggested filename for the feedback PDF download
    - userid: Current student user ID
    - showrightcolumn: Whether to show the right column
    - haspenalties: Whether penalties exist
    - penalties: Array of penalty badge objects
    - hasmultipleattempts: Whether there are multiple finished attempts
    - attempts: Array of attempt objects with attemptnumber, label, date, selected, url
    - selectedattempt: Currently selected attempt number
    - hascommentsfeature: Whether submission comments are enabled
    - commentcount: Number of existing submission comments

    Example context (json):
    {
        "cmid": 1,
        "activityname": "Quiz 1",
        "activityurl": "https://example.com",
        "gradedisplay": "85 / 100",
        "feedback": "<p>Well done.</p>",
        "hasfeedback": true,
        "attemptcontent": "<p>Question 1 answer...</p>",
        "hasattempt": true,
        "feedbackdownloadurl": "https://example.com/download",
        "downloadfilename": "feedback.pdf",
        "userid": 2,
        "showrightcolumn": true,
        "haspenalties": false,
        "penalties": [],
        "hasmultipleattempts": false,
        "attempts": [],
        "selectedattempt": 1,
        "hascommentsfeature": true,
        "commentcount": 0
    }
}}
<div class="local-unifiedgrader-feedback" data-region="feedback-viewer"
     data-cmid="{{cmid}}">

    {{! Header bar with back button, activity name, attempt selector, 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>
            {{#hasmultipleattempts}}
                <div class="dropdown ms-2">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                            data-bs-toggle="dropdown" aria-expanded="false"
                            title="{{#str}} quiz_select_attempt, local_unifiedgrader {{/str}}">
                        <i class="fa fa-list-ol me-1" aria-hidden="true"></i>
                        {{#attempts}}
                            {{#selected}}{{label}}{{/selected}}
                        {{/attempts}}
                    </button>
                    <ul class="dropdown-menu">
                        {{#attempts}}
                            <li>
                                <a class="dropdown-item {{#selected}}active{{/selected}}" href="{{url}}">
                                    {{label}} <span class="text-muted small ms-2">{{date}}</span>
                                </a>
                            </li>
                        {{/attempts}}
                    </ul>
                </div>
            {{/hasmultipleattempts}}
            {{#hasfeedback}}
                <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>
            {{/hasfeedback}}
        </div>
        <div class="d-flex align-items-center gap-3">
            {{#hascommentsfeature}}
                <div data-region="feedback-comments" data-cmid="{{cmid}}" data-userid="{{userid}}"
                     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" style="font-size: 1.25rem;"></i>
                    </button>
                    <span data-region="comment-count-badge"
                          class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger {{^commentcount}}d-none{{/commentcount}}"
                          style="font-size: 0.6rem;">
                        {{commentcount}}
                    </span>
                    <div data-region="comments-popout"
                         class="d-none local-unifiedgrader-comments-popout">
                    </div>
                </div>
            {{/hascommentsfeature}}
            {{#haspenalties}}
                {{#penalties}}
                    <span class="badge bg-warning text-dark local-unifiedgrader-penalty-badge">
                        {{text}}
                    </span>
                {{/penalties}}
            {{/haspenalties}}
            {{#gradedisplay}}
                <span class="badge bg-primary fs-6">
                    {{#str}} grade, local_unifiedgrader {{/str}}: {{gradedisplay}}
                </span>
            {{/gradedisplay}}
        </div>
    </div>

    <div class="row g-3 px-3">
        {{! Left column: Quiz attempt content }}
        <div class="{{#showrightcolumn}}col-lg-7{{/showrightcolumn}}{{^showrightcolumn}}col-12{{/showrightcolumn}}">
            {{#hasattempt}}
                <div class="card">
                    <div class="card-header py-2">
                        <h6 class="mb-0">
                            <i class="fa fa-pencil-square-o me-1" aria-hidden="true"></i>
                            {{#str}} quiz_your_attempt, local_unifiedgrader {{/str}}
                        </h6>
                    </div>
                    <div class="card-body" style="max-height: calc(100vh - 220px); overflow-y: auto;">
                        {{{attemptcontent}}}
                    </div>
                </div>
            {{/hasattempt}}
            {{^hasattempt}}
                <div class="alert alert-info">
                    {{#str}} quiz_no_attempt, local_unifiedgrader {{/str}}
                </div>
            {{/hasattempt}}
        </div>

        {{! Right column: Feedback }}
        {{#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: 400px; overflow-y: auto;">
                            {{{feedback}}}
                        </div>
                    </div>
                {{/hasfeedback}}
            </div>
        {{/showrightcolumn}}
    </div>
</div>
{{#js}}
    {{#hascommentsfeature}}
    require(['local_unifiedgrader/feedback_comments'], function(FeedbackComments) {
        FeedbackComments.init({{cmid}}, {{userid}});
    });
    {{/hascommentsfeature}}
{{/js}}
