{{!
    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 mod_booking/page_allteachers

    Classes required for JS:
    * none

    Data attributes required for JS:
    * data-region

    Example context (json):
    {
        "canedit" : true,
        "teachers" : [
            {
                "key": [
                    {
                        "teacherid" : "1005",
                        "firstname" : "Billy",
                        "lastname" : "Teachy",
                        "orderletter" : "T",
                        "description" : "description text",
                        "linktoperformedunitsreport" :  "http://site/mod/booking/teacher_performed_units_report.php?teacherid=1005",
                        "email" : "billy.teachy@mailnotexisting.net",
                        "messagingispossible" : true,
                        "link" : "http://site/mod/booking/teacher.php?teacherid=1005",
                        "messagelink" : "http://sote/message/index.php?id=1005"
                    }
                ]
            }
    ]
}
}}
{{#canedit}}
<a class="text-primary" data-toggle="collapse" data-bs-toggle="collapse" href="#collapsiblelistofteachers" role="button" aria-expanded="false" aria-controls="collapsiblelistofteachers">
    <i class="fa fa-envelope" aria-hidden="true"></i> {{#str}} showteachersmailinglist, mod_booking {{/str}}
</a>
<div class="collapse card bg-light rounded p-2 page-allteachers-teachersmailinglist" id="collapsiblelistofteachers">
    {{#teachers}}
        "{{lastname}} {{firstname}}" &lt;{{email}}&gt;;<br>
    {{/teachers}}
</div>
{{/canedit}}
<div class="row">
    {{#teachers}}
        <div class="card m-2 page-allteachers-card">
            <div class="card-header bg-dark d-flex justify-content-between align-items-center">
                <a href="{{link}}" style="text-decoration: none;">
                    <div class="text-white h3 mb-0 page-allteachers-teachername">{{lastname}} {{firstname}}</div>
                </a>
                {{#profileediturl}}
                <div class="page-allteachers-profilelink text-white edit-teacher-description" data-teacherid="{{teacherid}}"><i class="fa fa-pencil" aria-hidden="true" style="color: white;"></i></div>
                {{/profileediturl}}
                <div class="page-allteachers-orderletter bg-light rounded text-center">{{orderletter}}</div>
            </div>
            <div class="card-body bg-light">
                <div class="row">
                    <div class="col-md-3">
                        {{#image}}<a href="{{link}}"><img src="{{image}}" class="page-allteachers-teacherimage rounded-circle" width="70"></a>{{/image}}
                    </div>
                    <div class="col-md-9">
                        {{#description}}<p class="card-text">{{{description}}}</p>{{/description}}
                        {{#descriptionlong}}
                            <div class="mb-3">
                                <!-- Trigger button -->
                                <button type="button" class="btn btn-link"
                                    data-toggle="modal" data-target="#descriptionlong-modal-{{teacherid}}"
                                    data-bs-toggle="modal" data-bs-target="#descriptionlong-modal-{{teacherid}}">
                                    {{#str}} more, core {{/str}}
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="descriptionlong-modal-{{teacherid}}" tabindex="-1" role="dialog" aria-labelledby="descriptionlong-modal-title-{{teacherid}}" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="descriptionlong-modal-title-{{teacherid}}">
                                                    {{#str}} description, mod_booking {{/str}}
                                                </h5>
                                                <button type="button" class="btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <!-- Content of the modal -->
                                                <p>{{{.}}}</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal" data-bs-dismiss="modal">
                                                    {{#str}} close, mod_booking {{/str}}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {{/descriptionlong}}
                    </div>
                </div>
            </div>
            <div class="card-footer bg-light">
                <div class="row page-allteachers-buttons d-flex justify-content-around">
                    <a href="{{link}}" class="btn btn-light">
                        <div>
                            <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                            <div>{{#str}} showcoursesofteacher, mod_booking {{/str}}</div>
                        </div>
                    </a>
                    {{^messagesdeactivated}}
                        {{#messagingispossible}}
                        <a id="message-user-button" role="button" data-conversationid="0"
                        data-userid="{{teacherid}}" class="btn btn-light"
                        href="{{messagelink}}">
                            <div>
                                <i class="icon fa fa-comment-o fa-fw iconsmall" title="{{#str}} messagebutton, mod_booking {{/str}}"
                                role="img" aria-label="{{#str}} messagebutton, mod_booking {{/str}}"></i>
                                <div class="header-button-title">{{#str}} messagebutton, mod_booking {{/str}}</div>
                            </div>
                        </a>
                        {{/messagingispossible}}
                    {{/messagesdeactivated}}
                    {{#email}}
                    <a href="mailto:{{email}}" class="page-allteachers-email btn btn-light">
                        <div>
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                            <div>{{#str}} mail, mod_booking {{/str}}</div>
                        </div>
                    </a>
                    {{/email}}
                    {{#linktoperformedunitsreport}}
                    <a href="{{linktoperformedunitsreport}}" class="page-allteachers-linktoperformedunitsreport btn btn-light" target="_self">
                        <div>
                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                            <div>{{#str}} hours {{/str}}</div>
                        </div>
                    </a>
                    {{/linktoperformedunitsreport}}
                </div>
            </div>
        </div>
    {{/teachers}}
</div>

{{#js}}
    require(['mod_booking/edit-teacher-description'], function(init) {
    init.init();
    });
{{/js}}