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

    This template will render the content for the body section of the group
    info 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="rui-message-header-margin">
    <div class="d-flex align-items-start">
        <div class="align-self-stretch" >
            <button class="ml-3 d-flex align-items-center btn-msg mr-3" data-route-back role="button">
            {{> core_message/message_drawer_icon_back }}
            </button>
        </div>
        <div class="rui-message-header-info d-inline-flex align-items-center text-decoration-none">
            {{#imageurl}}
            <img
                class="rounded mr-3 align-self-start"
                src="{{.}}"
                aria-hidden="true"
                alt="{{#str}} pictureof, moodle, {{name}} {{/str}}"
                title="{{#str}} pictureof, moodle, {{name}} {{/str}}"
                style="height: 40px; width: 40px"
            >
            {{/imageurl}}
            <div>
                <h4 class="rui-message-name mb-0">{{name}}</h4>
                {{#subname}}
                <div class="rui-message-user-status">
                    <span class="badge-sm badge-light">
                        <svg class="mr-2" width="17" height="17" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.25 5.75C19.25 5.19772 18.8023 4.75 18.25 4.75H14C12.8954 4.75 12 5.64543 12 6.75V19.25L12.8284 18.4216C13.5786 17.6714 14.596 17.25 15.6569 17.25H18.25C18.8023 17.25 19.25 16.8023 19.25 16.25V5.75Z"></path>
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.75 5.75C4.75 5.19772 5.19772 4.75 5.75 4.75H10C11.1046 4.75 12 5.64543 12 6.75V19.25L11.1716 18.4216C10.4214 17.6714 9.40401 17.25 8.34315 17.25H5.75C5.19772 17.25 4.75 16.8023 4.75 16.25V5.75Z"></path>
                        </svg>
                        {{.}}
                    </span>
                </div>
                {{/subname}}
            </div>
        </div>
    </div>
</div>
<h5 class="mx-3 mt-3">
    <svg class="mx-2" width="24" height="24" fill="none" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.78168 19.25H13.2183C13.7828 19.25 14.227 18.7817 14.1145 18.2285C13.804 16.7012 12.7897 14 9.5 14C6.21031 14 5.19605 16.7012 4.88549 18.2285C4.773 18.7817 5.21718 19.25 5.78168 19.25Z"></path>
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 14C17.8288 14 18.6802 16.1479 19.0239 17.696C19.2095 18.532 18.5333 19.25 17.6769 19.25H16.75"></path>
        <circle cx="9.5" cy="7.5" r="2.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.75 10.25C16.2688 10.25 17.25 9.01878 17.25 7.5C17.25 5.98122 16.2688 4.75 14.75 4.75"></path>
    </svg>
    <span>{{#str}} otherparticipants, core_message {{/str}}</span>
</h5>
<div class="pt-1 bg-white" data-region="members-list-container" style="overflow-y: auto">
    {{< core_message/message_drawer_lazy_load_list }}
        {{$rootattributes}}
            data-region="members-list"
        {{/rootattributes}}
        {{$emptymessage}}{{#str}} noparticipants, core_message {{/str}}{{/emptymessage}}
        {{$placeholder}}
            {{#placeholders}}
                {{> core_message/message_drawer_view_group_info_participants_list_item_placeholder }}
            {{/placeholders}}
        {{/placeholder}}
    {{/ core_message/message_drawer_lazy_load_list }}
</div>
