{{!
    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 theme_thinkera/notification_content_item

    One notification in the bell's panel. Overrides message_popup/notification_content_item for two reasons:

    1. Core puts «view the full notification» inside the link that opens the notification. An <a> inside an <a>
       is not valid HTML, so the browser lifts the inner one out and drops it after the row — which is why the
       panel read as a stack of loose lines. Here it is a sibling, where the parser was putting it anyway.
    2. A notification with no mark of its own is a line of text. Each row now opens with an icon tile, and an
       unread one carries a dot, so the panel can be read at a glance instead of word by word.

    Everything the popover's JavaScript needs is unchanged: the container's data-region and data-id, the
    content-item-link action on the link, and the view-more action.

    Context variables required for this template:
    * contexturl A link to the notification resource
    * read If the notification is read or not
    * subject The subject text
    * id Notification id
    * iconurl The URL for the notification icon
    * shortenedsubject A shortened version of subject text
    * timecreatedpretty Pretty formatted time stamp
    * viewmoreurl The link to the full notification

    Example context (json):
    {
        "contexturl": "https://thinkera.academy",
        "read": false,
        "subject": "New sign in to your account",
        "id": 1,
        "iconurl": "",
        "shortenedsubject": "New sign in to your account",
        "timecreatedpretty": "5 minutes ago",
        "viewmoreurl": "https://thinkera.academy"
    }
}}
<div class="content-item-container notification tk-notif {{^read}}unread{{/read}}"
    data-region="notification-content-item-container"
    data-id="{{id}}"
    role="listitem">

    {{#contexturl}}
    <a class="context-link tk-notif-link" href="{{{.}}}" data-action="content-item-link"
    {{/contexturl}}
    {{^contexturl}}
    <div class="tk-notif-link" tabindex="0"
    {{/contexturl}}
        {{#read}}aria-label="{{subject}}"{{/read}}
        {{^read}}aria-label="{{#str}} unreadnotification, message, {{subject}} {{/str}}"{{/read}}>

        <span class="tk-notif-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="20" height="20" focusable="false">
                <path d="M12 3.2a5.6 5.6 0 0 0-5.6 5.6c0 3.2-.8 4.9-1.7 6a.8.8 0 0 0 .6 1.3h13.4a.8.8 0 0 0 .6-1.3c-.9-1.1-1.7-2.8-1.7-6A5.6 5.6 0 0 0 12 3.2z"
                      fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                <path d="M9.8 19a2.3 2.3 0 0 0 4.4 0" fill="none" stroke="currentColor" stroke-width="1.8"
                      stroke-linecap="round"/>
            </svg>
        </span>

        <span class="tk-notif-body">
            <span class="content-item-body">
                <span class="notification-message">{{shortenedsubject}}</span>
            </span>
            <span class="content-item-footer">
                <span class="timestamp">{{timecreatedpretty}}</span>
            </span>
        </span>

        {{^read}}<span class="tk-notif-dot" aria-hidden="true"></span>{{/read}}

    {{#contexturl}}
    </a>
    {{/contexturl}}
    {{^contexturl}}
    </div>
    {{/contexturl}}

    {{#viewmoreurl}}
    <a href="{{{.}}}" class="view-more tk-notif-more" data-action="view-more">{{#str}} viewfullnotification, message {{/str}}</a>
    {{/viewmoreurl}}
</div>