blob: c0200afec50aad564cd5e10a3c391d8b30ef52ee (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
<div class="slide-up space-y-6">
<div class="glass rounded-xl glow-border">
<div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
<h2 class="text-sm font-medium text-zinc-200">All Mailboxes</h2>
<div class="flex items-center gap-3">
<span class="text-xs text-zinc-600">{{ total }} total</span>
{% url "mail.mailboxes.new" as new_mailbox_path %}
<a href="{{ new_mailbox_path }}" hx-get="{{ new_mailbox_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="btn-small">New Mailbox</a>
</div>
</div>
{% if items %}
<div class="divide-y divide-white/[0.04]">
{% for mailbox in items %}
<div class="flex items-center justify-between px-5 py-3">
<div class="flex items-center gap-3">
{% url "mail.mailbox" address=mailbox.Address as mailbox_path %}
<a href="{{ mailbox_path }}" hx-get="{{ mailbox_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="flex items-center gap-3 hover:opacity-80 transition-opacity duration-150">
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-accent-500/10">
<svg class="w-4 h-4 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h2.21a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
</svg>
</div>
<div>
<p class="text-sm text-zinc-200">{{ mailbox.Address }}</p>
<p class="text-xs text-zinc-600">{{ mailbox.User.DisplayName }}</p>
</div>
</a>
</div>
<div class="flex items-center gap-4">
{% url "mail.mailboxes.edit" id=mailbox.ID as edit_mailbox_path %}
<a href="{{ edit_mailbox_path }}" hx-get="{{ edit_mailbox_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-xs text-zinc-600 hover:text-zinc-300 transition-colors duration-150">Edit</a>
{% url "mail.mailboxes.delete" id=mailbox.ID as delete_mailbox_path %}
<button data-confirm-trigger data-confirm-title="Delete {{ mailbox.Address }}" data-confirm-message="This mailbox and all its emails will be permanently removed. This action cannot be undone." data-confirm-action="{{ delete_mailbox_path }}" class="text-xs text-zinc-600 hover:text-red-400 transition-colors duration-150">Delete</button>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="flex flex-col items-center justify-center py-16 text-center">
<div class="flex items-center justify-center w-12 h-12 rounded-2xl bg-surface-800 mb-4">
<svg class="w-6 h-6 text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h2.21a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
</svg>
</div>
<p class="text-sm text-zinc-400">No mailboxes yet</p>
<p class="mt-1 text-xs text-zinc-600">Create a mailbox to get started</p>
</div>
{% endif %}
</div>
<div id="confirm-modal" class="fixed inset-0 z-50 hidden">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" data-confirm-backdrop></div>
<div class="flex items-center justify-center min-h-screen p-4">
<div class="relative glass rounded-xl glow-border w-full max-w-sm p-6 space-y-4">
<div class="flex items-center gap-3">
<div class="flex items-center justify-center w-10 h-10 rounded-xl bg-red-500/10">
<svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
</svg>
</div>
<h3 id="confirm-title" class="text-sm font-medium text-zinc-100"></h3>
</div>
<p id="confirm-message" class="text-xs text-zinc-400 leading-relaxed"></p>
<div class="flex items-center justify-end gap-3 pt-2">
<button data-confirm-cancel class="px-4 py-2 text-xs text-zinc-400 hover:text-zinc-200 rounded-lg bg-surface-800 border border-white/[0.06] hover:border-white/[0.1] transition-all duration-150">Cancel</button>
<button id="confirm-action" class="px-4 py-2 text-xs text-white rounded-lg bg-red-500/80 hover:bg-red-500 border border-red-400/20 transition-all duration-150">Delete</button>
</div>
</div>
</div>
</div>
</div>
|
