{{!
    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/student_report
    Example context (json):
    {
        "featuresimageurl": "https://example.com/feature-image.png",
        "proctoringprolink": "https://example.com/pro",
        "issiteadmin": true,
        "redirecturl": "https://example.com/upload-image",
        "firstname": "John",
        "lastname": "Doe",
        "email": "john.doe@example.com",
        "userimageurl": "https://example.com/user-image.png",
        "fcmethod": true,
        "analyzeurl": "https://example.com/analyze",
        "data": [
            {
                "name": "Image 1",
                "image_url": "https://example.com/image1.png",
                "img_id": "img1",
                "border_color": "green",
                "lightbox_data": "lightbox-group-1"
            },
            {
                "name": "Image 2",
                "image_url": "https://example.com/image2.png",
                "img_id": "img2",
                "border_color": "red",
                "lightbox_data": "lightbox-group-1"
            }
        ]
    }
}}

{{! print specific student report  }}

{{! if picture is not uploaded  }}
{{#issiteadmin}}
         <div class="alert alert-warning" role="alert" >
            <h1 class="proctoring-custom-warning-message">{{#str}}userimagenotuploaded, quizaccess_proctoring{{/str}}</h1>
            <a href="{{redirecturl}}" class="proctoring-custom-upload-link">{{#str}}uploadimagehere, quizaccess_proctoring{{/str}}</a>
        </div>
{{/issiteadmin}}

<h3>{{#str}}picturesusedreport, quizaccess_proctoring{{/str}}</h3>


{{! user info table  }}


<div class="container-fluid p-0">
    <div class="row no-gutters">
        <!-- Remove any additional margins or padding here -->
        <div class="col-lg-3 col-md-5 ">
            <table class="generaltable generalbox reporttable" cellpadding="0" cellspacing="0" id="proctoring-table-style">
            <thead>
                <tr>
                    <th class = "text-center">{{#str}}name, quizaccess_proctoring{{/str}}</th>
                </tr>
            </thead>
                <tbody>
                    <tr>
                        <td class="text-center">
                            <img src="{{userimageurl}}" alt="User Picture"class="img-fluid" id="proctoring-profile-img">
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center font-weight-bold">{{firstname}} {{lastname}}</td>
                    </tr>
                    <tr>
                        <td class="text-center font-weight-bold">{{email}}</td>
                    </tr>
                    {{#fcmethod}}
                     <tr>
                        <td class = "text-center"><a href="{{analyzeurl}}" class="btn btn-primary text-center">{{#str}}analyzimage, quizaccess_proctoring{{/str}}</a></td>
                    </tr>
                    {{/fcmethod}}
                </tbody>
            </table>
        </div>

    
        <div class=" col-lg-9 col-md-7 ">
            <table class="generaltable generalbox reporttable" cellpadding="0" cellspacing="0" id="proctoring-table-style">
            <thead>
                <tr>
                    <th class = "text-center" >{{#str}}webcampicture, quizaccess_proctoring{{/str}}</th>
                </tr>
            </thead>
            <tbody id = "proctoring-table-body"  >
                {{#data}}
                <tr class="p-0 m-0">
                    <td class="p-0 m-0">{{name}}</td>
                    <td class="p-0 m-0">
                        {{#image_url}}
                            <a href="{{image_url}}" data-lightbox="proc-images" data-title="{{name}}">
                                <img id="{{img_id}}" class="proctoring-border-color-{{border_color}}"  width="100" 
                                    src="{{image_url}}" alt="{{name}}" data-lightbox="{{lightbox_data}}">
                            </a>
                        {{/image_url}}
                    </td>
                </tr>
                {{/data}}
            </tbody>
            </table>
        </div>
    </div>
</div>

</div>
