{{!
    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 quizaccess_proctoring/proctoring_page
    Example context (json):
    {
        'header' => 'Proctoring Setup',
        'proctoringstatement' => 'Statement regarding proctoring policies.',
        'videonotavailable' => 'Your browser does not support video.',
        'photoalt' => 'Captured Photo for Verification'
    }
}}

<div class="container">
    <!-- Header Section -->
    <div class="row">
        <div class="col font-weight-bold">
            {{#header}}
                * {{{header}}}
            {{/header}}
        </div>
    </div>

    <!-- Proctoring Statement Section -->
    <div class="row">
        <div class="col font-weight-bold">
            {{#proctoringstatement}}
                {{{proctoringstatement}}}
            {{/proctoringstatement}}
        </div>
    </div>

    <!-- Video and Canvas Section -->
    <div class="row">
        <div class="col">
            <div class="container-fluid">
                <div class="row justify-content-center align-items-center">
                    <div class="col-12 bg-light border rounded p-3">
                        <video 
                            id="video" 
                            class="img-fluid bg-dark proctoring-video-modal">
                            {{#videonotavailable}}
                                {{{videonotavailable}}}
                            {{/videonotavailable}}
                        </video>
                    </div>
                </div>
            </div>
            <canvas id="canvas" class="d-none"></canvas>
            <img 
                id="photo" 
                class="d-none mt-3 img-fluid"
                alt="{{photoalt}}" />
        </div>
    </div>
</div>
