first commit

message/templates/add_contact_button.mustache

@@ -0,0 +1,39 @@
+{{!
+    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/add_contact_button
+
+    Template for the contents of the add contact button on the user's profile page.
+
+    Context variables required for this template:
+    * displaytextlabel - Whether to display text next to the action icon.
+
+    Example context (json):
+    {
+        "displaytextlabel": true
+    }
+}}
+<span>
+    {{^displaytextlabel}}
+        {{#pix}} t/addcontact, core, {{#str}} addtoyourcontacts, message {{/str}} {{/pix}}
+    {{/displaytextlabel}}
+    {{#displaytextlabel}}
+        {{#pix}} t/addcontact, core {{/pix}}
+        <span class="header-button-title">{{#str}} addtoyourcontacts, message {{/str}}</span>
+    {{/displaytextlabel}}
+</span>
+{{> core/loading }}

message/templates/contact_request_sent.mustache

@@ -0,0 +1,33 @@
+{{!
+    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/contact_request_sent
+    Template for the contents of the add contact button on the user's profile page.
+    Context variables required for this template:
+    * displaytextlabel - Whether to display text next to the action icon.
+    Example context (json):
+    {
+        "displaytextlabel": true
+    }
+}}
+<span>
+    {{^displaytextlabel}}
+        {{#pix}} t/addcontact, core, {{#str}} contactrequestsent, message {{/str}} {{/pix}}
+    {{/displaytextlabel}}
+    {{#displaytextlabel}}
+        {{#pix}} t/addcontact, core {{/pix}}
+        <span class="header-button-title">{{#str}} contactrequestsent, message {{/str}}</span>
+    {{/displaytextlabel}}
+</span>
+{{> core/loading }}

message/templates/default_notification_preferences.mustache

@@ -0,0 +1,150 @@
+{{!
+    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/default_notification_preferences
+
+    This template will render the default notification preferences for admin settings.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * providers Message providers
+    * components Provider components
+    * processors Message processors
+    * preferences Saved preferences
+
+    Example context (json):
+    {
+        "processors": [
+            {
+                "displayname": "Web",
+                "name": "popup"
+            }
+        ],
+        "components": [
+            {
+                "displayname": "Assignment",
+                "name": "mod_assign",
+                "colspan": 3,
+                "providers": [
+                    {
+                        "name": "assign_notification",
+                        "component": "mod_assign",
+                        "displayname": "Assignment notifications",
+                        "enabledsetting": "mod_assign_assign_notification_disable",
+                        "enabledlabel": "Sending Assignment enabled status",
+                        "enabled": 1,
+                        "settings": [
+                            {
+                                "lockedsetting": "mod_assign_assign_notification_locked[popup]",
+                                "locked": 1,
+                                "lockedlabel": "Sending Assignment via Web locked status",
+                                "enabledsetting": "mod_assign_assign_notification_enabled[popup]",
+                                "enabled": 1,
+                                "enabledlabel": "Sending Assignment via Web enabled status"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}}
+<div class="preferences-page-container">
+    <h2>{{#str}} managemessageoutputs, message {{/str}}</h2>
+
+    <div class="preferences-container">
+        <table class="table table-hover preference-table">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>{{#str}} enabled, core_message {{/str}}</th>
+                    {{#processors}}
+                        <th data-processor-name="{{name}}">{{{displayname}}}</th>
+                    {{/processors}}
+                </tr>
+            </thead>
+            <tbody>
+                {{#components}}
+                    <tr class="preference-row"><th colspan="{{{colspan}}}">{{{displayname}}}</th></tr>
+                    {{#providers}}
+                        <tr class="defaultmessageoutputs">
+                            <td>{{{displayname}}}</td>
+                            <td>
+                                <div data-preference="{{{enabledsetting}}}">
+                                    <div class="custom-control custom-switch">
+                                        <input type="checkbox"
+                                            id="{{{enabledsetting}}}"
+                                            name="{{{enabledsetting}}}"
+                                            class="custom-control-input provider_enabled"
+                                            {{#enabled}}checked{{/enabled}}
+                                        >
+                                        <label for="{{{enabledsetting}}}" class="custom-control-label"
+                                            title="{{enabledlabel}}">
+                                            <span class="accesshide">{{enabledlabel}}</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </td>
+                            {{#settings}}
+                                <td class="text-left">
+                                    <div data-preference="{{{enabledsetting}}}">
+                                        <div class="custom-control custom-switch {{#locked}} dimmed_text{{/locked}} pb-1">
+                                            <input type="checkbox"
+                                                id="{{{enabledsetting}}}"
+                                                name="{{{enabledsetting}}}"
+                                                class="custom-control-input enabled_message_setting"
+                                                {{#enabled}}checked{{/enabled}}
+                                            >
+                                            <label for="{{{enabledsetting}}}" class="custom-control-label"
+                                                title="{{enabledlabel}}">
+                                                {{#str}} enabled, core_message {{/str}}
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div data-preference="{{{lockedsetting}}}">
+                                        <div class="custom-control custom-switch pt-1">
+                                            <input type="checkbox"
+                                                id="{{{lockedsetting}}}"
+                                                name="{{{lockedsetting}}}"
+                                                class="custom-control-input locked_message_setting"
+                                                {{#locked}}checked{{/locked}}
+                                            >
+                                            <label for="{{{lockedsetting}}}" class="custom-control-label"
+                                                title="{{lockedlabel}}">
+                                                {{#str}} forced, core_message {{/str}}
+                                            </label>
+                                        </div>
+                                    </div>
+                                </td>
+                            {{/settings}}
+                        </tr>
+                    {{/providers}}
+                {{/components}}
+            </tbody>
+        </table>
+    </div>
+</div>
+{{#js}}
+require(['core_message/default_notification_preferences'], function(NotificationPreferences) {
+        NotificationPreferences.init();
+    });
+{{/js}}

message/templates/message_drawer.mustache

@@ -0,0 +1,76 @@
+{{!
+    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
+
+    This template will render 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):
+    {}
+
+}}
+{{< core/drawer}}
+    {{$drawercontent}}
+        <div id="message-drawer-{{uniqid}}" class="message-app" data-region="message-drawer" role="region">
+            <h2 class="sr-only">{{#str}} messagingcategory,admin {{/str}}</h2>
+            <div class="closewidget text-right pr-2">
+                <a class="text-dark btn-link" data-action="closedrawer" href="#"
+                   title="{{#cleanstr}} closebuttontitle {{/cleanstr}}" aria-label="{{#cleanstr}} closebuttontitle {{/cleanstr}}"
+                >
+                    {{#pix}} i/window_close, core {{/pix}}
+                </a>
+            </div>
+            <div class="header-container position-relative" data-region="header-container">
+                {{> core_message/message_drawer_view_contacts_header }}
+                {{> core_message/message_drawer_view_conversation_header }}
+                {{> core_message/message_drawer_view_overview_header }}
+                {{> core_message/message_drawer_view_search_header }}
+                {{> core_message/message_drawer_view_settings_header }}
+            </div>
+            <div class="body-container position-relative" data-region="body-container">
+                {{> core_message/message_drawer_view_contact_body }}
+                {{> core_message/message_drawer_view_contacts_body }}
+                {{> core_message/message_drawer_view_conversation_body }}
+                {{> core_message/message_drawer_view_group_info_body }}
+                {{> core_message/message_drawer_view_overview_body }}
+                {{> core_message/message_drawer_view_search_body }}
+                {{> core_message/message_drawer_view_settings_body }}
+            </div>
+            <div class="footer-container position-relative" data-region="footer-container">
+                {{> core_message/message_drawer_view_conversation_footer }}
+                {{> core_message/message_drawer_view_overview_footer }}
+            </div>
+        </div>
+    {{/drawercontent}}
+{{/core/drawer}}
+
+{{#js}}
+require(['jquery', 'core_message/message_drawer'], function($, MessageDrawer) {
+    var root = $('#message-drawer-{{uniqid}}');
+    MessageDrawer.init(root, '{{uniqid}}', false);
+});
+{{/js}}

message/templates/message_drawer_contacts_list.mustache

@@ -0,0 +1,80 @@
+{{!
+    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_contacts_list
+
+    This template will render a list of contacts for 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):
+    {}
+
+}}
+
+{{#contacts}}
+    <a
+        href="#"
+        class="p-2 d-flex list-group-item list-group-item-action"
+        data-route="view-conversation"
+        {{#conversationid}}
+            data-route-param-1="{{.}}"
+            {{#frompanel}}
+                data-route-param-2="frompanel"
+            {{/frompanel}}
+        {{/conversationid}}
+        {{^conversationid}}
+            data-route-param-1="false"
+            data-route-param-2="create"
+            data-route-param-3="{{id}}"
+            {{#frompanel}}
+                data-route-param-4="frompanel"
+            {{/frompanel}}
+        {{/conversationid}}
+        data-contact-user-id="{{id}}"
+        data-region="contact"
+        role="button"
+    >
+        <img
+            class="rounded-circle"
+            src="{{{profileimageurl}}}"
+            alt="{{fullname}}"
+            aria-hidden="true"
+            style="height: 38px"
+        >
+        {{#showonlinestatus}}
+            <span class="contact-status icon-size-2 {{#isonline}}online{{/isonline}}">
+                {{#isonline}} {{#pix}} t/online, core, {{#str}} online, core_message {{/str}} {{/pix}} {{/isonline}}
+            </span>
+        {{/showonlinestatus}}
+        <h6 class="ml-2 font-weight-bold">{{#highlight}}{{{highlight}}}{{/highlight}}{{^highlight}}{{fullname}}{{/highlight}}</h6>
+        <div
+            class="ml-auto align-self-end {{^isblocked}}hidden{{/isblocked}}"
+            data-region="block-icon-container"
+        >
+            {{#pix}} t/block, core, {{#str}} contactblocked, message {{/str}} {{/pix}}
+        </div>
+    </a>
+{{/contacts}}

message/templates/message_drawer_contacts_list_item_placeholder.mustache

@@ -0,0 +1,48 @@
+{{!
+    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_contacts_list_item_placeholder
+
+    This template will render a placeholder loading item for a contact 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="p-2 d-flex list-group-item border-0" data-region="placeholder">
+    <div
+        class="rounded-circle bg-pulse-grey"
+        style="height: 38px; width: 38px"
+    >
+    </div>
+    <div
+        class="ml-2 bg-pulse-grey w-50"
+        style="height: 20px;"
+    >
+    </div>
+</div>

message/templates/message_drawer_conversations_list.mustache

@@ -0,0 +1,116 @@
+{{!
+    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_conversations_list
+
+    This template will render a list of conversations for 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):
+    {}
+
+}}
+
+{{#conversations}}
+    <a
+        href="#"
+        class="py-0 px-2 d-flex list-group-item list-group-item-action align-items-center"
+        data-conversation-id="{{id}}"
+        {{#userid}}
+            data-user-id="{{.}}"
+        {{/userid}}
+        role="button"
+    >
+        {{#imageurl}}
+            <img
+                class="rounded-circle align-self-start mt-2"
+                src="{{{.}}}"
+                alt="{{name}}"
+                aria-hidden="true"
+                style="height: 38px"
+            >
+        {{/imageurl}}
+        {{#showonlinestatus}}
+            <span class="contact-status icon-size-2 {{#isonline}}online{{/isonline}}">
+                {{#isonline}} {{#pix}} t/online, core, {{#str}} online, core_message {{/str}} {{/pix}} {{/isonline}}
+            </span>
+        {{/showonlinestatus}}
+        <div class="w-100 text-truncate ml-2 my-2">
+            <div class="d-flex">
+                <strong class="m-0 text-truncate">{{name}}</strong>
+                <span class="{{^isblocked}}hidden{{/isblocked}}" data-region="contact-icon-blocked">
+                    {{#pix}} t/block, core, {{#str}} contactblocked, message {{/str}} {{/pix}}
+                </span>
+                <span class="{{^ismuted}}hidden{{/ismuted}}" data-region="muted-icon-container">
+                    {{#pix}} i/muted, core {{/pix}}
+                </span>
+            </div>
+            {{#subname}}
+                <p class="m-0 text-truncate">{{.}}</p>
+            {{/subname}}
+            <p class="m-0 font-weight-light text-truncate last-message" data-region="last-message">
+                {{#sentfromcurrentuser}}
+                    {{#str}} you, core_message {{/str}}
+                {{/sentfromcurrentuser}}
+                {{^sentfromcurrentuser}}
+                    {{#lastsendername}}
+                        {{#str}} sender, core_message, {{.}} {{/str}}
+                    {{/lastsendername}}
+                {{/sentfromcurrentuser}}
+                <span>{{{lastmessage}}}</span>
+            </p>
+        </div>
+        <div class="d-flex align-self-stretch">
+            <div
+                class="px-2 py-1 small position-absolute position-right {{^lastmessagedate}}hidden{{/lastmessagedate}}"
+                data-region="last-message-date" aria-hidden="true"
+            >
+                {{#lastmessagedate}}
+                    {{#istoday}}
+                        {{#userdate}} {{.}}, {{#str}} strftimetime24, core_langconfig  {{/str}} {{/userdate}}
+                    {{/istoday}}
+                    {{^istoday}}
+                        {{#userdate}} {{.}}, {{#str}} strftimedatefullshort, core_langconfig  {{/str}} {{/userdate}}
+                    {{/istoday}}
+
+                {{/lastmessagedate}}
+            </div>
+            <div class="d-flex align-self-center align-items-center">
+                <span
+                    class="badge rounded-pill bg-primary text-white {{^unreadcount}}hidden{{/unreadcount}}"
+                    data-region="unread-count"
+                >
+                    <span aria-hidden="true">{{unreadcount}}</span>
+                    <span class="sr-only">{{#str}} unreadmessages, core_message, {{unreadcount}} {{/str}}</span>
+                </span>
+
+                <div class="text-muted ml-auto">
+                    {{> core_message/message_drawer_icon_forward }}
+                </div>
+            </div>
+        </div>
+    </a>
+{{/conversations}}

message/templates/message_drawer_conversations_list_items_placeholder.mustache

@@ -0,0 +1,67 @@
+{{!
+    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_conversations_list_items_placeholder
+
+    This template will render a placeholder loading element for a message 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):
+    {}
+
+}}
+{{#placeholders}}
+    <div class="p-2 d-flex list-group-item border-0" data-region="placeholder">
+        <div
+            class="rounded-circle bg-pulse-grey"
+            style="height: 38px; width: 38px"
+        >
+        </div>
+        <div class="ml-2 align-self-center" style="flex: 1">
+            <div
+                class="bg-pulse-grey w-50"
+                style="height: 15px;"
+            >
+            </div>
+            <div
+                class="bg-pulse-grey mt-1"
+                style="height: 15px; width: 90%"
+            >
+            </div>
+        </div>
+        <div
+            class="bg-pulse-grey align-self-center"
+            style="height: 15px; width: 15px"
+        >
+        </div>
+        <div
+            class="ml-2 bg-pulse-grey align-self-center"
+            style="height: 15px; width: 15px"
+        >
+        </div>
+    </div>
+{{/placeholders}}

message/templates/message_drawer_icon_back.mustache

@@ -0,0 +1,42 @@
+{{!
+    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_icon_back
+
+    This template will render the back icon for 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="icon-back-in-drawer">
+    <span class="dir-rtl-hide">{{#pix}} i/previous, core {{/pix}}</span>
+    <span class="dir-ltr-hide">{{#pix}} i/next, core {{/pix}}</span>
+</div>
+<div class="icon-back-in-app">
+    <span class="dir-rtl-hide">{{#pix}} e/cancel, core {{/pix}}</span>
+</div>

message/templates/message_drawer_icon_forward.mustache

@@ -0,0 +1,37 @@
+{{!
+    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_icon_forward
+
+    This template will render the forward icon for 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):
+    {}
+
+}}
+<span class="dir-rtl-hide">{{#pix}} i/next, core {{/pix}}</span>
+<span class="dir-ltr-hide">{{#pix}} i/previous, core {{/pix}}</span>

message/templates/message_drawer_lazy_load_list.mustache

@@ -0,0 +1,56 @@
+{{!
+    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_lazy_load_list
+
+    This template will render a lazy loaded list for 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="{{$rootclasses}}{{/rootclasses}} lazy-load-list"
+    aria-live="polite"
+    data-region="lazy-load-list"
+    data-user-id="{{loggedinuser.id}}"
+    {{$rootattributes}}{{/rootattributes}}
+>
+    {{$notification}}{{/notification}}
+    <div class="hidden text-center p-2" data-region="empty-message-container">
+        {{$emptymessage}}{{/emptymessage}}
+    </div>
+    <div class="hidden list-group" data-region="content-container">
+        {{$content}}{{/content}}
+    </div>
+    <div class="list-group" data-region="placeholder-container">
+        {{$placeholder}}{{/placeholder}}
+    </div>
+    <div class="w-100 text-center p-3 hidden" data-region="loading-icon-container" >
+        {{> core/loading }}
+    </div>
+</div>

message/templates/message_drawer_messages_list.mustache

@@ -0,0 +1,106 @@
+{{!
+    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_messages_list
+
+    This template will render a list of messages for 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):
+    {}
+
+}}
+
+{{#messages}}
+    <a
+        href="#"
+        class="p-2 d-flex list-group-item list-group-item-action align-items-center"
+        data-route="view-conversation"
+        {{#conversationid}}
+            data-route-param-1="{{.}}"
+            {{#frompanel}}
+                data-route-param-2="frompanel"
+            {{/frompanel}}
+        {{/conversationid}}
+        {{^conversationid}}
+            data-route-param-1="false"
+            data-route-param-2="create"
+            data-route-param-3="{{userid}}"
+            {{#frompanel}}
+                data-route-param-4="frompanel"
+            {{/frompanel}}
+        {{/conversationid}}
+        data-conversation-id="{{conversationid}}"
+        role="button"
+    >
+        <img
+            class="rounded-circle"
+            src="{{{profileimageurl}}}"
+            alt="{{fullname}}"
+            aria-hidden="true"
+            style="height: 38px"
+        >
+        {{#showonlinestatus}}
+            <span class="contact-status icon-size-2 {{#isonline}}online{{/isonline}}">
+                {{#isonline}} {{#pix}} t/online, core, {{#str}} online, core_message {{/str}} {{/pix}} {{/isonline}}
+            </span>
+        {{/showonlinestatus}}
+        <div class="w-100 text-truncate ml-2">
+            <div class="d-flex">
+                <strong class="m-0">
+                    {{fullname}}
+
+                    <span class="{{^isblocked}}hidden{{/isblocked}}" data-region="contact-icon-blocked">
+                        {{#pix}} t/block, core, {{#str}} contactblocked, message {{/str}} {{/pix}}
+                    </span>
+                </strong>
+                <div
+                    class="ml-auto small {{^lastmessagedate}}hidden{{/lastmessagedate}}"
+                    data-region="last-message-date"
+                >
+                    {{#lastmessagedate}}
+                        {{#userdate}} {{.}}, {{#str}} strftimedatefullshort, core_langconfig  {{/str}} {{/userdate}}
+                    {{/lastmessagedate}}
+                </div>
+            </div>
+            <p class="m-0 font-weight-light text-truncate" data-region="last-message">
+                {{#sentfromcurrentuser}}{{#str}} you, core_message {{/str}}{{/sentfromcurrentuser}}
+                <span>{{{lastmessage}}}</span>
+            </p>
+        </div>
+
+        <span
+            class="badge rounded-pill bg-primary text-white {{^unreadcount}}hidden{{/unreadcount}}"
+            data-region="unread-count"
+        >
+            {{unreadcount}}
+        </span>
+
+        <div>
+            {{> core_message/message_drawer_icon_forward }}
+        </div>
+    </a>
+{{/messages}}

message/templates/message_drawer_messages_list_item_placeholder.mustache

@@ -0,0 +1,65 @@
+{{!
+    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_messages_list_item_placeholder
+
+    This template will render a placeholder loading element for a message 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="p-2 d-flex list-group-item border-0" data-region="placeholder">
+    <div
+        class="rounded-circle bg-pulse-grey"
+        style="height: 38px; width: 38px"
+    >
+    </div>
+    <div class="ml-2 align-self-center" style="flex: 1">
+        <div
+            class="bg-pulse-grey w-50"
+            style="height: 15px;"
+        >
+        </div>
+        <div
+            class="bg-pulse-grey mt-1"
+            style="height: 15px; width: 90%"
+        >
+        </div>
+    </div>
+    <div
+        class="bg-pulse-grey align-self-center"
+        style="height: 15px; width: 15px"
+    >
+    </div>
+    <div
+        class="ml-2 bg-pulse-grey align-self-center"
+        style="height: 15px; width: 15px"
+    >
+    </div>
+</div>

message/templates/message_drawer_non_contacts_list.mustache

@@ -0,0 +1,72 @@
+{{!
+    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_non_contacts_list
+
+    This template will render a list of non contacts for 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):
+    {}
+
+}}
+
+{{#noncontacts}}
+    <a
+        href="#"
+        class="p-2 d-flex list-group-item list-group-item-action"
+        data-route="view-conversation"
+        {{#conversationid}}
+            data-route-param-1="{{.}}"
+            {{#frompanel}}
+                data-route-param-2="frompanel"
+            {{/frompanel}}
+        {{/conversationid}}
+        {{^conversationid}}
+            data-route-param-1="false"
+            data-route-param-2="create"
+            data-route-param-3="{{id}}"
+            {{#frompanel}}
+                data-route-param-4="frompanel"
+            {{/frompanel}}
+        {{/conversationid}}
+        role="button"
+    >
+        <img
+            class="rounded-circle"
+            src="{{{profileimageurl}}}"
+            alt="{{fullname}}"
+            aria-hidden="true"
+            style="height: 38px"
+        >
+        <h6 class="ml-2 font-weight-bold">{{#highlight}}{{{highlight}}}{{/highlight}}{{^highlight}}{{fullname}}{{/highlight}}</h6>
+        {{#isblocked}}
+            <div class="ml-auto align-self-end">
+                {{#pix}} t/block, core, {{#str}} contactblocked, message {{/str}} {{/pix}}
+            </div>
+        {{/isblocked}}
+    </a>
+{{/noncontacts}}

message/templates/message_drawer_view_contact_body.mustache

@@ -0,0 +1,44 @@
+{{!
+    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_contact_body
+
+    This template will render the body section of the contact 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"
+    data-region="view-contact"
+    aria-hidden="true"
+>
+    <div class="p-2 pt-3" data-region="content-container"></div>
+</div>

message/templates/message_drawer_view_contact_body_content.mustache

@@ -0,0 +1,96 @@
+{{!
+    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_contact_body_content
+
+    This template will render the content for the body section of the contact
+    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):
+    {}
+
+}}
+
+<a class="align-self-center" href="#" data-route-back role="button">
+    {{> core_message/message_drawer_icon_back }}
+</a>
+<div class="px-3 pb-3">
+    <div class="text-center">
+        <a href="{{{profileurl}}}">
+            <img
+                class="rounded-circle"
+                src="{{profileimageurl}}"
+                alt="{{#str}} pictureof, moodle, {{fullname}} {{/str}}"
+                title="{{#str}} pictureof, moodle, {{fullname}} {{/str}}"
+                style="height: 100px; width: 100px"
+            >
+        </a>
+    </div>
+    <h2 class="mt-2 text-center text-truncate">{{fullname}}</h2>
+    <div class="px-4 mt-4">
+        <button
+            type="button"
+            class="btn btn-primary btn-block {{^isblocked}}hidden{{/isblocked}}"
+            data-route="view-conversation"
+            data-route-param-1=""
+            data-route-param-2="unblock"
+            data-route-param-3="{{id}}"
+        >
+            {{#str}}unblockuser, message{{/str}}
+        </button>
+        <button
+            type="button"
+            class="btn btn-danger btn-block {{#isblocked}}hidden{{/isblocked}}"
+            data-route="view-conversation"
+            data-route-param-1=""
+            data-route-param-2="block"
+            data-route-param-3="{{id}}"
+        >
+            {{#str}}blockuser, message{{/str}}
+        </button>
+        <button
+            type="button"
+            class="btn btn-danger btn-block {{^iscontact}}hidden{{/iscontact}}"
+            data-route="view-conversation"
+            data-route-param-1=""
+            data-route-param-2="remove-contact"
+            data-route-param-3="{{id}}"
+        >
+            {{#str}}removefromyourcontacts, message{{/str}}
+        </button>
+        <button
+            type="button"
+            class="btn btn-primary btn-block {{#iscontact}}hidden{{/iscontact}}"
+            data-route="view-conversation"
+            data-route-param-1=""
+            data-route-param-2="add-contact"
+            data-route-param-3="{{id}}"
+        >
+            {{#str}}addtoyourcontacts, message{{/str}}
+        </button>
+    </div>
+</div>

message/templates/message_drawer_view_contacts_body.mustache

@@ -0,0 +1,99 @@
+{{!
+    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-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-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 ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}"
+                            data-region="contact-request-count"
+                        >
+                            <span aria-hidden="true">{{contactrequestcount}}</span>
+                            <span class="sr-only">{{#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>

message/templates/message_drawer_view_contacts_body_section_contacts.mustache

@@ -0,0 +1,48 @@
+{{!
+    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_section_contacts
+
+    This template will render the contacts section of the body 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):
+    {}
+
+}}
+{{< core_message/message_drawer_lazy_load_list }}
+    {{$emptymessage}}{{#str}} nocontactsgetstarted, core_message {{/str}}{{/emptymessage}}
+    {{$placeholder}}
+        {{#contacts}}
+            {{#sectioncontacts}}
+                {{#placeholders}}
+                    {{> core_message/message_drawer_contacts_list_item_placeholder }}
+                {{/placeholders}}
+            {{/sectioncontacts}}
+        {{/contacts}}
+    {{/placeholder}}
+{{/ core_message/message_drawer_lazy_load_list }}

message/templates/message_drawer_view_contacts_body_section_requests.mustache

@@ -0,0 +1,48 @@
+{{!
+    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_section_requests
+
+    This template will render the the requests section of the body 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):
+    {}
+
+}}
+{{< core_message/message_drawer_lazy_load_list }}
+    {{$emptymessage}}{{#str}} nocontactrequests, core_message {{/str}}{{/emptymessage}}
+    {{$placeholder}}
+        {{#contacts}}
+            {{#sectionrequests}}
+                {{#placeholders}}
+                    {{> core_message/message_drawer_contacts_list_item_placeholder }}
+                {{/placeholders}}
+            {{/sectionrequests}}
+        {{/contacts}}
+    {{/placeholder}}
+{{/ core_message/message_drawer_lazy_load_list }}

message/templates/message_drawer_view_contacts_body_section_requests_list.mustache

@@ -0,0 +1,72 @@
+{{!
+    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_section_requests_list
+
+    This template will render a list of contacts for 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):
+    {}
+
+}}
+
+{{#requests}}
+    <a
+        href="#"
+        class="p-2 d-flex list-group-item list-group-item-action border-0 align-items-center"
+        data-route="view-conversation"
+        {{#conversationid}}
+            data-route-param-1="{{.}}"
+        {{/conversationid}}
+        {{^conversationid}}
+            data-route-param-1="false"
+            data-route-param-2="create"
+            data-route-param-3="{{id}}"
+        {{/conversationid}}
+        data-request-id="{{id}}"
+        data-region="contact-request"
+        role="button"
+    >
+        <img
+            class="rounded-circle"
+            src="{{{profileimageurl}}}"
+            alt="{{fullname}}"
+            aria-hidden="true"
+            style="height: 38px"
+        >
+        <div class="w-100 text-truncate ml-2">
+            <div class="d-flex">
+                <strong class="m-0">
+                    {{fullname}}
+                </strong>
+            </div>
+            <p class="m-0 font-weight-light text-truncate">
+                {{#str}} wouldliketocontactyou, core_message {{/str}}
+            </p>
+        </div>
+    </a>
+{{/requests}}

message/templates/message_drawer_view_contacts_header.mustache

@@ -0,0 +1,55 @@
+{{!
+    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_header
+
+    This template will render the header for the contacts page of
+    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 border-bottom p-1 px-sm-2" aria-hidden="true" data-region="view-contacts">
+    <div class="d-flex align-items-center">
+        {{#isdrawer}}
+        <div class="align-self-stretch">
+            <a class="h-100 d-flex align-items-center mr-2" href="#" data-route-back role="button">
+                {{> core_message/message_drawer_icon_back }}
+            </a>
+        </div>
+        {{/isdrawer}}
+        <div>
+            {{#str}} contacts, core_message {{/str}}
+        </div>
+        <div class="ml-auto">
+            <a href="#" data-route="view-search" role="button" aria-label="{{#str}} search, core_search {{/str}}">
+                {{#pix}} a/search, core {{/pix}}
+            </a>
+        </div>
+    </div>
+</div>

message/templates/message_drawer_view_conversation_body.mustache

@@ -0,0 +1,67 @@
+{{!
+    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_conversation_body
+
+    This template will render the body container for the conversation 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:
+    *
+
+    Example context (json):
+    {}
+
+}}
+
+<div
+    class="view-conversation hidden h-100"
+    aria-hidden="true"
+    data-region="view-conversation"
+    data-user-id="{{loggedinuser.id}}"
+    data-midnight="{{loggedinuser.midnight}}"
+    data-message-poll-min="{{messagepollmin}}"
+    data-message-poll-max="{{messagepollmax}}"
+    data-message-poll-after-max="{{messagepollaftermax}}"
+    style="overflow-y: auto; overflow-x: hidden"
+>
+    <div class="position-relative h-100" data-region="content-container" style="overflow-y: auto; overflow-x: hidden">
+        <div class="content-message-container hidden h-100 px-2 pt-0" data-region="content-message-container" role="log" style="overflow-y: auto; overflow-x: hidden">
+            <div class="py-3 sticky-top z-index-1 border-bottom text-center hidden" data-region="contact-request-sent-message-container">
+                <p class="m-0">{{#str}} contactrequestsent, core_message {{/str}}</p>
+                <p class="font-italic font-weight-light" data-region="text"></p>
+            </div>
+            <div class="p-3 text-center hidden" data-region="self-conversation-message-container">
+                <p class="m-0">{{#str}} selfconversation, core_message {{/str}}</p>
+                <p class="font-italic font-weight-light" data-region="text">{{#str}} selfconversationdefaultmessage, core_message {{/str}}</p>
+           </div>
+            <div class="hidden text-center p-3" data-region="more-messages-loading-icon-container">{{> core/loading }}</div>
+        </div>
+        <div class="p-4 w-100 h-100 hidden position-absolute z-index-1" data-region="confirm-dialogue-container" style="top: 0; background: rgba(0,0,0,0.3);">
+            {{> core_message/message_drawer_view_conversation_body_confirm_dialogue }}
+        </div>
+        <div class="px-2 pb-2 pt-0" data-region="content-placeholder">
+            {{> core_message/message_drawer_view_conversation_body_placeholder }}
+        </div>
+    </div>
+</div>

message/templates/message_drawer_view_conversation_body_confirm_dialogue.mustache

@@ -0,0 +1,84 @@
+{{!
+    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_conversation_body_confirm_dialogue
+
+    This template will render the confirmation dialogue inside the conversation page of
+    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="p-3 bg-white" data-region="confirm-dialogue" role="alert">
+    <p class="text-muted" data-region="dialogue-text"></p>
+    <div class="mb-2 custom-control custom-checkbox hidden" data-region="delete-messages-for-all-users-toggle-container">
+        <input type="checkbox" class="custom-control-input" id="delete-messages-for-all-users" data-region="delete-messages-for-all-users-toggle">
+        <label class="custom-control-label text-muted" for="delete-messages-for-all-users">
+            {{#cleanstr}} deleteforeveryone, core_message {{/cleanstr}}
+        </label>
+    </div>
+    <button type="button" class="btn btn-primary btn-block hidden" data-action="confirm-block">
+        <span data-region="dialogue-button-text">{{#cleanstr}} blockuserconfirmbutton, core_message {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-primary btn-block hidden" data-action="confirm-unblock">
+        <span data-region="dialogue-button-text">{{#cleanstr}} unblock, core_message {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-primary btn-block hidden" data-action="confirm-remove-contact">
+        <span data-region="dialogue-button-text">{{#cleanstr}} remove, core {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-primary btn-block hidden" data-action="confirm-add-contact">
+        <span data-region="dialogue-button-text">{{#cleanstr}} add, core {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-primary btn-block hidden" data-action="confirm-delete-selected-messages">
+        <span data-region="dialogue-button-text">{{#cleanstr}} delete, core {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-primary btn-block hidden" data-action="confirm-delete-conversation">
+        <span data-region="dialogue-button-text">{{#cleanstr}} delete, core {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-primary btn-block hidden" data-action="request-add-contact">
+        <span data-region="dialogue-button-text">{{#cleanstr}} sendcontactrequest, core_message {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-primary btn-block hidden" data-action="accept-contact-request">
+        <span data-region="dialogue-button-text">{{#cleanstr}} acceptandaddcontact, core_message {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-secondary btn-block hidden" data-action="decline-contact-request">
+        <span data-region="dialogue-button-text">{{#cleanstr}} decline, core_message {{/cleanstr}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+    <button type="button" class="btn btn-primary btn-block" data-action="okay-confirm">{{#cleanstr}} ok, core {{/cleanstr}}</button>
+    <button type="button" class="btn btn-secondary btn-block" data-action="cancel-confirm">{{#cleanstr}} cancel, core {{/cleanstr}}</button>
+</div>

message/templates/message_drawer_view_conversation_body_day.mustache

@@ -0,0 +1,51 @@
+{{!
+    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_conversation_body_day
+
+    This template will render a day's worth of messages in the body of the
+    conversation 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:
+    * timestamp
+    * currentyear
+    * messages
+
+    Example context (json):
+    {
+        "timestamp": 946684800,
+        "currentyear": false,
+        "messages": []
+    }
+}}
+<div class="mt-4" data-region="day-container" data-day-id="{{timestamp}}">
+    <h6 class="text-center mb-4 day">
+        {{#currentyear}}
+            {{#userdate}} {{timestamp}}, {{#str}} strftimedateshort, core_langconfig {{/str}} {{/userdate}}
+        {{/currentyear}}
+        {{^currentyear}}
+            {{#userdate}} {{timestamp}}, {{#str}} strftimedate, core_langconfig {{/str}} {{/userdate}}
+        {{/currentyear}}
+    </h6>
+    {{> core_message/message_drawer_view_conversation_body_messages }}
+</div>

message/templates/message_drawer_view_conversation_body_day_placeholder.mustache

@@ -0,0 +1,83 @@
+{{!
+    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_conversation_body_day_placeholder
+
+    This template will render the loading placeholder elements for a day of messages
+    in the conversation page of 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="mt-4">
+    <div class="mb-4">
+        <div class="mx-auto bg-white" style="height: 25px; width: 100px"></div>
+    </div>
+    <div class="d-flex flex-column p-2 bg-white rounded mb-2">
+        <div class="d-flex align-items-center mb-2">
+            <div class="mr-2">
+                <div class="rounded-circle bg-pulse-grey" style="height: 35px; width: 35px"></div>
+            </div>
+            <div class="mr-4 w-75 bg-pulse-grey" style="height: 16px"></div>
+            <div class="ml-auto bg-pulse-grey" style="width: 35px; height: 16px"></div>
+        </div>
+        <div class="bg-pulse-grey w-100" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-75 mt-2" style="height: 16px"></div>
+    </div>
+    <div class="d-flex flex-column p-2 bg-white rounded mb-2">
+        <div class="d-flex align-items-center mb-2">
+            <div class="mr-2">
+                <div class="rounded-circle bg-pulse-grey" style="height: 35px; width: 35px"></div>
+            </div>
+            <div class="mr-4 w-75 bg-pulse-grey" style="height: 16px"></div>
+            <div class="ml-auto bg-pulse-grey" style="width: 35px; height: 16px"></div>
+        </div>
+        <div class="bg-pulse-grey w-100" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-75 mt-2" style="height: 16px"></div>
+    </div>
+    <div class="d-flex flex-column p-2 bg-white rounded mb-2">
+        <div class="d-flex align-items-center mb-2">
+            <div class="mr-2">
+                <div class="rounded-circle bg-pulse-grey" style="height: 35px; width: 35px"></div>
+            </div>
+            <div class="mr-4 w-75 bg-pulse-grey" style="height: 16px"></div>
+            <div class="ml-auto bg-pulse-grey" style="width: 35px; height: 16px"></div>
+        </div>
+        <div class="bg-pulse-grey w-100" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-100 mt-2" style="height: 16px"></div>
+        <div class="bg-pulse-grey w-75 mt-2" style="height: 16px"></div>
+    </div>
+</div>

message/templates/message_drawer_view_conversation_body_message.mustache

@@ -0,0 +1,95 @@
+{{!
+    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_conversation_body_message
+
+    This template will render a single message for the body of the conversation 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="message clickable d-flex flex-column p-2 mx-1 position-relative {{#fromloggedinuser}}send {{/fromloggedinuser}}{{^fromloggedinuser}}received{{/fromloggedinuser}} rounded mb-2 mt-2"
+    data-region="message"
+    data-message-id="{{id}}"
+    role="checkbox"
+    aria-checked="false"
+    tabindex="0"
+>
+    <div class="tail position-absolute"></div>
+    <div class="d-flex align-items-center {{^fromloggedinuser}}pb-2{{/fromloggedinuser}}">
+        {{^fromloggedinuser}}
+        <div style="flex-shrink: 0">
+            <img
+                class="rounded-circle"
+                src="{{{userfrom.profileimageurl}}}"
+                alt="{{userfrom.fullname}}"
+                aria-hidden="true"
+                style="height: 30px"
+            >
+        </div>
+        <div class="text-truncate pl-2 pr-2">
+            <h6 class="text-truncate m-0 font-weight-bold">{{userfrom.fullname}}</h6>
+        </div>
+        {{/fromloggedinuser}}
+
+        <div
+            class="ml-auto small text-right time {{^formattedtime}}hidden{{/formattedtime}}"
+            style="flex-shrink: 0"
+            data-region="time-created"
+        >
+            {{formattedtime}}
+        </div>
+        <div
+            class="ml-auto small {{#formattedtime}}hidden{{/formattedtime}}"
+            {{#formattedtime}}aria-hidden="true"{{/formattedtime}}
+            {{^formattedtime}}aria-hidden="false"{{/formattedtime}}
+            data-region="loading-icon-container"
+        >
+            {{> core/loading }}
+        </div>
+        <div role="alert" class="text-danger hidden small" aria-hidden="true" data-region="error-message-container">
+            <div class="d-flex align-items-center">
+                {{#pix}} req, core {{/pix}}
+                <span class="ml-1" data-region="error-message"></span>
+            </div>
+        </div>
+        <button
+            class="ml-auto btn btn-link p-0 line-height-3 hidden"
+            aria-hidden="true"
+            data-region="retry-send"
+            title="{{#str}} retry, core {{/str}}"
+        >
+            <span class="text-primary small">{{#str}} retry, core {{/str}}</span>
+        </button>
+        <span class="hidden ml-2 small" data-region="not-selected-icon">{{#pix}} i/uncheckedcircle, core {{/pix}}</span>
+        <span class="hidden ml-2 small" data-region="selected-icon">{{#pix}} i/checkedcircle, core {{/pix}}</span>
+    </div>
+    <div dir="auto" align="initial" data-region="text-container">{{{text}}}</div>
+</div>

message/templates/message_drawer_view_conversation_body_messages.mustache

@@ -0,0 +1,41 @@
+{{!
+    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_conversation_body_messages
+
+    This template will render the list of messages in the body of the conversation
+    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="d-flex flex-column" data-region="day-messages-container">
+    {{#messages}}
+        {{> core_message/message_drawer_view_conversation_body_message }}
+    {{/messages}}
+</div>

message/templates/message_drawer_view_conversation_body_placeholder.mustache

@@ -0,0 +1,48 @@
+{{!
+    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_conversation_body_placeholder
+
+    This template will render the loading placeholder elements for the body of
+    the conversation 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="h-100 d-flex flex-column">
+    <div
+        class="px-2 pb-2 pt-0 bg-light h-100"
+        style="overflow-y: auto"
+    >
+        {{> core_message/message_drawer_view_conversation_body_day_placeholder }}
+        {{> core_message/message_drawer_view_conversation_body_day_placeholder }}
+        {{> core_message/message_drawer_view_conversation_body_day_placeholder }}
+        {{> core_message/message_drawer_view_conversation_body_day_placeholder }}
+        {{> core_message/message_drawer_view_conversation_body_day_placeholder }}
+    </div>
+</div>

message/templates/message_drawer_view_conversation_footer.mustache

@@ -0,0 +1,67 @@
+{{!
+    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_conversation_footer
+
+    This template will render the footer container for the conversation 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 border-top bg-white position-relative"
+    aria-hidden="true"
+    data-region="view-conversation"
+    data-enter-to-send="{{settings.entertosend}}"
+>
+    <div class="hidden p-sm-2" data-region="content-messages-footer-container">
+        {{> core_message/message_drawer_view_conversation_footer_content }}
+    </div>
+    <div class="hidden p-sm-2" data-region="content-messages-footer-edit-mode-container">
+        {{> core_message/message_drawer_view_conversation_footer_edit_mode }}
+    </div>
+    <div class="hidden bg-secondary p-sm-3" data-region="content-messages-footer-require-contact-container">
+        {{> core_message/message_drawer_view_conversation_footer_require_contact }}
+    </div>
+    <div class="hidden bg-secondary p-sm-3" data-region="content-messages-footer-require-unblock-container">
+        {{> core_message/message_drawer_view_conversation_footer_require_unblock }}
+    </div>
+    <div class="hidden bg-secondary p-sm-3" data-region="content-messages-footer-unable-to-message">
+        {{> core_message/message_drawer_view_conversation_footer_unable_to_message }}
+    </div>
+    <div class="p-sm-2" data-region="placeholder-container">
+        {{> core_message/message_drawer_view_conversation_footer_placeholder }}
+    </div>
+    <div
+        class="hidden position-absolute z-index-1"
+        data-region="confirm-dialogue-container"
+        style="top: -1px; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.3);"
+    ></div>
+</div>

message/templates/message_drawer_view_conversation_footer_content.mustache

@@ -0,0 +1,88 @@
+{{!
+    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_conversation_footer_content
+
+    This template will render the footer content for the conversation 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):
+    {}
+
+}}
+
+{{#showemojipicker}}
+    <div
+        class="emoji-auto-complete-container w-100 hidden"
+        data-region="emoji-auto-complete-container"
+        aria-live="polite"
+        aria-hidden="true"
+    >
+    </div>
+{{/showemojipicker}}
+<div class="d-flex mt-sm-1">
+    <textarea
+        dir="auto"
+        data-region="send-message-txt"
+        class="form-control bg-light"
+        rows="3"
+        data-auto-rows
+        data-min-rows="3"
+        data-max-rows="5"
+        aria-label="{{#str}} writeamessage, core_message {{/str}}"
+        placeholder="{{#str}} writeamessage, core_message {{/str}}"
+        style="resize: none"
+        maxlength="{{messagemaxlength}}"
+    ></textarea>
+
+    <div class="position-relative d-flex flex-column">
+        {{#showemojipicker}}
+            <div
+                data-region="emoji-picker-container"
+                class="emoji-picker-container hidden"
+                aria-hidden="true"
+            >
+                {{> core/emoji/picker }}
+            </div>
+            <button
+                class="btn btn-link btn-icon icon-size-3 ml-1"
+                aria-label="{{#str}} toggleemojipicker, core {{/str}}"
+                data-action="toggle-emoji-picker"
+            >
+                {{#pix}} e/emoticons, core{{/pix}}
+            </button>
+        {{/showemojipicker}}
+        <button
+            class="btn btn-link btn-icon icon-size-3 ml-1 mt-auto"
+            aria-label="{{#str}} sendmessage, core_message {{/str}}"
+            data-action="send-message"
+        >
+            <span data-region="send-icon-container">{{#pix}} i/sendmessage, core {{/pix}}</span>
+            <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+        </button>
+    </div>
+</div>

message/templates/message_drawer_view_conversation_footer_edit_mode.mustache

@@ -0,0 +1,50 @@
+{{!
+    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_conversation_footer_edit_mode
+
+    This template will render the foot while the conversation page is in edit mode
+    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="d-flex p-3 justify-content-end">
+    <button
+        class="btn btn-link btn-icon my-1 icon-size-4"
+        data-action="delete-selected-messages"
+        data-toggle="tooltip"
+        data-placement="top"
+        title="{{#str}} deleteselectedmessages, core_message {{/str}}"
+    >
+        <span data-region="icon-container">{{#pix}} i/delete, core {{/pix}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+        <span class="sr-only">{{#str}} deleteselectedmessages, core_message {{/str}}</span>
+    </button>
+</div>

message/templates/message_drawer_view_conversation_footer_placeholder.mustache

@@ -0,0 +1,40 @@
+{{!
+    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_conversation_footer_placeholder
+
+    This template will render the loading placeholder elements in the footer of
+    the conversation 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="d-flex">
+    <div class="bg-pulse-grey w-100" style="height: 80px"></div>
+    <div class="mx-2 mb-2 align-self-end bg-pulse-grey" style="height: 20px; width: 20px"></div>
+</div>

message/templates/message_drawer_view_conversation_footer_require_contact.mustache

@@ -0,0 +1,45 @@
+{{!
+    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_conversation_footer_require_contact
+
+    This template will render the footer when the user must add the other user as
+    a contact in a conversation 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="p-3 bg-white">
+    <p data-region="title"></p>
+    <p class="text-muted" data-region="text"></p>
+    <button type="button" class="btn btn-primary btn-block" data-action="request-add-contact">
+        <span data-region="dialogue-button-text">{{#str}} sendcontactrequest, core_message {{/str}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+</div>

message/templates/message_drawer_view_conversation_footer_require_unblock.mustache

@@ -0,0 +1,44 @@
+{{!
+    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_conversation_footer_require_unblock
+
+    This template will render the footer content when the user must unblock the other
+    user in a conversation 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="p-3 bg-white">
+    <p class="text-muted" data-region="text">{{#str}} youhaveblockeduser, core_message {{/str}}</p>
+    <button type="button" class="btn btn-primary btn-block" data-action="request-unblock">
+        <span data-region="dialogue-button-text">{{#str}} unblockuser, core_message {{/str}}</span>
+        <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
+    </button>
+</div>

message/templates/message_drawer_view_conversation_footer_unable_to_message.mustache

@@ -0,0 +1,40 @@
+{{!
+    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_conversation_footer_unable_to_message
+
+    This template will render the footer content when the user is unable to message
+    in a conversation 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="p-3 bg-white">
+    <p class="text-muted" data-region="text">{{#str}} unabletomessage, core_message {{/str}}</p>
+</div>

message/templates/message_drawer_view_conversation_header.mustache

@@ -0,0 +1,54 @@
+{{!
+    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_conversation_header
+
+    This template will render the header for the conversation page of 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 bg-white position-relative border-bottom p-1 px-sm-2"
+    aria-hidden="true"
+    data-region="view-conversation"
+>
+    <div class="hidden" data-region="header-content"></div>
+    <div class="hidden" data-region="header-edit-mode">
+        {{> core_message/message_drawer_view_conversation_header_edit_mode }}
+    </div>
+    <div data-region="header-placeholder">
+        {{> core_message/message_drawer_view_conversation_header_placeholder }}
+    </div>
+    <div
+        class="hidden position-absolute z-index-1"
+        data-region="confirm-dialogue-container"
+        style="top: 0; bottom: -1px; right: 0; left: 0; background: rgba(0,0,0,0.3);"
+    ></div>
+</div>

message/templates/message_drawer_view_conversation_header_content_type_private.mustache

@@ -0,0 +1,127 @@
+{{!
+    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_conversation_header_content_type_private
+
+    This template will render the header content of the conversation page in
+    the message 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="d-flex align-items-center">
+    {{#showrouteback}}
+        <div class="align-self-stretch" >
+            <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back role="button">
+                {{> core_message/message_drawer_icon_back }}
+            </a>
+        </div>
+    {{/showrouteback}}
+    <div class="d-flex text-truncate">
+        <a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-contact" role="button">
+            {{#imageurl}}
+                <div class="d-flex align-items-center">
+                    <img
+                        class="rounded-circle"
+                        src="{{{.}}}"
+                        alt="{{name}}"
+                        aria-hidden="true"
+                        style="height: 38px"
+                    >
+                </div>
+            {{/imageurl}}
+            <div class="w-100 text-truncate ml-2">
+                <div class="d-flex">
+                    <strong class="m-0 text-truncate">{{name}}</strong>
+                    <span
+                        class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary"
+                        data-region="favourite-icon-container"
+                    >
+                        {{#pix}} i/star-rating, core, {{#str}} favourites, core {{/str}} {{/pix}}
+                    </span>
+                    <span
+                        class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary"
+                        data-region="muted-icon-container"
+                    >
+                        {{#pix}} i/muted, core, {{#str}} mutedconversation, core_message {{/str}} {{/pix}}
+                    </span>
+                </div>
+                {{#showonlinestatus}}
+                    <p class="m-0 font-weight-light text-truncate">
+                        {{#isonline}}{{#str}} loggedin, core_message {{/str}}{{/isonline}}
+                        {{^isonline}}{{#str}} loggedoff, core_message {{/str}}{{/isonline}}
+                    </p>
+                {{/showonlinestatus}}
+            </div>
+        </a>
+    </div>
+    <div class="ml-auto dropdown">
+        <button id="conversation-actions-menu-button" class="btn btn-link btn-icon icon-size-3" type="button"
+        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+        aria-label="{{#str}} conversationactions, core_message {{/str}}" aria-controls="conversation-actions-menu">
+            {{#pix}} i/moremenu, core {{/pix}}
+        </button>
+        <div id="conversation-actions-menu" class="dropdown-menu float-right" role="menu"
+        aria-labelledby="conversation-actions-menu-button">
+            <a class="dropdown-item" href="#" data-action="view-contact" role="menuitem">
+                {{#str}} info, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#"
+            data-action="confirm-favourite" role="menuitem">
+                {{#str}} addtofavourites, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#"
+            data-action="confirm-unfavourite" role="menuitem">
+                {{#str}} removefromfavourites, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{#isblocked}}hidden{{/isblocked}}" href="#" data-action="request-block" role="menuitem">
+                {{#str}} blockuser, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{^isblocked}}hidden{{/isblocked}}" href="#" data-action="request-unblock" role="menuitem">
+                {{#str}} unblockuser, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{#ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-mute" role="menuitem">
+                {{#str}} muteconversation, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{^ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-unmute" role="menuitem">
+                {{#str}} unmuteconversation, core_message {{/str}}
+            </a>
+            <a class="dropdown-item" href="#" data-action="request-delete-conversation" role="menuitem">
+                {{#str}} deleteconversation, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{#iscontact}}hidden{{/iscontact}}" href="#" data-action="request-add-contact" role="menuitem">
+                {{#str}} addtoyourcontacts, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{^iscontact}}hidden{{/iscontact}}" href="#" data-action="request-remove-contact"
+            role="menuitem">
+                {{#str}} removefromyourcontacts, core_message {{/str}}
+            </a>
+        </div>
+    </div>
+</div>

message/templates/message_drawer_view_conversation_header_content_type_private_no_controls.mustache

@@ -0,0 +1,82 @@
+{{!
+    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_conversation_header_content_type_private_no_controls
+
+    This template will render the header content of the conversation page without controls in
+    the message 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="d-flex align-items-center">
+    {{#showrouteback}}
+        <div class="align-self-stretch" >
+            <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back role="button">
+                {{> core_message/message_drawer_icon_back }}
+            </a>
+        </div>
+    {{/showrouteback}}
+    <div class="d-flex text-truncate">
+        {{#imageurl}}
+            <div class="d-flex align-items-center">
+                <img
+                    class="rounded-circle"
+                    src="{{{.}}}"
+                    alt="{{name}}"
+                    aria-hidden="true"
+                    style="height: 38px"
+                >
+            </div>
+        {{/imageurl}}
+        <div class="w-100 text-truncate ml-2">
+            <div class="d-flex">
+                <strong class="m-0 text-truncate">{{name}}</strong>
+                <span
+                    class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary"
+                    data-region="favourite-icon-container"
+                >
+                    {{#pix}} i/star-rating, core, {{#str}} favourites, core {{/str}} {{/pix}}
+                </span>
+                <span
+                    class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary"
+                    data-region="muted-icon-container"
+                >
+                    {{#pix}} i/muted, core, {{#str}} mutedconversation, core_message {{/str}} {{/pix}}
+                </span>
+            </div>
+            {{#showonlinestatus}}
+                <p class="m-0 font-weight-light text-truncate">
+                    {{#isonline}}{{#str}} loggedin, core_message {{/str}}{{/isonline}}
+                    {{^isonline}}{{#str}} loggedoff, core_message {{/str}}{{/isonline}}
+                </p>
+            {{/showonlinestatus}}
+        </div>
+    </div>
+</div>

message/templates/message_drawer_view_conversation_header_content_type_public.mustache

@@ -0,0 +1,121 @@
+{{!
+    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_conversation_header_content_type_public
+
+    This template will render the header content of the conversation page in
+    the message 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="d-flex flex-column">
+    <div class="d-flex align-items-center">
+        {{#showrouteback}}
+            <div class="align-self-stretch" >
+                <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back role="button">
+                    {{> core_message/message_drawer_icon_back }}
+                </a>
+            </div>
+        {{/showrouteback}}
+        <div class="d-flex text-truncate">
+            <a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-group-info" role="button">
+                {{#imageurl}}
+                    <img
+                        class="rounded-circle"
+                        src="{{{.}}}"
+                        alt="{{name}}"
+                        aria-hidden="true"
+                        style="height: 38px"
+                    >
+                {{/imageurl}}
+                <div class="w-100 text-truncate ml-2">
+                    <div class="d-flex">
+                        <strong class="m-0 text-truncate">{{name}}</strong>
+                        <span
+                            class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary"
+                            data-region="favourite-icon-container"
+                        >
+                            {{#pix}} i/star-rating, core, {{#str}} favourites, core {{/str}} {{/pix}}
+                        </span>
+                        <span
+                            class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary"
+                            data-region="muted-icon-container"
+                        >
+                            {{#pix}} i/muted, core, {{#str}} mutedconversation, core_message {{/str}} {{/pix}}
+                        </span>
+                    </div>
+                    <p class="m-0 text-truncate">{{subname}}</p>
+                </div>
+            </a>
+        </div>
+        <div class="ml-auto dropdown">
+            <button id="conversation-actions-menu-button" class="btn btn-link btn-icon icon-size-3" type="button"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+            aria-label="{{#str}} conversationactions, core_message {{/str}}" aria-controls="conversation-actions-menu">
+                {{#pix}} i/moremenu, core {{/pix}}
+            </button>
+            <div id="conversation-actions-menu" class="dropdown-menu float-right" role="menu"
+            aria-labelledby="conversation-actions-menu-button">
+                <a class="dropdown-item" href="#" data-action="view-group-info" role="menuitem">
+                    {{#str}} groupinfo, core_message {{/str}}
+                </a>
+                <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-favourite"
+                role="menuitem">
+                    {{#str}} addtofavourites, core_message {{/str}}
+                </a>
+                <a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-unfavourite"
+                role="menuitem">
+                    {{#str}} removefromfavourites, core_message {{/str}}
+                </a>
+                <a class="dropdown-item {{#ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-mute"
+                role="menuitem">
+                    {{#str}} muteconversation, core_message {{/str}}
+                </a>
+                <a class="dropdown-item {{^ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-unmute"
+                role="menuitem">
+                    {{#str}} unmuteconversation, core_message {{/str}}
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="d-flex">
+        <!-- These are just placeholder elements to align the text below correctly with the name text above -->
+        {{#showrouteback}}
+            <div class="mr-2 icon" aria-hidden="true"></div>
+        {{/showrouteback}}
+        {{#imageurl}}<div style="width: 38px" aria-hidden="true"></div>{{/imageurl}}
+        <!-- End placeholders -->
+        <a class="text-decoration-none line-height-3 ml-2" href="#" data-action="view-group-info" role="button">
+            <small class="m-0 text-muted text-truncate">
+                {{#str}} numparticipants, core_message, {{totalmembercount}} {{/str}}
+            </small>
+        </a>
+    </div>
+</div>

message/templates/message_drawer_view_conversation_header_content_type_self.mustache

@@ -0,0 +1,91 @@
+{{!
+    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_conversation_header_content_type_self
+
+    This template will render the header content of the conversation page in
+    the message message drawer.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * urls The URLs for the popover
+    * name
+    * subname
+    * imageurl
+    * isfavourite
+    * showonlinestatus
+
+
+    Example context (json):
+    {}
+
+}}
+
+<div class="d-flex align-items-center">
+    <div class="align-self-stretch" >
+        <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
+            {{> core_message/message_drawer_icon_back }}
+        </a>
+    </div>
+    <div class="d-flex text-truncate">
+        {{#imageurl}}
+            <div class="d-flex align-items-center">
+                <img
+                    class="rounded-circle"
+                    src="{{{.}}}"
+                    alt="{{name}}"
+                    aria-hidden="true"
+                    style="height: 38px"
+                >
+            </div>
+        {{/imageurl}}
+        <div class="w-100 text-truncate ml-2">
+            <div class="d-flex">
+                <strong class="m-0 text-truncate">{{name}}</strong>
+                <span class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary" data-region="favourite-icon-container">
+                    {{#pix}} i/star-rating, core {{/pix}}
+                </span>
+            </div>
+            {{#showonlinestatus}}
+                <p class="m-0 font-weight-light text-truncate">
+                    {{#str}} loggedin, core_message {{/str}}
+                </p>
+            {{/showonlinestatus}}
+        </div>
+    </div>
+    <div class="ml-auto dropdown">
+        <button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {{#pix}} i/moremenu, core {{/pix}}
+        </button>
+        <div class="dropdown-menu pull-right">
+            <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#" data-action="confirm-favourite">
+                {{#str}} addtofavourites, core_message {{/str}}
+            </a>
+            <a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#" data-action="confirm-unfavourite">
+                {{#str}} removefromfavourites, core_message {{/str}}
+            </a>
+            <a class="dropdown-item" href="#" data-action="request-delete-conversation">
+                {{#str}} deleteconversation, core_message {{/str}}
+            </a>
+        </div>
+    </div>
+</div>

message/templates/message_drawer_view_conversation_header_edit_mode.mustache

@@ -0,0 +1,45 @@
+{{!
+    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_conversation_header_edit_mode
+
+    This template will render the header while the conversation is in edit mode on
+    the conversation page of 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="d-flex p-2 align-items-center">
+    {{#str}} messagesselected:, core_message {{/str}}
+    <span class="ml-1" data-region="message-selected-court">1</span>
+    <button type="button" class="ml-auto close" aria-label="{{#str}} cancelselection, core_message {{/str}}"
+        data-action="cancel-edit-mode">
+            <span aria-hidden="true">&times;</span>
+    </button>
+</div>

message/templates/message_drawer_view_conversation_header_placeholder.mustache

@@ -0,0 +1,62 @@
+{{!
+    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_conversation_header_placeholder
+
+    This template will render the loading placeholder elements for the header
+    of the conversation 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="d-flex">
+    {{#showrouteback}}
+    <div class="align-self-stretch" >
+        <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back role="button">
+            {{> core_message/message_drawer_icon_back }}
+        </a>
+    </div>
+    {{/showrouteback}}
+    <div
+        class="ml-2 rounded-circle bg-pulse-grey align-self-center"
+        style="height: 38px; width: 38px"
+    >
+    </div>
+    <div class="ml-2 " style="flex: 1">
+        <div
+            class="mt-1 bg-pulse-grey w-75"
+            style="height: 16px;"
+        >
+        </div>
+    </div>
+    <div
+        class="ml-2 bg-pulse-grey align-self-center"
+        style="height: 16px; width: 20px"
+    >
+    </div>
+</div>

message/templates/message_drawer_view_group_info_body.mustache

@@ -0,0 +1,48 @@
+{{!
+    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
+
+    This template will render 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="hidden"
+    aria-hidden="true"
+    data-region="view-group-info"
+>
+    <div
+        class="pt-3 h-100 d-flex flex-column"
+        data-region="group-info-content-container"
+        style="overflow-y: auto"
+    ></div>
+</div>

message/templates/message_drawer_view_group_info_body_content.mustache

@@ -0,0 +1,70 @@
+{{!
+    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):
+    {}
+
+}}
+
+<a class="px-2 align-self-start" href="#" data-route-back role="button">
+    {{> core_message/message_drawer_icon_back }}
+</a>
+<div class="px-2">
+    <div class="text-center">
+        {{#imageurl}}
+        <img
+            class="rounded-circle"
+            src="{{.}}"
+            aria-hidden="true"
+            alt="{{#str}} pictureof, moodle, {{name}} {{/str}}"
+            title="{{#str}} pictureof, moodle, {{name}} {{/str}}"
+            style="height: 100px; width: 100px"
+        >
+        {{/imageurl}}
+    </div>
+    <h2 class="mt-2 mb-0 text-center text-truncate h4">{{name}}</h2>
+    {{#subname}}<h3 class="mt-2 mb-0 text-center text-truncate h5">{{.}}</h3>{{/subname}}
+</div>
+<h3 class="border-bottom h6 mt-3 px-3 py-2 mb-0 font-weight-bold">{{#str}} otherparticipants, core_message {{/str}}</h3>
+<div class="pt-1 bg-white overflow-y" data-region="members-list-container">
+    {{< 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>

message/templates/message_drawer_view_group_info_participants_list.mustache

@@ -0,0 +1,74 @@
+{{!
+    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_participants_list
+
+    This template will render a list of contacts for 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):
+    {}
+
+}}
+
+{{#contacts}}
+    <a
+        href="#"
+        class="p-2 d-flex list-group-item list-group-item-action"
+        data-route="view-conversation"
+        {{#conversationid}}
+            data-route-param-1="{{.}}"
+        {{/conversationid}}
+        {{^conversationid}}
+            data-route-param-1="false"
+            data-route-param-2="create"
+            data-route-param-3="{{id}}"
+        {{/conversationid}}
+        data-contact-user-id="{{id}}"
+        data-region="contact"
+        role="button"
+    >
+        <img
+            class="rounded-circle"
+            src="{{{profileimageurl}}}"
+            alt="{{fullname}}"
+            aria-hidden="true"
+            style="height: 38px"
+        >
+        {{#showonlinestatus}}
+            <span class="contact-status icon-size-2 {{#isonline}}online{{/isonline}}">
+                {{#isonline}} {{#pix}} t/online, core, {{#str}} online, core_message {{/str}} {{/pix}} {{/isonline}}
+            </span>
+        {{/showonlinestatus}}
+        <h6 class="ml-2">{{fullname}}</h6>
+        <div
+            class="ml-auto align-self-end {{^isblocked}}hidden{{/isblocked}}"
+            data-region="block-icon-container"
+        >
+            {{#pix}} t/block, core, {{#str}} contactblocked, message {{/str}} {{/pix}}
+        </div>
+    </a>
+{{/contacts}}

message/templates/message_drawer_view_group_info_participants_list_item_placeholder.mustache

@@ -0,0 +1,48 @@
+{{!
+    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_participants_list_item_placeholder
+
+    This template will render a placeholder loading item for a contact 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="p-1 d-flex list-group-item border-0" data-region="placeholder">
+    <div
+        class="rounded-circle bg-pulse-grey"
+        style="height: 38px; width: 38px"
+    >
+    </div>
+    <div
+        class="ml-2 bg-pulse-grey w-50"
+        style="height: 20px;"
+    >
+    </div>
+</div>

message/templates/message_drawer_view_overview_body.mustache

@@ -0,0 +1,42 @@
+{{!
+    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_body
+
+    This template will render the body of the overview section of 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="h-100 view-overview-body" aria-hidden="false" data-region="view-overview" {{^isdrawer}}data-in-panel="true"{{/isdrawer}} data-user-id="{{loggedinuser.id}}">
+    <div id="message-drawer-view-overview-container-{{uniqid}}" class="d-flex flex-column h-100" style="overflow-y: auto">
+            {{> core_message/message_drawer_view_overview_section_favourites }}
+            {{> core_message/message_drawer_view_overview_section_group_messages }}
+            {{> core_message/message_drawer_view_overview_section_messages }}
+    </div>
+</div>

message/templates/message_drawer_view_overview_footer.mustache

@@ -0,0 +1,38 @@
+{{!
+    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_footer
+
+    This template will render the body of the overview section of the message drawer.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Example context (json):
+    {}
+
+}}
+{{#overview.messageurl}}
+    <div data-region="view-overview" class="text-center">
+        <a href="{{overview.messageurl}}">
+            {{#str}} seeall, core_message {{/str}}
+        </a>
+    </div>
+{{/overview.messageurl}}

message/templates/message_drawer_view_overview_header.mustache

@@ -0,0 +1,79 @@
+{{!
+    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_header
+
+    This template will render the header for the overview page of 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="border-bottom p-1 px-sm-2" aria-hidden="false" {{^isdrawer}}data-in-panel="true"{{/isdrawer}} data-region="view-overview">
+    <div class="d-flex align-items-center">
+        <div class="input-group simplesearchform">
+            <input
+                type="text"
+                class="form-control"
+                placeholder="{{#str}} search, core_search {{/str}}"
+                aria-label="{{#str}} search, core_search {{/str}}"
+                data-region="view-overview-search-input"
+            >
+            <div class="input-group-append">
+                <span class="icon-no-margin btn btn-submit">
+                    {{#pix}} a/search, core {{/pix}}
+                </span>
+            </div>
+        </div>
+        {{#caneditownmessageprofile}}
+        <div class="ml-2">
+            <a
+                href="#"
+                data-route="view-settings"
+                data-route-param="{{loggedinuser.id}}"
+                aria-label="{{#str}} settings, core_message {{/str}}"
+                role="button"
+            >
+                {{#pix}} t/edit, core {{/pix}}
+            </a>
+        </div>
+        {{/caneditownmessageprofile}}
+    </div>
+    <div class="text-right mt-sm-3">
+        <a href="#" data-route="view-contacts" role="button">
+            {{#pix}} i/user, core {{/pix}}
+            {{#str}} contacts, core_message {{/str}}
+            <span
+                class="badge bg-primary text-white ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}"
+                data-region="contact-request-count"
+            >
+                <span aria-hidden="true">{{contactrequestcount}}</span>
+                <span class="sr-only">{{#str}} pendingcontactrequests, core_message, {{contactrequestcount}} {{/str}}</span>
+            </span>
+        </a>
+    </div>
+</div>

message/templates/message_drawer_view_overview_section.mustache

@@ -0,0 +1,88 @@
+{{!
+    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-left 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">
+                {{#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-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 ml-2" data-region="loading-icon-container">
+                {{> core/loading }}
+            </span>
+            <span
+                class="{{^count.unread}}hidden{{/count.unread}} badge rounded-pill bg-primary text-white ml-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>

message/templates/message_drawer_view_overview_section_favourites.mustache

@@ -0,0 +1,47 @@
+{{!
+    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_favourites
+
+    This template will render the favourites section of the overview 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):
+    {}
+
+}}
+
+{{< core_message/message_drawer_view_overview_section }}
+    {{$region}}view-overview-favourites{{/region}}
+    {{$title}}{{#str}} favourites {{/str}}{{/title}}
+    {{$placeholder}}
+        <div class="text-center py-2">{{> core/loading }}</div>
+    {{/placeholder}}
+    {{$emptymessage}}
+        <p class="text-muted mt-2">{{#str}} nofavourites, core_message {{/str}}</p>
+    {{/emptymessage}}
+{{/ core_message/message_drawer_view_overview_section }}

message/templates/message_drawer_view_overview_section_group_messages.mustache

@@ -0,0 +1,47 @@
+{{!
+    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_group_messages
+
+    This template will render the group messages section of the overview 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):
+    {}
+
+}}
+
+{{< core_message/message_drawer_view_overview_section }}
+    {{$region}}view-overview-group-messages{{/region}}
+    {{$title}}{{#str}} groupconversations, core_message {{/str}}{{/title}}
+    {{$placeholder}}
+        <div class="text-center py-2">{{> core/loading }}</div>
+    {{/placeholder}}
+    {{$emptymessage}}
+        <p class="text-muted mt-2">{{#str}} nogroupconversations, core_message {{/str}}</p>
+    {{/emptymessage}}
+{{/ core_message/message_drawer_view_overview_section }}

message/templates/message_drawer_view_overview_section_messages.mustache

@@ -0,0 +1,54 @@
+{{!
+    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_messages
+
+    This template will render the messages section of the overview 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):
+    {}
+
+}}
+
+{{< core_message/message_drawer_view_overview_section }}
+    {{$region}}view-overview-messages{{/region}}
+    {{$title}}{{#str}} individualconversations, core_message {{/str}}{{/title}}
+    {{$placeholder}}
+        <div class="text-center py-2">{{> core/loading }}</div>
+    {{/placeholder}}
+    {{$notification}}
+        {{#overview.notification}}
+            <div class="text-center p-2">
+                <p class="text-center text-muted mt-2">{{.}}</p>
+            </div>
+        {{/overview.notification}}
+    {{/notification}}
+    {{$emptymessage}}
+        <p class="text-muted mt-2">{{#str}} noindividualconversations, core_message {{/str}}</p>
+    {{/emptymessage}}
+{{/ core_message/message_drawer_view_overview_section }}

message/templates/message_drawer_view_search_body.mustache

@@ -0,0 +1,56 @@
+{{!
+    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_search_body
+
+    This template will render the body of the search 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
+    data-region="view-search"
+    aria-hidden="true"
+    class="h-100 hidden"
+    data-user-id="{{loggedinuser.id}}"
+    data-users-offset="0"
+    data-messages-offset="0"
+    style="overflow-y: auto"
+    {{^isdrawer}}data-in-panel="true"{{/isdrawer}}
+>
+    <div class="hidden" data-region="search-results-container" style="overflow-y: auto">
+        {{> core_message/message_drawer_view_search_results_content }}
+    </div>
+    <div class="hidden" data-region="loading-placeholder">
+        {{> core_message/message_drawer_view_search_results_content_placeholder }}
+    </div>
+    <div class="p-3 text-center" data-region="empty-message-container">
+        <p>{{#str}} searchcombined, core_message {{/str}}</p>
+    </div>
+</div>

message/templates/message_drawer_view_search_header.mustache

@@ -0,0 +1,73 @@
+{{!
+    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_search_header
+
+    This template will render the header of the search 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 border-bottom p-1 px-sm-2 view-search" {{^isdrawer}}data-in-panel="true"{{/isdrawer}} aria-hidden="true" data-region="view-search">
+    <div class="d-flex align-items-center">
+        <a
+            class="mr-2 align-self-stretch d-flex align-items-center"
+            href="#"
+            data-route-back
+            data-action="cancel-search"
+            role="button"
+        >
+            {{> core_message/message_drawer_icon_back }}
+        </a>
+        <div class="input-group simplesearchform">
+            <input
+                type="text"
+                class="form-control"
+                placeholder="{{#str}} search, core_search {{/str}}"
+                aria-label="{{#str}} search, core_search {{/str}}"
+                data-region="search-input"
+            >
+            <div class="input-group-append">
+                <button
+                    class="btn btn-submit icon-no-margin"
+                    type="button"
+                    data-action="search"
+                    aria-label="{{#str}} search, core_search {{/str}}"
+                >
+                    <span data-region="search-icon-container">
+                        {{#pix}} a/search, core {{/pix}}
+                    </span>
+                    <span class="hidden" data-region="loading-icon-container">
+                        {{> core/loading }}
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

message/templates/message_drawer_view_search_results_content.mustache

@@ -0,0 +1,66 @@
+{{!
+    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_search_results_content
+
+    This template will render the search results content in the search page
+    of 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="d-flex flex-column">
+    <div class="mb-3 bg-white" data-region="all-contacts-container">
+        <div data-region="contacts-container"  class="pt-2">
+            <h3 class="h6 px-2">{{#str}} contacts, core_message {{/str}}</h3>
+            <div class="list-group" data-region="list"></div>
+        </div>
+        <div data-region="non-contacts-container" class="pt-2 border-top">
+            <h3 class="h6 px-2">{{#str}} noncontacts, core_message {{/str}}</h3>
+            <div class="list-group" data-region="list"></div>
+        </div>
+        <div class="text-right">
+            <button class="btn btn-link text-primary" data-action="load-more-users">
+                <span data-region="button-text">{{#str}} loadmore, core_message {{/str}}</span>
+                <span data-region="loading-icon-container" class="hidden">{{> core/loading }}</span>
+            </button>
+        </div>
+    </div>
+    <div class="bg-white" data-region="messages-container">
+        <h3 class="h6 px-2 pt-2">{{#str}} messages, core_message {{/str}}</h3>
+        <div class="list-group" data-region="list"></div>
+        <div class="text-right">
+            <button class="btn btn-link text-primary" data-action="load-more-messages">
+                <span data-region="button-text">{{#str}} loadmore, core_message {{/str}}</span>
+                <span data-region="loading-icon-container" class="hidden">{{> core/loading }}</span>
+            </button>
+        </div>
+    </div>
+    <p class="hidden p-3 text-center" data-region="no-results-container">{{#str}} noresults, core {{/str}}</p>
+</div>

message/templates/message_drawer_view_search_results_content_placeholder.mustache

@@ -0,0 +1,37 @@
+{{!
+    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_search_results_content_placeholder
+
+    This template will render the loading placeholder elements while the search
+    content is being loaded in the search page of 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="text-center pt-3 icon-size-4">{{> core/loading }}</div>

message/templates/message_drawer_view_settings_body.mustache

@@ -0,0 +1,44 @@
+{{!
+    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_settings_body
+
+    This template will render the body of the settings 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="h-100 hidden bg-white" aria-hidden="true" data-region="view-settings">
+    <div class="hidden" data-region="content-container">
+        {{> core_message/message_drawer_view_settings_body_content }}
+    </div>
+    <div data-region="placeholder-container">
+        {{> core_message/message_drawer_view_settings_body_placeholder }}
+    </div>
+</div>

message/templates/message_drawer_view_settings_body_content.mustache

@@ -0,0 +1,75 @@
+{{!
+    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_settings_body_content
+
+    This template will render the content for the body of the settings 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):
+    {}
+
+}}
+
+{{#settings}}
+<div data-region="settings" class="p-3">
+    <h3 class="h6 font-weight-bold">{{#str}} privacy, message {{/str}}</h3>
+    <p>{{#str}} privacy_desc, message {{/str}}</p>
+    <div data-preference="blocknoncontacts" class="mb-3">
+        <fieldset>
+            <legend class="sr-only">{{#str}} contactableprivacy, message {{/str}}</legend>
+            {{#privacy}}
+                <div class="custom-control custom-radio mb-2">
+                    <input
+                        type="radio"
+                        name="message_blocknoncontacts"
+                        class="custom-control-input"
+                        id="block-noncontacts-{{uniqid}}-{{value}}"
+                        value="{{value}}"
+                    >
+                    <label class="custom-control-label ml-2" for="block-noncontacts-{{uniqid}}-{{value}}">
+                        {{text}}
+                    </label>
+                </div>
+            {{/privacy}}
+        </fieldset>
+    </div>
+
+    <div class="hidden" data-region="notification-preference-container">
+        <h3 class="mb-2 mt-4 h6 font-weight-bold">{{#str}} notificationpreferences, core_message {{/str}}</h3>
+    </div>
+
+    <h3 class="mb-2 mt-4 h6 font-weight-bold">{{#str}} general, core {{/str}}</h3>
+    <div data-preference="entertosend">
+        <div class="custom-control custom-switch">
+            <input type="checkbox" class="custom-control-input" id="enter-to-send-{{uniqid}}" {{#entertosend}}checked{{/entertosend}}>
+            <label class="custom-control-label" for="enter-to-send-{{uniqid}}">
+                {{#str}} useentertosend, core_message {{/str}}
+            </label>
+        </div>
+    </div>
+</div>
+{{/settings}}

message/templates/message_drawer_view_settings_body_content_notification_preferences.mustache

@@ -0,0 +1,51 @@
+{{!
+    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_settings_body_content_notification_preferences
+
+    This template will render the notification perferences for the message settings..
+
+    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 data-preference="notifications" class="d-flex flex-column">
+    {{#processors}}
+
+        <div class="custom-control custom-switch">
+            <input type="checkbox" class="custom-control-input" id="{{name}}-{{uniqid}}"
+                data-name="{{name}}"
+                {{#checked}}checked{{/checked}}
+                {{#locked}}disabled{{/locked}}
+            >
+            <label class="custom-control-label" for="{{name}}-{{uniqid}}">
+                {{displayname}}{{#locked}} ({{lockedmessage}}){{/locked}}
+            </label>
+        </div>
+    {{/processors}}
+</div>

message/templates/message_drawer_view_settings_body_placeholder.mustache

@@ -0,0 +1,72 @@
+{{!
+    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_settings_body_placeholder
+
+    This template will render the body of the settings 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="d-flex flex-column p-3">
+    <div class="w-25 bg-pulse-grey h6" style="height: 18px"></div>
+    <div class="w-75 bg-pulse-grey mb-4" style="height: 18px"></div>
+    <div class="mb-3">
+        <div class="w-100 d-flex mb-3">
+            <div class="bg-pulse-grey rounded-circle" style="width: 18px; height: 18px"></div>
+            <div class="bg-pulse-grey w-50 ml-2" style="height: 18px"></div>
+        </div>
+        <div class="w-100 d-flex mb-3">
+            <div class="bg-pulse-grey rounded-circle" style="width: 18px; height: 18px"></div>
+            <div class="bg-pulse-grey w-50 ml-2" style="height: 18px"></div>
+        </div>
+        <div class="w-100 d-flex mb-3">
+            <div class="bg-pulse-grey rounded-circle" style="width: 18px; height: 18px"></div>
+            <div class="bg-pulse-grey w-50 ml-2" style="height: 18px"></div>
+        </div>
+    </div>
+    <div class="w-50 bg-pulse-grey h6 mb-3 mt-2" style="height: 18px"></div>
+    <div class="mb-4">
+        <div class="w-100 d-flex mb-2 align-items-center">
+            <div class="bg-pulse-grey w-25" style="width: 18px; height: 27px"></div>
+            <div class="bg-pulse-grey w-25 ml-2" style="height: 18px"></div>
+        </div>
+        <div class="w-100 d-flex mb-2 align-items-center">
+            <div class="bg-pulse-grey w-25" style="width: 18px; height: 27px"></div>
+            <div class="bg-pulse-grey w-25 ml-2" style="height: 18px"></div>
+        </div>
+    </div>
+    <div class="w-25 bg-pulse-grey h6 mb-3 mt-2" style="height: 18px"></div>
+    <div class="mb-3">
+        <div class="w-100 d-flex mb-2 align-items-center">
+            <div class="bg-pulse-grey w-25" style="width: 18px; height: 27px"></div>
+            <div class="bg-pulse-grey w-50 ml-2" style="height: 18px"></div>
+        </div>
+    </div>
+</div>

message/templates/message_drawer_view_settings_header.mustache

@@ -0,0 +1,50 @@
+{{!
+    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_settings_header
+
+    This template will render the header for the settings 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 border-bottom p-1 px-sm-2 pb-sm-3" aria-hidden="true" data-region="view-settings">
+    <div class="d-flex align-items-center">
+        {{#isdrawer}}
+        <div class="align-self-stretch" >
+            <a class="h-100 d-flex mr-2 align-items-center" href="#" data-route-back role="button">
+                {{> core_message/message_drawer_icon_back }}
+            </a>
+        </div>
+        {{/isdrawer}}
+        <div>
+            {{#str}} settings, core {{/str}}
+        </div>
+    </div>
+</div>

message/templates/message_index.mustache

@@ -0,0 +1,84 @@
+{{!
+    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_index
+
+    This template will render 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
+        id="message-index-{{uniqid}}"
+        class="message-app main bg-light border flex-row"
+        aria-expanded="false"
+        aria-hidden="true"
+        data-region="message-index"
+        role="region"
+>
+    <div class="container-fluid">
+        <div class="row h-100 no-gutters">
+            <div class="col-4 d-flex flex-column conversationcontainer">
+                <div class="border-right h-100">
+                    <div class="panel-header-container" data-region="panel-header-container">
+                        {{> core_message/message_drawer_view_overview_header }}
+                        {{> core_message/message_drawer_view_search_header }}
+                    </div>
+                    <div class="panel-body-container" data-region="panel-body-container">
+                        {{> core_message/message_drawer_view_overview_body }}
+                        {{> core_message/message_drawer_view_search_body }}
+                    </div>
+                </div>
+            </div>
+            <div class="col-8 d-flex flex-column">
+                <div class="header-container position-relative" data-region="header-container">
+                    {{> core_message/message_drawer_view_contacts_header }}
+                    {{> core_message/message_drawer_view_conversation_header }}
+                    {{> core_message/message_drawer_view_settings_header }}
+                </div>
+                <div class="body-container position-relative" data-region="body-container">
+                    {{> core_message/message_drawer_view_contact_body }}
+                    {{> core_message/message_drawer_view_contacts_body }}
+                    {{> core_message/message_drawer_view_conversation_body }}
+                    {{> core_message/message_drawer_view_group_info_body }}
+                    {{> core_message/message_drawer_view_settings_body }}
+                </div>
+                <div class="footer-container position-relative" data-region="footer-container">
+                    {{> core_message/message_drawer_view_conversation_footer }}
+                    {{> core_message/message_drawer_view_overview_footer }}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{#js}}
+    require(['jquery', 'core_message/message_drawer'], function($, MessageDrawer) {
+    var root = $('#message-index-{{uniqid}}');
+    MessageDrawer.init(root, '{{uniqid}}', true, {{{route}}});
+    });
+{{/js}}

message/templates/message_jumpto.mustache

@@ -0,0 +1,27 @@
+{{!
+    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_jumpto
+
+    This template will render the jump button used for keyboard navigation.
+
+    Example context (json):
+    {
+    }
+
+}}
+<span class="sr-only sr-only-focusable" data-region="jumpto" tabindex="-1"></span>

message/templates/message_popover.mustache

@@ -0,0 +1,66 @@
+{{!
+    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_popover
+
+    This template will render the message popover for the navigation bar.
+
+    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):
+    {
+        "unreadcount": 3
+    }
+
+}}
+<div class="popover-region collapsed" data-region="popover-region-messages">
+    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link popover-region-toggle position-relative icon-no-margin" href="#"
+            role="button">
+        {{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
+        <div
+            class="count-container {{^unreadcount}}hidden{{/unreadcount}}"
+            data-region="count-container"
+        >
+            <span aria-hidden="true">{{unreadcount}}</span>
+            <span class="sr-only">{{#str}} unreadconversations, core_message, {{unreadcount}} {{/str}}</span>
+        </div>
+    </a>
+    {{> core_message/message_jumpto }}
+</div>
+
+{{#js}}
+require(
+[
+    'jquery',
+    'core_message/message_popover'
+],
+function(
+    $,
+    Popover
+) {
+    var toggle = $('#message-drawer-toggle-{{uniqid}}');
+    Popover.init(toggle);
+});
+{{/js}}

message/templates/message_preferences.mustache

@@ -0,0 +1,106 @@
+{{!
+    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_preferences
+
+    The message preferences page
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * userid The logged in user id
+    * disableall If the user has disabled notifications
+    * components The list of notification components
+    * privacychoices The choice options for the contactable privacy setting
+
+    Example context (json):
+    {
+        "userid": 1,
+        "disableall": 0,
+        "components": [
+            {
+                "notifications": [
+                    {
+                        "displayname": "Notices about minor problems",
+                        "preferencekey": "message_provider_moodle_notices",
+                        "processors": [
+                            {
+                                "displayname": "Popup notification",
+                                "name": "popup",
+                                "locked": 0,
+                                "userconfigured": 1,
+                                "enabled": 1
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        "privacychoices": [
+            {
+                "value": 1,
+                "text": "My contacts only",
+                "checked": 0
+            },
+            {
+                "value": 2,
+                "text": "Anyone within courses I am a member of",
+                "checked": 1
+            }
+        ]
+    }
+}}
+<div class="preferences-page-container" data-region="preferences-page-container">
+    <h2>{{#str}} messagepreferences, message {{/str}}</h2>
+    <div class="privacy-setting-container"
+         data-user-id="{{userid}}"
+         data-region="privacy-setting-container"
+         data-preference-key="message_blocknoncontacts">
+        <p>{{#str}} contactableprivacy, message {{/str}}</p>
+       {{#privacychoices}}
+        <input id="action-selection-option-{{value}}"
+               type="radio"
+               name="message_blocknoncontacts"
+               value="{{value}}"
+               {{#checked}}checked="checked"{{/checked}}/>
+        <label for="action-selection-option-{{value}}">{{text}}</label>
+        <br>
+       {{/privacychoices}}
+    </div><br>
+    <div class="preferences-container {{#disableall}}disabled{{/disableall}}"
+        data-user-id="{{userid}}"
+        data-region="preferences-container">
+        <table class="table preference-table" data-region="preference-table">
+            <tbody>
+                {{#components}}
+                    {{> message/message_preferences_component }}
+                {{/components}}
+            </tbody>
+        </table>
+    </div>
+</div>
+{{#js}}
+require(['jquery', 'core_message/message_preferences'],
+    function($, MessagePreferences) {
+
+    new MessagePreferences($('[data-region="preferences-page-container"]'));
+});
+{{/js}}

message/templates/message_preferences_component.mustache

@@ -0,0 +1,60 @@
+{{!
+    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_preferences_component
+
+    The message preferences page
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * notifications The list of notifications
+
+    Example context (json):
+    {
+        "notifications": [
+            {
+                "displayname": "Notices about minor problems",
+                "preferencekey": "message_provider_moodle_notices",
+                "processors": [
+                    {
+                        "displayname": "Popup notification",
+                        "name": "popup",
+                        "locked": 0,
+                        "userconfigured": 1,
+                        "enabled": 1
+                    }
+                ]
+            }
+        ]
+    }
+}}
+{{#notifications}}
+    <tr data-preference-key="{{preferencekey}}">
+        <th>{{displayname}}</th>
+        <td class="align-bottom">
+            {{#str}} enabled, core_message {{/str}}
+        </td>
+    </tr>
+    {{#processors}}
+        {{> message/message_preferences_notification_processor }}
+    {{/processors}}
+{{/notifications}}

message/templates/message_preferences_notification_processor.mustache

@@ -0,0 +1,49 @@
+{{!
+    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_preferences_notification_processor
+
+    The message preferences page
+
+    Classes required for JS:
+    * disabled
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * displayname   The notification display name
+    * preferencekey The unique key to identify this preference
+    * processors    The list of processors for this notification
+
+    Example context (json):
+    {
+        "displayname": "Notices about minor problems",
+        "preferencekey": "message_provider_moodle_notices",
+        "processors": [
+            {
+                "displayname": "Popup notification",
+                "name": "popup",
+                "locked": 0,
+                "userconfigured": 1,
+                "enabled": 1
+            }
+        ]
+    }
+}}
+
+{{> core_message/notification_preferences_component_notification }}

message/templates/notification_preferences.mustache

@@ -0,0 +1,105 @@
+{{!
+    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/notification_preferences
+
+    The list of notifications for the notification preferences page
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * userid The logged in user id
+    * disableall If the user has disabled notifications
+    * components The list of notification components
+
+    Example context (json):
+    {
+        "userid": 1,
+        "disableall": 0,
+        "processors": [
+            {
+                "displayname": "Popup notification",
+                "name": "popup",
+                "hassettings": 1,
+                "userid": 3,
+                "contextid": 3
+            }
+        ],
+        "components": [
+            {
+                "displayname": "System",
+                "colspan": 2,
+                "hasnotifications": 1,
+                "notifications": [
+                    {
+                        "displayname": "Notices about minor problems",
+                        "preferencekey": "message_provider_moodle_notices",
+                        "processors": [
+                            {
+                                "displayname": "Popup notification",
+                                "name": "popup",
+                                "locked": 0,
+                                "userconfigured": 1,
+                                "enabled": 1,
+                                "enabledlabel": "Sending Assignment enabled status"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}}
+<div class="preferences-page-container">
+    <h2>{{#str}} notificationpreferences, message {{/str}}</h2>
+    <div class="checkbox-container" data-region="disable-notification-container">
+        <input id="disable-notifications"
+           type="checkbox"
+           data-disable-notifications
+           {{#disableall}}checked{{/disableall}} />
+        <label for="disable-notifications">{{#str}} disableall, message {{/str}}</label>
+        {{> core/loading }}
+    </div>
+    <div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
+        <table class="table preference-table">
+            <thead>
+                <tr>
+                    <th>{{{displayname}}}</th>
+                    {{#processors}}
+                        {{> message/notification_preferences_processor }}
+                    {{/processors}}
+                </tr>
+            </thead>
+            <tbody>
+                {{#components}}
+                    {{> message/notification_preferences_component }}
+                {{/components}}
+            </tbody>
+        </table>
+    </div>
+</div>
+{{#js}}
+require(['jquery', 'core_message/preferences_notifications_list_controller'],
+    function($, Controller) {
+
+    new Controller($('.preferences-container'));
+});
+{{/js}}

message/templates/notification_preferences_component.mustache

@@ -0,0 +1,64 @@
+{{!
+    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/notification_preferences_component
+
+    The notification preferences page
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * displayname   The component display name
+    * colspan       The number of columns the row should span
+    * hasnotifications Whether any notifications exist
+    * notifications The list of notifications
+
+    Example context (json):
+    {
+        "displayname": "System",
+        "colspan": 2,
+        "hasnotifications": 1,
+        "notifications": [
+            {
+                "displayname": "Notices about minor problems",
+                "preferencekey": "message_provider_moodle_notices",
+                "processors": [
+                    {
+                        "displayname": "Popup notification",
+                        "name": "popup",
+                        "locked": 0,
+                        "userconfigured": 1,
+                        "enabled": 0,
+                        "enabledlabel": "Sending Assignment enabled status"
+                    }
+                ]
+            }
+        ]
+    }
+}}
+{{#hasnotifications}}
+    <tr>
+        <th colspan="{{{colspan}}}">{{{displayname}}}</th>
+    </tr>
+    {{#notifications}}
+        {{> message/notification_preferences_component_notification }}
+    {{/notifications}}
+{{/hasnotifications}}

message/templates/notification_preferences_component_notification.mustache

@@ -0,0 +1,76 @@
+{{!
+    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/notification_preferences_component_notification
+
+    The notification preferences page
+
+    Classes required for JS:
+    * disabled
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * displayname   The notification display name
+    * preferencekey The unique key to identify this preference
+    * processors    The list of processors for this notification
+
+    Example context (json):
+    {
+        "displayname": "Notices about minor problems",
+        "preferencekey": "message_provider_moodle_notices",
+        "processors": [
+            {
+                "displayname": "Popup notification",
+                "name": "popup",
+                "locked": 0,
+                "userconfigured": 1,
+                "enabled": 1,
+                "enabledlabel": "Sending Assignment enabled status"
+            }
+        ]
+    }
+}}
+<tr class="preference-row" data-region="preference-row" data-preference-key="{{{preferencekey}}}">
+    <td class="preference-name">{{{displayname}}}</td>
+    {{#processors}}
+        <td {{^userconfigured}}class="disabled"{{/userconfigured}} data-processor-name="{{name}}">
+            {{#locked}}
+                <div class="dimmed_text" title="{{lockedlabel}}">{{{lockedmessage}}}</div>
+            {{/locked}}
+            {{^locked}}
+                <form>
+                    <div class="preference-state" data-preference="{{{preferencekey}}}_{{{name}}}">
+                        <div class="custom-control custom-switch">
+                            <input type="checkbox"
+                                id="{{{preferencekey}}}_{{{name}}}"
+                                name="{{{preferencekey}}}_{{{name}}}"
+                                class="custom-control-input notification_enabled{{#disableall}} disabled{{/disableall}}"
+                                {{#disableall}} disabled="true" {{/disableall}}
+                                {{#enabled}}checked{{/enabled}}
+                            >
+                            <label for="{{{preferencekey}}}_{{{name}}}" class="custom-control-label"
+                                title="{{enabledlabel}}" >
+                            </label>
+                        </div>
+                    </div>
+                </form>
+            {{/locked}}
+        </td>
+    {{/processors}}
+</tr>

message/templates/notification_preferences_processor.mustache

@@ -0,0 +1,67 @@
+{{!
+    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/notification_preferences_processor
+
+    The list of notifications for the message preferences page
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * displayname   The display name for the processor
+    * name          The name of the processor
+    * hassettings   If the processor has settings to configure
+    * userid        The current user id
+    * contextid     The current context id
+
+    Example context (json):
+    {
+        "displayname": "Popup notification",
+        "name": "popup",
+        "hassettings": 1,
+        "userid": 3,
+        "contextid": 3
+    }
+}}
+<th {{^userconfigured}}class="unconfigured"{{/userconfigured}} data-processor-name="{{name}}">
+    {{#hassettings}}
+        <a href="#"
+            data-processor-setting
+            data-user-id="{{userid}}"
+            data-context-id="{{contextid}}"
+            data-name="{{name}}"
+            role="button">
+
+            {{< core/hover_tooltip }}
+                {{$anchor}}
+                    <span class="config-warning" title="{{#str}} requiresconfiguration, message {{/str}}">
+                        {{#pix}} i/risk_xss, core {{/pix}}
+                    </span>
+                {{/anchor}}
+                {{$tooltip}}{{#str}} requiresconfiguration, message {{/str}}{{/tooltip}}
+            {{/ core/hover_tooltip }}
+            {{displayname}} {{#pix}} i/settings {{/pix}}
+        </a>
+    {{/hassettings}}
+    {{^hassettings}}
+        {{displayname}}
+    {{/hassettings}}
+</th>

message/templates/preferences_processor.mustache

@@ -0,0 +1,60 @@
+{{!
+    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/preferences_processor
+
+    The message processor configuration block for the preferences page
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * None
+
+    Context variables required for this template:
+    * userid The logged in user id
+    * displayname The display name for the processor form
+    * name The name of the processor
+    * formhtml The form HTML
+
+    Example context (json):
+    {
+        "userid": 1,
+        "displayname": "Email",
+        "name": "email",
+        "formhtml": "<input name='test' type='text' />"
+    }
+}}
+<h4>{{displayname}}</h4>
+<div class="processor-container"
+    data-user-id="{{userid}}"
+    data-processor-name="{{name}}"
+    data-processor-id="{{uniqid}}">
+
+    <div class="loading-container">
+        <div class="vertical-align"></div>
+        {{> core/loading }}
+    </div>
+    <form>
+        {{{formhtml}}}
+    </form>
+</div>
+{{#js}}
+require(['jquery', 'core_message/preferences_processor_form'], function($, ProcessorForm) {
+    new ProcessorForm($('[data-processor-id="{{uniqid}}"]'));
+});
+{{/js}}

message/templates/remove_contact_button.mustache

@@ -0,0 +1,39 @@
+{{!
+    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/remove_contact_button
+
+    Template for the contents of the add contact button on the user's profile page.
+
+    Context variables required for this template:
+    * displaytextlabel - Whether to display text next to the action icon.
+
+    Example context (json):
+    {
+        "displaytextlabel": true
+    }
+}}
+<span>
+    {{^displaytextlabel}}
+        {{#pix}} t/removecontact, core, {{#str}} removefromyourcontacts, message {{/str}} {{/pix}}
+    {{/displaytextlabel}}
+    {{#displaytextlabel}}
+        {{#pix}} t/removecontact, core {{/pix}}
+        <span class="header-button-title">{{#str}} removefromyourcontacts, message {{/str}}</span>
+    {{/displaytextlabel}}
+</span>
+{{> core/loading }}

message/templates/send_bulk_message.mustache

@@ -0,0 +1,41 @@
+{{!
+    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/send_bulk_message
+
+    Template for the send bulk message modal.
+
+    Context variables required for this template:
+      None
+
+    Example context (json):
+    {
+    }
+}}
+<form>
+<p>
+<label for="bulk-message">
+<span class="sr-only">{{#str}}message, core_message{{/str}}</span>
+</label>
+<textarea id="bulk-message" rows="3" data-max-rows="10" data-auto-rows="true" cols="30" class="form-control"></textarea>
+</p>
+</form>
+{{#js}}
+require(['core/auto_rows'], function(AutoRows) {
+    AutoRows.init(document.getElementById('bulk-message'));
+});
+{{/js}}