{{!
    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/notification_popover

    This template will render the notification 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-notifications{{/classes}}
    {{$attributes}}id="nav-notification-popover-container" data-userid="{{userid}}"{{/attributes}}

    {{$togglelabel}}{{#str}} shownotificationwindownonew, message {{/str}}{{/togglelabel}}
    {{$togglecontent}}
        <i class="slicon-bell" title="{{#str}} togglenotificationmenu, message {{/str}}"></i>
        <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container">{{unreadcount}}</div>
    {{/togglecontent}}

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

    {{$headertext}}{{#str}} notifications, message {{/str}}{{/headertext}}
    {{$headeractions}}
        {{< core/hover_tooltip }}
            {{$anchor}}
                <a class="mark-all-read-button"
                    href="#"
                    title="{{#str}} markallread {{/str}}"
                    data-action="mark-all-read"
                    role="button">
                    <span class="normal-icon"><i class="slicon-check" alt="{{#str}} markallread {{/str}}"></i></span>
                    {{> core/loading }}
                </a>
            {{/anchor}}
            {{$tooltip}}{{#str}} markallread {{/str}}{{/tooltip}}
        {{/ core/hover_tooltip }}
        {{< core/hover_tooltip }}
            {{$anchor}}
                <a href="{{{urls.preferences}}}"
                    title="{{#str}} notificationpreferences, message {{/str}}">
                    <i class="slicon-settings" alt="{{#str}} notificationpreferences, message {{/str}}"></i>
                </a>
            {{/anchor}}
            {{$tooltip}}{{#str}} notificationpreferences, message {{/str}}{{/tooltip}}
        {{/ core/hover_tooltip }}
    {{/headeractions}}

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