{% extends "themis/base.html" %}

{% block title %}Notifications — {{ themis_app_name }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold">Notifications</h1>
        <div class="flex gap-2">
            {% if include_read %}
            <a href="{% url 'themis:notification-list' %}"
               class="btn btn-ghost btn-sm">Show unread only</a>
            {% else %}
            <a href="{% url 'themis:notification-list' %}?include_read=1"
               class="btn btn-ghost btn-sm">Show all</a>
            {% endif %}

            {% if unread_count %}
            <form method="post" action="{% url 'themis:notification-mark-all-read' %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary btn-sm">
                    Mark all read ({{ unread_count }})
                </button>
            </form>
            {% endif %}
        </div>
    </div>

    {% if notifications %}
    <div class="space-y-3">
        {% for notification in notifications %}
        <div class="card bg-base-200 {% if not notification.is_read %}border-l-4 border-{{ notification.level }}{% endif %}">
            <div class="card-body p-4">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="badge {{ notification.level_badge_class }} badge-sm">
                                {{ notification.get_level_display }}
                            </span>
                            <h3 class="font-semibold text-sm truncate">
                                {{ notification.title }}
                            </h3>
                            {% if not notification.is_read %}
                            <span class="badge badge-primary badge-xs">New</span>
                            {% endif %}
                        </div>

                        {% if notification.message %}
                        <p class="text-sm opacity-70 mb-2">{{ notification.message }}</p>
                        {% endif %}

                        <div class="flex items-center gap-3 text-xs opacity-50">
                            <span>{{ notification.created_at|timesince }} ago</span>
                            {% if notification.source_app %}
                            <span>from {{ notification.source_app }}</span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="flex gap-1 flex-shrink-0">
                        {% if notification.url %}
                        <form method="post"
                              action="{% url 'themis:notification-mark-read' notification.pk %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-primary btn-xs"
                                    title="Go to link">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3"
                                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          stroke-width="2"
                                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                </svg>
                            </button>
                        </form>
                        {% elif not notification.is_read %}
                        <form method="post"
                              action="{% url 'themis:notification-mark-read' notification.pk %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-ghost btn-xs"
                                    title="Mark as read">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3"
                                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </button>
                        </form>
                        {% endif %}

                        <form method="post"
                              action="{% url 'themis:notification-dismiss' notification.pk %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-ghost btn-xs"
                                    title="Dismiss">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3"
                                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="card bg-base-200">
        <div class="card-body text-center py-12">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto opacity-30 mb-4"
                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
            <p class="opacity-60">
                {% if include_read %}
                No notifications found.
                {% else %}
                No unread notifications.
                <a href="{% url 'themis:notification-list' %}?include_read=1"
                   class="link link-primary">Show all notifications</a>
                {% endif %}
            </p>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}