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

    This template is a base template to render a collapsible "section" on the
    overview page of the message drawer, for example the messages section.

    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="section border-0 card rounded-0"
    data-region="{{$region}}{{/region}}"
>
    <div id="{{$region}}{{/region}}-toggle" class="card-header rounded-0" data-region="toggle">
        <button
            class="btn btn-link w-100 text-start p-1 p-sm-2 d-flex rounded-0 align-items-center overview-section-toggle {{^expanded}}collapsed{{/expanded}}"
            data-toggle="collapse"
            data-target="#{{$region}}{{/region}}-target-{{uniqid}}"
            aria-expanded="{{#expanded}}true{{/expanded}}{{^expanded}}false{{/expanded}}"
            aria-controls="{{$region}}{{/region}}-target-{{uniqid}}"
        >
            <span class="collapsed-icon-container">
                <span class="dir-rtl-hide">{{#pix}} t/collapsed, core {{/pix}}</span>
                <span class="dir-ltr-hide">{{#pix}} t/collapsed_rtl, core {{/pix}}</span>
            </span>
            <span class="expanded-icon-container">
                {{#pix}} t/expanded, core {{/pix}}
            </span>
            <span class="font-weight-bold ms-1">{{$title}}{{/title}}</span>
            <small
                class="hidden ms-1"
                data-region="section-total-count-container" aria-labelledby="{{$region}}{{/region}}-total-count-label"
            >
                (<span aria-hidden="true" data-region="section-total-count">{{count.total}}</span>)
                <span class="sr-only" id="{{$region}}{{/region}}-total-count-label">
                    {{#str}} totalconversations, core_message, {{count.total}} {{/str}}
                </span>
            </small>
            <span class="hidden ms-2" data-region="loading-icon-container">
                {{> core/loading }}
            </span>
            <span
                class="{{^count.unread}}hidden{{/count.unread}} badge rounded-pill bg-primary text-white ms-auto"
                data-region="section-unread-count-container" aria-labelledby="{{$region}}{{/region}}-unread-count-label"
            >
                <span aria-hidden="true" data-region="section-unread-count">{{count.unread}}</span>
                <span class="sr-only" id="{{$region}}{{/region}}-unread-count-label">
                    {{#str}} unreadconversations, core_message, {{count.unread}} {{/str}}
                </span>
            </span>
        </button>
    </div>
    {{< core_message/message_drawer_lazy_load_list }}
        {{$rootclasses}}collapse border-bottom {{#expanded}}show{{/expanded}}{{/rootclasses}}
        {{$rootattributes}}
            id="{{$region}}{{/region}}-target-{{uniqid}}"
            aria-labelledby="{{$region}}{{/region}}-toggle"
            data-parent="#message-drawer-view-overview-container-{{uniqid}}"
        {{/rootattributes}}
    {{/ core_message/message_drawer_lazy_load_list }}
</div>