{{!
    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="card-deck">
    {{#teacher}}
        <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}}
                        {{^messagingispossible}}
                        <div style="display: inline-block;" data-toggle="tooltip" data-placement="right" title="{{#str}} messagingteacherimpossible, mod_booking {{/str}}">
                            <a id="message-user-button" role="button" class="btn btn-light disabled">
                                <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" 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>
    {{/teacher}}
</div>
{{/error}}

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