{{!
    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 card"
    data-region="{{$region}}{{/region}}"
>
    <div id="{{$region}}{{/region}}-toggle" class="card-header p-0" data-region="toggle">
        <button
            class="btn btn-msg w-100 text-left d-flex align-items-center overview-section-toggle border-0 {{^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="{{$title}}{{/title}} font-weight-bold text-uppercase">{{$title}}{{/title}}</span>

            <div class="ml-auto">
              <small class="hidden mx-1 badge badge-info font-weight-bold" 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-danger ml-auto"
              data-region="section-unread-count"
              {{#count.unread}}aria-label="{{#str}} unreadconversations, core_message, {{count.unread}} {{/str}}"{{/count.unread}}>
                  {{count.unread}}
              </span>
            </div>

        </button>
    </div>
    {{< core_message/message_drawer_lazy_load_list }}
        {{$rootclasses}}collapse {{#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>
