{include file="_partials/head.tpl"}

<div class="page-head">
  <div>
    <h1>{lang key="admin.notifications"}</h1>
    <p class="muted">{lang key="admin.notif_page_hint"}</p>
  </div>
  [if {notifications}]
  <div class="actions">
    <button type="button" class="btn btn-secondary" data-notif-page-clear>{icon name="check" size="16"} {lang key="admin.notif_mark_all_read"}</button>
  </div>
  [/if]
</div>

<div class="notif-page" data-notif-page>
  [if {notifications}]
  <nav class="tabs-nav notif-page-filters">
    <button type="button" class="tabs-btn active" data-notif-filter="all">{lang key="admin.notif_filter_all"}</button>
    <button type="button" class="tabs-btn" data-notif-filter="unread">{lang key="admin.notif_filter_unread"}</button>
    <button type="button" class="tabs-btn" data-notif-filter="read">{lang key="admin.notif_filter_read"}</button>
  </nav>

  <ul class="notif-page-list">
    [foreach var="notifications" as="n"]
      <li class="notif-item notif-page-item" data-notif-id="{n.id}">
        [if {n.url}]<a class="notif-link" href="{n.url}">[else]<div class="notif-link">[/if]
          <div class="notif-title">{n.title}</div>
          [if {n.text}]<div class="notif-text">{n.text}</div>[/if]
          [if {n.time}]<div class="notif-time muted">{n.time}</div>[/if]
        [if {n.url}]</a>[else]</div>[/if]
        <button type="button" class="notif-toggle-read" data-notif-toggle-read
                data-label-read="{lang key="admin.notif_mark_read"}"
                data-label-unread="{lang key="admin.notif_mark_unread"}"
                title="{lang key="admin.notif_mark_read"}" aria-label="{lang key="admin.notif_mark_read"}">{icon name="check" size="16"}</button>
      </li>
    [/foreach]
  </ul>
  <div class="notif-empty" data-notif-filter-empty hidden>{lang key="admin.no_notifications"}</div>
  [else]
  <div class="notif-empty">{lang key="admin.no_notifications"}</div>
  [/if]
</div>

{include file="_partials/foot.tpl"}
