{{!
    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 core_message/message_drawer_view_contacts_body

    This template will render the body content of the contacts page in the
    message drawer.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * All data attributes are required

    Context variables required for this template:
    * userid The logged in user id
    * urls The URLs for the popover

    Example context (json):
    {}

}}
<div class="hidden h-100" data-region="view-contacts" aria-hidden="true" data-user-id="{{loggedinuser.id}}">
    <div class="d-flex flex-column h-100">
        <div class="p-3 border-bottom">
            <ul class="nav nav-pills nav-fill" role="tablist">
                <li class="nav-item">
                    <a
                        id="contacts-tab-{{uniqid}}"
                        class="nav-link active"
                        href="#contacts-tab-panel-{{uniqid}}"
                        data-bs-toggle="tab"
                        data-action="show-contacts-section"
                        role="tab"
                        aria-controls="contacts-tab-panel-{{uniqid}}"
                        aria-selected="true"
                    >
                        {{#str}} contacts, core_message {{/str}}
                    </a>
                </li>
                <li class="nav-item">
                    <a
                        id="requests-tab-{{uniqid}}"
                        class="nav-link"
                        href="#requests-tab-panel-{{uniqid}}"
                        data-bs-toggle="tab"
                        data-action="show-requests-section"
                        role="tab"
                        aria-controls="requests-tab-panel-{{uniqid}}"
                        aria-selected="false"
                    >
                        {{#str}} requests {{/str}}
                        <span class="badge bg-primary text-white ms-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}"
                            data-region="contact-request-count"
                        >
                            <span aria-hidden="true">{{contactrequestcount}}</span>
                            <span class="visually-hidden">{{#str}} pendingcontactrequests, core_message, {{contactrequestcount}} {{/str}}</span>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content d-flex flex-column h-100">
            {{< core_message/message_drawer_view_contacts_body_section_contacts }}
                {{$rootclasses}}tab-pane fade show active h-100{{/rootclasses}}
                {{$rootattributes}}
                    id="contacts-tab-panel-{{uniqid}}"
                    data-section="contacts"
                    role="tabpanel"
                    aria-labelledby="contacts-tab-{{uniqid}}"
                {{/rootattributes}}
            {{/ core_message/message_drawer_view_contacts_body_section_contacts }}

            {{< core_message/message_drawer_view_contacts_body_section_requests }}
                {{$rootclasses}}tab-pane fade h-100{{/rootclasses}}
                {{$rootattributes}}
                    id="requests-tab-panel-{{uniqid}}"
                    data-section="requests"
                    role="tabpanel"
                    aria-labelledby="requests-tab-{{uniqid}}"
                {{/rootattributes}}
            {{/ core_message/message_drawer_view_contacts_body_section_requests }}
        </div>
    </div>
</div>
