{{!
    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_teacher

    Classes required for JS:
    * none

    Data attributes required for JS:
    * data-region

    Example context (json):
    {
        "teacher" : [
            {
                "teacherid" : "1006",
                "firstname" : "Maxima",
                "lastname" : "Yoga",
                "description" : "description",
                "canedit" : "1",
                "optiontables" : [
                    {
                        "key" : [
                            {
                                "bookingid" : "1",
                                "bookinginstancename" : "ws 22/23",
                                "tablename" : "ws",
                                "table" : "HTML of the table of teacher's booking options",
                                "class" : "active show"
                            }
                        ]
                    }
                ]
            }
        ],
        "linktoperformedunitsreport" : "http://site/mod/booking/teacher_performed_units_report.php?teacherid=1006",
        "wwwroot" : "http://site"
    }
}}

{{#error}}
<div class="alert alert-danger" role="alert">{{{errormessage}}}</div>
{{/error}}
{{^error}}
<div class="row row-cols-1 row-cols-sm-2">
    {{#teacher}}
        <div class="col">
            <div class="card">
                {{#link}}<a href="{{.}}">{{/link}}
                    {{#image}}
                        <a href="/user/profile.php?id={{teacherid}}">
                        <img src="{{.}}" class="card-img-teacher rounded-circle p-3">
                        </a>
                    {{/image}}
                    <div class="card-body">
                        <h1 class="card-title font-weight-bold">{{lastname}} {{firstname}}</h1>
                        {{#email}}
                        <div>
                            <a href="mailto:{{email}}" class="page-teacher-email btn btn-link">
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                                {{email}}
                            </a>
                        </div>
                        {{/email}}
                        {{#phones}}
                            <div>
                                <a href="tel:{{.}}" id="phone-teacher-{{teacherid}}" class="page-teacher-phone btn btn-link">
                                    <i class="fa fa-phone" aria-hidden="true"></i>
                                    {{.}}
                                </a>
                            </div>
                        {{/phones}}
                        {{^messagesdeactivated}}
                            {{#messagingispossible}}
                            <div>
                                <a id="message-user-button" role="button" data-conversationid="0"
                                data-userid="{{teacherid}}" class="btn btn-light"
                                href="{{wwwroot}}/message/index.php?id={{teacherid}}">
                                    <span>
                                        <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>
                                        <span class="header-button-title">{{#str}} messagebutton, mod_booking {{/str}}</span>
                                    </span>
                                </a>
                            </div>
                            {{/messagingispossible}}
                        {{/messagesdeactivated}}
                        <p>
                        <div class="container card-description">
                            <div class="row">
                                {{#canedit}}<div class="col-11">{{/canedit}}
                                {{^canedit}}<div class="col-12">{{/canedit}}
                                    {{{description}}}
                                    </div>
                                {{#canedit}}
                                    <div class="col-1 edit-teacher-description" data-teacherid="{{teacherid}}">
                                        <i class="fa fa-edit" aria-label="edit"></i>
                                    </div>
                                {{/canedit}}
                            </div>
                        </div>
                        {{#linktoperformedunitsreport}}
                        <a href="{{linktoperformedunitsreport}}" class="btn btn-light" target="_self">
                            <span>
                                <i class="fa fa-clock-o" aria-hidden="true"></i> {{#str}} hours {{/str}}
                            </span>
                        </a>
                        {{/linktoperformedunitsreport}}
                    </div>
                    <div class="card-footer">
                        <nav>
                        <ul class="nav nav-tabs" id="nav-tab" role="tablist">
                            {{#optiontables}}
                            <li class="nav-item">
                                <a class="nav-link {{class}}" id="nav-tab-{{tablename}}" data-toggle="tab" data-bs-toggle="tab"
                                    href="#nav-table-{{tablename}}" role="tab" aria-controls="nav-tab-{{tablename}}">
                                    {{bookinginstancename}}
                                </a>
                            </li>
                            {{/optiontables}}
                        </ul>
                        </nav>
                        <div class="tab-content" id="nav-tabContent">
                            {{#optiontables}}
                            <div class="tab-pane fade {{class}}" id="nav-table-{{tablename}}" role="tabpanel" aria-labelledby="nav-tab-{{tablename}}">{{{table}}}</div>
                            {{/optiontables}}
                        </div>
                    </div>
                {{#link}}</a>{{/link}}
            </div>
        </div>
    {{/teacher}}
</div>
{{/error}}

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