{{!
    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_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}}{{!
        }}{{^unreadcount}} {{#str}} shownotificationwindownonew, message {{/str}} {{/unreadcount}} {{!
        }}{{#unreadcount}} {{#str}} shownotificationwindowwithcount, message, {{.}} {{/str}} {{/unreadcount}} {{!
    }}{{/togglelabel}}
    {{$togglecontent}}
        <i class="icon fa-regular fa-bell" title="{{#str}} togglenotificationmenu, message {{/str}}"></i>
        <div
            class="count-container {{^unreadcount}}hidden{{/unreadcount}}"
            data-region="count-container"
            aria-hidden=true
        >
            {{unreadcount}}
        </div>
    {{/togglecontent}}

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

    {{$headertext}}{{#str}} notifications, message {{/str}}{{/headertext}}
    {{$headeractions}}
        <a class="mark-all-read-button"
           href="#"
           title="{{#str}} markallread {{/str}}"
           data-action="mark-all-read"
           role="button"
           aria-label="{{#str}} markallread {{/str}}">
            <span class="normal-icon">{{#pix}} t/markasread, core {{/pix}}</span>
            {{> core/loading }}
        </a>
        {{# urls.preferences }}
            <a href="{{{ . }}}"
               title="{{#str}} notificationpreferences, message {{/str}}"
               aria-label="{{#str}} notificationpreferences, message {{/str}}">
                {{#pix}} i/settings, core {{/pix}}</a>
        {{/ urls.preferences }}
    {{/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}}
