{% extends "base.html" %}
{% from "_macros.html" import icon %}
{% block title %}Notifications{% endblock %}
{% block content %}
<h1 class="page-title">Notifications</h1>

<div class="notif-enable" id="notifEnable" hidden>
  <button class="btn btn-outline btn-block" type="button" id="enableNotifBtn">
    {{ icon('bell', 'ico-sm') }} Turn on push notifications</button>
  <p class="muted small" id="notifEnableHint">Get notified on this device even when OnIt is closed.</p>
</div>

{% if not notifications %}
  <div class="empty">
    <div class="empty-icon">{{ icon('bell') }}</div>
    <p>No notifications yet.</p>
  </div>
{% else %}
  {% for n in notifications %}
    {% set link = url_for('tasks.detail', task_id=n.task_id) if n.task_id else url_for('notifications.inbox') %}
    <a class="notif {{ 'unread' if not n.read }}" href="{{ link }}">
      <span class="notif-ico notif-{{ n.type }}">
        {{ icon('check' if n.type == 'completed' else 'plus', 'ico-sm') }}</span>
      <span class="notif-main">
        <span class="notif-title">{{ n.title }}</span>
        <span class="notif-body">{{ n.body }}</span>
        <span class="notif-time">{{ n.created_at | nicedatetime }}</span>
      </span>
    </a>
  {% endfor %}
{% endif %}
{% endblock %}