75 lines
3.8 KiB
HTML
75 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Mark All as Read" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="flex justify-center">
|
|
<div class="w-full max-w-2xl">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 text-center">
|
|
<div class="mb-6">
|
|
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto">
|
|
<i data-lucide="check-circle-2" class="w-12 h-12 text-green-600"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="text-2xl font-bold text-gray-900 mb-3">{{ title }}</h4>
|
|
<p class="text-gray-600 mb-6">{{ message }}</p>
|
|
|
|
{% if unread_count > 0 %}
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-5 mb-6 text-left">
|
|
<h6 class="text-lg font-bold text-blue-800 flex items-center gap-2 mb-3">
|
|
<i data-lucide="info" class="w-5 h-5"></i>
|
|
{% trans "What this will do" %}
|
|
</h6>
|
|
<p class="text-blue-700 mb-3">
|
|
{% blocktrans count count=unread_count %}
|
|
This will mark {{ count }} unread notification as read.
|
|
{% plural %}
|
|
This will mark all {{ count }} unread notifications as read.
|
|
{% endblocktrans %}
|
|
</p>
|
|
<p class="text-blue-700">
|
|
{% trans "You can still view all notifications in your notification list, but they won't appear as unread." %}
|
|
</p>
|
|
</div>
|
|
{% else %}
|
|
<div class="bg-green-50 border border-green-200 rounded-xl p-5 mb-6 text-left">
|
|
<h6 class="text-lg font-bold text-green-800 flex items-center gap-2 mb-2">
|
|
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
{% trans "All caught up!" %}
|
|
</h6>
|
|
<p class="text-green-700">
|
|
{% trans "You don't have any unread notifications to mark as read." %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if unread_count > 0 %}
|
|
<form method="post" class="inline-flex gap-3">
|
|
{% csrf_token %}
|
|
<button type="submit" class="inline-flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white font-semibold px-6 py-2.5 rounded-xl transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="check-circle-2" class="w-4 h-4"></i>
|
|
{% trans "Yes, Mark All as Read" %}
|
|
</button>
|
|
<a href="{{ cancel_url }}" class="inline-flex items-center gap-2 border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium px-6 py-2.5 rounded-xl transition">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</form>
|
|
{% else %}
|
|
<a href="{{ cancel_url }}" class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-semibold px-6 py-2.5 rounded-xl transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
{% trans "Back to Notifications" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
{% endblock %} |