{{!
    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 message_output_popup/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):
    {
        "userid": 3,
        "urls": {
            "preferences": "http://www.moodle.com"
        }
    }

}}
{{< core/popover_region }}
    {{$classes}}popover-region-messages{{/classes}}
    {{$attributes}}id="nav-message-popover-container" data-userid="{{userid}}"{{/attributes}}

    {{$togglelabel}}{{#str}} showmessagewindownonew, message {{/str}}{{/togglelabel}}
    {{$togglecontent}}
        {{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
        <div class="count-container hidden" data-region="count-container"></div>
    {{/togglecontent}}

    {{$containerlabel}}{{#str}} notificationwindow, message {{/str}}{{/containerlabel}}

    {{$headertext}}{{#str}} messages, message {{/str}}{{/headertext}}
    {{$headeractions}}
        <div class="newmessage-link">
            <a href="{{{urls.writeamessage}}}">{{#str}} newmessage, message {{/str}}
            </a>
        </div>
        <a class="mark-all-read-button"
           href="#"
           role="button"
           title="{{#str}} markallread {{/str}}"
           data-action="mark-all-read">
            <span class="normal-icon">{{#pix}} t/markasread, core, {{#str}} markallread {{/str}} {{/pix}}</span>
            {{> core/loading }}
        </a>
        <a href="{{{urls.preferences}}}"
           title="{{#str}} messagepreferences, message {{/str}}">
            {{#pix}} i/settings, core, {{#str}} messagepreferences, message {{/str}} {{/pix}}
        </a>
    {{/headeractions}}

    {{$content}}
        <div class="messages" data-region="messages" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
        <div class="empty-message" data-region="empty-message" tabindex="0">{{#str}} nomessages, message {{/str}}</div>
    {{/content}}
{{/ core/popover_region }}
{{#js}}
require(['jquery', 'message_popup/message_popover_controller'], function($, controller) {
    var container = $('#nav-message-popover-container');
    var controller = new controller(container);
    controller.registerEventListeners();
    controller.registerListNavigationEventListeners();
});
{{/js}}