{{!
    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"
    data-region="{{$region}}{{/region}}"
>
    <div id="{{$region}}{{/region}}-toggle" class="card-header p-0" data-region="toggle">
        <button
            class="btn btn-link w-100 text-left p-2 d-flex 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">
                {{#pix}} t/collapsedcaret, core {{/pix}}
            </span>
            <span class="expanded-icon-container">
                {{#pix}} t/expanded, core {{/pix}}
            </span>
            <span class="font-weight-bold">{{$title}}{{/title}}</span>
            <small class="hidden ml-1" data-region="section-total-count-container"
            aria-label="{{#str}} totalconversations, core_message, {{count.total}} {{/str}}">
                (<span data-region="section-total-count">{{count.total}}</span>)
            </small>
            <span class="hidden ml-2" data-region="loading-icon-container">
                {{> core/loading }}
            </span>
            <span class="{{^count.unread}}hidden{{/count.unread}} badge badge-pill badge-primary ml-auto bg-primary"
            data-region="section-unread-count"
            {{#count.unread}}aria-label="{{#str}} unreadconversations, core_message, {{count.unread}} {{/str}}"{{/count.unread}}>
                {{count.unread}}
            </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>