aboutsummaryrefslogtreecommitdiff
path: root/templates/domains/htmx/tlds.htmx.django
blob: 13705d80c2fdea9ba60c8d4dd505a151a0ba62c1 (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
<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">TLDs</h2>
            <div class="flex items-center gap-3">
                <span class="text-xs text-zinc-600">{{ tlds|length }} total</span>
                {% url "domains.tlds.new" as new_tld_path %}
                <a href="{{ new_tld_path }}" hx-get="{{ new_tld_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="btn-small">New TLD</a>
            </div>
        </div>
        {% if tlds %}
        <div class="divide-y divide-white/[0.04]">
            {% for tld in tlds %}
            <div class="flex items-center justify-between px-5 py-3">
                <div class="flex items-center gap-3">
                    <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="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-sm text-zinc-200">.{{ tld.Name }}</p>
                        {% if tld.IsDefault %}
                        <p class="text-xs text-zinc-600">Default</p>
                        {% else %}
                        <p class="text-xs text-zinc-600">Custom</p>
                        {% endif %}
                    </div>
                </div>
                {% if not tld.IsDefault %}
                <div class="flex items-center gap-4">
                    {% url "domains.tlds.edit" id=tld.ID as edit_tld_path %}
                    <a href="{{ edit_tld_path }}" hx-get="{{ edit_tld_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 "domains.tlds.delete" name=tld.Name as delete_tld_path %}
                    <button data-confirm-trigger data-confirm-title="Delete .{{ tld.Name }}" data-confirm-message="This TLD and all associated data will be permanently removed. This action cannot be undone." data-confirm-action="{{ delete_tld_path }}" class="text-xs text-zinc-600 hover:text-red-400 transition-colors duration-150">Delete</button>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="flex flex-col items-center justify-center py-16 text-center">
            <p class="text-sm text-zinc-400">No TLDs configured</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>