django-adminflow 1.0.0__py3-none-any.whl

adminflow/templates/admin/login.html

@@ -0,0 +1,144 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+
+{% block bodyclass %}bg-background h-full flex items-center justify-center p-4 md:p-8{% endblock %}
+
+{% block messages %}{% endblock %}
+
+{% block content %}
+<main class="w-full max-w-5xl h-[650px] flex overflow-hidden rounded-xl shadow-lg bg-surface-lowest border border-outline-variant mx-auto my-[5vh]">
+    <!-- Left Side: Decorative Enterprise panel -->
+    <section class="hidden md:flex flex-1 bg-gradient-to-br from-primary to-inverse-surface relative items-center justify-center p-12 overflow-hidden">
+        <div class="absolute top-[-10%] left-[-10%] w-64 h-64 bg-primary/20 rounded-full blur-3xl"></div>
+        <div class="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-success/10 rounded-full blur-3xl"></div>
+        <div class="relative z-10 text-center space-y-6">
+            <div class="inline-flex items-center justify-center p-5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 mb-2 shadow-xl">
+                {% if adminflow_logo_icon %}
+                    <span class="material-symbols-outlined text-white text-5xl">{{ adminflow_logo_icon }}</span>
+                {% elif adminflow_logo %}
+                    <img src="{{ adminflow_logo }}" alt="{{ adminflow_title }}" class="h-12 w-auto max-w-[140px] object-contain filter brightness-0 invert"/>
+                {% else %}
+                    <svg class="h-12 w-12 text-white fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+                    </svg>
+                {% endif %}
+            </div>
+            <h1 class="text-3xl font-extrabold text-white leading-tight font-sans">{{ adminflow_login_title|default:"Master Your Enterprise Flow" }}</h1>
+            <p class="text-xs text-white/80 max-w-sm mx-auto leading-relaxed">
+                {{ adminflow_login_subtitle|default:"A unified administrative engine built for scale, security, and developer productivity within the Django ecosystem." }}
+            </p>
+        </div>
+        
+        <div class="absolute inset-0 opacity-10 pointer-events-none">
+            <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
+                <path d="M-100 100 Q 200 300 600 100 T 1200 400" fill="none" stroke="white" stroke-width="2"></path>
+                <path d="M-100 400 Q 300 100 700 500 T 1300 200" fill="none" stroke="white" stroke-width="1.5"></path>
+            </svg>
+        </div>
+    </section>
+
+    <!-- Right Side: Login Form -->
+    <section class="flex-1 flex flex-col items-center justify-center p-8 md:p-12 bg-surface">
+        <div class="w-full max-w-sm space-y-6">
+            <!-- Brand & Header -->
+            <div class="text-center space-y-2">
+                <div class="flex justify-center">
+                    {% if adminflow_logo %}
+                        <img src="{{ adminflow_logo }}" alt="{{ adminflow_title }}" class="h-12 w-auto"/>
+                    {% else %}
+                        <div class="h-12 w-12 rounded-xl bg-primary flex items-center justify-center text-white shadow-md">
+                            <span class="material-symbols-outlined text-2xl">hub</span>
+                        </div>
+                    {% endif %}
+                </div>
+                <div>
+                    <h2 class="text-xl font-bold text-on-surface">Welcome back</h2>
+                    <p class="text-xs text-on-surface-variant">Sign in to manage {{ adminflow_title }}</p>
+                </div>
+            </div>
+
+            <!-- Form -->
+            <form action="{{ app_path }}" method="post" id="login-form" class="space-y-4">
+                {% csrf_token %}
+                
+                <!-- Username -->
+                <div class="space-y-1">
+                    <label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider" for="id_username">{% translate "Username" %}</label>
+                    <input type="text" name="username" autofocus required id="id_username" 
+                           class="w-full h-11 px-3 rounded-lg border border-outline-variant bg-surface-lowest text-on-surface text-xs focus:ring-2 focus:ring-primary/15 focus:border-primary transition-all outline-none" 
+                           placeholder="admin"/>
+                    {% if form.username.errors %}
+                        <p class="text-[11px] text-danger">{{ form.username.errors|join:", " }}</p>
+                    {% endif %}
+                </div>
+
+                <!-- Password -->
+                <div class="space-y-1">
+                    <div class="flex justify-between items-center">
+                        <label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider" for="id_password">{% translate "Password" %}</label>
+                        {% if password_reset_url %}
+                            <a href="{{ password_reset_url }}" class="text-[10px] font-bold text-primary hover:underline transition-all">Forgot?</a>
+                        {% endif %}
+                    </div>
+                    <div class="relative">
+                        <input type="password" name="password" required id="id_password" 
+                               class="w-full h-11 px-3 pr-10 rounded-lg border border-outline-variant bg-surface-lowest text-on-surface text-xs focus:ring-2 focus:ring-primary/15 focus:border-primary transition-all outline-none" 
+                               placeholder="••••••••"/>
+                        <button type="button" onclick="togglePasswordVisibility()" class="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-on-surface transition-colors focus:outline-none">
+                            <span class="material-symbols-outlined text-[18px]" id="visibilityIcon">visibility</span>
+                        </button>
+                    </div>
+                    {% if form.password.errors %}
+                        <p class="text-[11px] text-danger">{{ form.password.errors|join:", " }}</p>
+                    {% endif %}
+                </div>
+
+                <input type="hidden" name="next" value="{{ next }}"/>
+
+                <!-- Sign In Button -->
+                <button type="submit" id="btn-signin" class="w-full h-11 mt-2 bg-primary text-white rounded-lg text-xs font-bold hover:bg-primary/95 active:scale-[0.99] transition-all shadow-md flex items-center justify-center gap-2 cursor-pointer">
+                    <span id="btn-signin-text">{% translate "Sign In" %}</span>
+                </button>
+            </form>
+        </div>
+    </section>
+</main>
+
+<!-- Floating Toast Notifications -->
+{% include "admin/includes/toast.html" %}
+
+<script>
+    function togglePasswordVisibility() {
+        const passwordInput = document.getElementById('id_password');
+        const icon = document.getElementById('visibilityIcon');
+        if (passwordInput && icon) {
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                icon.textContent = 'visibility_off';
+            } else {
+                passwordInput.type = 'password';
+                icon.textContent = 'visibility';
+            }
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const loginForm = document.getElementById('login-form');
+        const signinBtn = document.getElementById('btn-signin');
+
+        if (loginForm && signinBtn) {
+            loginForm.addEventListener('submit', function() {
+                signinBtn.disabled = true;
+                signinBtn.classList.add('opacity-75', 'cursor-not-allowed', 'pointer-events-none');
+                signinBtn.innerHTML = `
+                    <svg class="animate-spin h-4 w-4 text-white inline-block shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    <span>Signing In...</span>
+                `;
+            });
+        }
+    });
+</script>
+{% endblock %}

adminflow/templates/admin/object_history.html

@@ -0,0 +1,60 @@
+{% extends "admin/base_site.html" %}
+{% load i18n admin_urls %}
+
+{% block breadcrumbs %}
+<nav class="flex items-center gap-1.5 text-xs text-on-surface-variant/70 mb-4">
+    <a href="{% url 'admin:index' %}" class="hover:text-primary transition-colors flex items-center"><span class="material-symbols-outlined text-[16px]">home</span></a>
+    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
+    <a href="{% url 'admin:app_list' app_label=opts.app_label %}" class="hover:text-primary transition-colors capitalize font-medium">{{ opts.app_config.verbose_name }}</a>
+    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
+    <a href="{% url opts|admin_urlname:'changelist' %}" class="hover:text-primary transition-colors font-bold">{{ opts.verbose_name_plural|capfirst }}</a>
+    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
+    {% if object %}
+    <a href="{% url opts|admin_urlname:'change' object.pk|admin_urlquote %}" class="hover:text-primary transition-colors font-bold">{{ object|truncatewords:"18" }}</a>
+    {% else %}
+    <span class="font-bold text-on-surface-variant">{{ object_id }}</span>
+    {% endif %}
+    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
+    <span class="text-primary font-bold">{% translate 'History' %}</span>
+</nav>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6 max-w-4xl mx-auto w-full">
+    <!-- Header Block -->
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+            <h2 class="text-xl md:text-2xl font-black text-on-surface tracking-tight">
+                {% if object %}{{ object|truncatewords:"10" }}{% else %}{{ object_id }}{% endif %} {% translate 'History' %}
+            </h2>
+            <p class="text-xs text-on-surface-variant mt-1">{% translate 'Overview of modifications and updates tracked on this object.' %}</p>
+        </div>
+    </div>
+
+    <!-- Core Model History Content Tab -->
+    <div class="module">
+      {% if action_list %}
+        <table id="change-history">
+            <thead>
+                <tr>
+                    <th scope="col">{% translate 'Date/time' %}</th>
+                    <th scope="col">{% translate 'User' %}</th>
+                    <th scope="col">{% translate 'Action' %}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for action in action_list %}
+                <tr>
+                    <th scope="row" class="font-normal">{{ action.action_time }}</th>
+                    <td>{{ action.user.get_username }}</td>
+                    <td>{{ action.change_message }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+      {% else %}
+        <p class="text-sm text-on-surface-variant">{% trans "This object doesn't have a change history." %}</p>
+      {% endif %}
+    </div>
+</div>
+{% endblock %}

adminflow/templates/admin/pagination.html

@@ -0,0 +1,30 @@
+{% load i18n %}
+<div class="px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-outline-variant bg-surface-low/50">
+    <!-- Results summary info -->
+    <div class="text-xs text-on-surface-variant font-medium">
+        <span>
+            {{ cl.result_count }} {% if cl.result_count == 1 %}{{ cl.opts.verbose_name }}{% else %}{{ cl.opts.verbose_name_plural }}{% endif %}
+        </span>
+        {% if show_all_url %}
+            <a href="{{ show_all_url }}" class="ml-2 text-primary hover:underline font-bold">{% translate "Show all" %}</a>
+        {% endif %}
+    </div>
+
+    <!-- Pager buttons -->
+    {% if pagination_required %}
+    <nav class="flex items-center gap-1.5" aria-label="{% translate 'Pagination' %}">
+        {% for i in page_range %}
+            {% if i == '.' %}
+                <span class="px-2 py-1 text-xs text-on-surface-variant font-bold">...</span>
+            {% elif i == cl.page_num %}
+                <span class="px-3 py-1.5 bg-primary text-white text-xs font-extrabold rounded-lg shadow-sm">{{ i }}</span>
+            {% else %}
+                <a href="?p={{ i }}{% if cl.is_popup %}&_popup=1{% endif %}" 
+                   class="px-3 py-1.5 bg-surface-lowest border border-outline-variant text-on-surface-variant hover:bg-surface-low transition-all text-xs font-bold rounded-lg shadow-sm">
+                    {{ i }}
+                </a>
+            {% endif %}
+        {% endfor %}
+    </nav>
+    {% endif %}
+</div>

adminflow/templates/admin/search_form.html

@@ -0,0 +1,28 @@
+{% load i18n static %}
+{% if cl.search_fields %}
+<form id="changelist-search" method="get" class="flex items-center gap-2 w-full">
+    <div class="relative flex-1 min-w-0">
+        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant opacity-60 text-sm">search</span>
+        <input type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" autofocus 
+               class="w-full pl-9 pr-3 py-1.5 rounded-lg border border-outline-variant bg-surface-low focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all text-xs outline-none" 
+               placeholder="{% translate 'Search...' %}"/>
+    </div>
+    
+    <button type="submit" class="shrink-0 px-4 py-1.5 bg-primary text-white text-xs font-bold rounded-lg hover:bg-primary/90 transition-all shadow-sm">
+        {% translate 'Search' %}
+    </button>
+    
+    {% if show_result_count %}
+        <span class="text-xs text-on-surface-variant font-medium shrink-0 hidden sm:inline-block">
+            {% blocktranslate count counter=cl.result_count %}{{ counter }} result{% plural %}{{ counter }} results{% endblocktranslate %} 
+            (<a href="?{% if cl.is_popup %}_popup=1{% endif %}" class="text-primary hover:underline">{% blocktranslate with total_count=cl.show_full_result_count %}{{ total_count }} total{% endblocktranslate %}</a>)
+        </span>
+    {% endif %}
+    
+    {% for pair in cl.params.items %}
+        {% if pair.0 != search_var %}
+            <input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}"/>
+        {% endif %}
+    {% endfor %}
+</form>
+{% endif %}

adminflow/templates/admin/submit_line.html

@@ -0,0 +1,48 @@
+{% load i18n admin_urls %}
+<div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 p-4 border border-outline-variant bg-surface-low/50 rounded-xl mt-6">
+    {% block submit-row %}
+        <!-- Delete Link (Destructive Action) -->
+        <div class="w-full sm:w-auto">
+            {% if show_delete_link and original %}
+                {% url opts|admin_urlname:'delete' original.pk|admin_urlquote as delete_url %}
+                <a href="{% add_preserved_filters delete_url %}" 
+                   class="flex items-center justify-center gap-1.5 w-full sm:w-auto px-4 py-2.5 sm:py-2 bg-rose-50 border border-rose-200 text-rose-600 rounded-lg hover:bg-rose-600 hover:text-white transition-all text-xs font-bold shadow-sm">
+                    <span class="material-symbols-outlined text-sm">delete</span>
+                    <span>{% translate "Delete" %}</span>
+                </a>
+            {% endif %}
+        </div>
+
+        <!-- Positive Actions -->
+        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full sm:w-auto">
+            {% if show_save_as_new %}
+                <button type="submit" name="_saveasnew" 
+                        class="w-full sm:w-auto text-center justify-center px-4 py-2.5 sm:py-2 bg-surface-lowest border border-outline-variant text-on-surface-variant hover:bg-surface-low rounded-lg text-xs font-bold transition-all shadow-sm">
+                    {% translate 'Save as new' %}
+                </button>
+            {% endif %}
+            
+            {% if show_save_and_add_another %}
+                <button type="submit" name="_addanother" 
+                        class="w-full sm:w-auto text-center justify-center px-4 py-2.5 sm:py-2 bg-surface-lowest border border-outline-variant text-on-surface-variant hover:bg-surface-low rounded-lg text-xs font-bold transition-all shadow-sm">
+                    {% translate 'Save and add another' %}
+                </button>
+            {% endif %}
+            
+            {% if show_save_and_continue %}
+                <button type="submit" name="_continue" 
+                        class="w-full sm:w-auto text-center justify-center px-4 py-2.5 sm:py-2 bg-surface-lowest border border-outline-variant text-on-surface-variant hover:bg-surface-low rounded-lg text-xs font-bold transition-all shadow-sm">
+                    {% translate 'Save and continue editing' %}
+                </button>
+            {% endif %}
+            
+            {% if show_save %}
+                <button type="submit" name="_save" 
+                        class="flex items-center justify-center gap-1.5 w-full sm:w-auto px-6 py-2.5 sm:py-2 bg-primary text-white rounded-lg text-xs font-bold hover:bg-primary/95 transition-all shadow-md active:scale-[0.98]">
+                    <span class="material-symbols-outlined text-sm">check_circle</span>
+                    <span>{% translate 'Save' %}</span>
+                </button>
+            {% endif %}
+        </div>
+    {% endblock %}
+</div>

adminflow/templates/admin/verify_2fa.html

@@ -0,0 +1,280 @@
+{% load i18n static adminflow_tags %}
+<!DOCTYPE html>
+<html lang="{{ LANGUAGE_CODE|default:'en-us' }}" dir="{{ LANGUAGE_BIDI|default:'ltr' }}" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% translate "Security Verification" %} | {{ adminflow_title|default:"AdminFlow" }}</title>
+    
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
+    
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+    </style>
+</head>
+<body class="h-full bg-surface text-on-surface antialiased flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+
+    <div class="sm:mx-auto sm:w-full sm:max-w-md">
+        <div class="bg-surface-lowest border border-outline-variant/60 rounded-2xl p-8 shadow-xl space-y-6">
+            
+            <!-- Header Icon & Title -->
+            <div class="text-center space-y-2">
+                <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 text-primary mb-2">
+                    <span class="material-symbols-outlined text-[32px]">verified_user</span>
+                </div>
+                <h2 class="text-xl font-bold text-on-surface">{% translate "Two-Factor Verification" %}</h2>
+                <p class="text-xs text-on-surface-variant max-w-xs mx-auto">
+                    Account: <strong class="text-on-surface">{{ user.get_username }}</strong>
+                </p>
+            </div>
+
+            <!-- 15-Minute Session Expiration Timer Banner -->
+            <div class="p-3 bg-amber-50 border border-amber-200 rounded-xl text-xs text-amber-900 flex items-center justify-between">
+                <div class="flex items-center gap-2 font-medium">
+                    <span class="material-symbols-outlined text-[18px] text-amber-600">timer</span>
+                    <span>Session Expires In:</span>
+                </div>
+                <div id="session-timer" class="font-mono font-bold text-amber-700 bg-amber-200/60 px-2 py-0.5 rounded text-xs">
+                    15:00
+                </div>
+            </div>
+
+            <!-- 2FA Method Selector Dropdown -->
+            <div class="space-y-1.5 mb-4">
+                <label class="text-[11px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider block" for="security-method-select">
+                    {% translate "Select Verification Method" %}
+                </label>
+                <div class="relative">
+                    <select id="security-method-select" onchange="switch2FAOption(this.value)"
+                            class="w-full h-11 px-4 pr-10 rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 text-xs font-bold appearance-none cursor-pointer focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all outline-none shadow-sm">
+                        {% if has_email_device %}
+                        <option value="email">📧 Email Verification Code ({{ sent_email|default:user.email }})</option>
+                        {% endif %}
+                        {% if has_totp_device %}
+                        <option value="totp">📱 Authenticator App (Google Authenticator / 1Password)</option>
+                        {% endif %}
+                        {% if has_static_device %}
+                        <option value="static">🔑 Emergency Recovery Backup Code (10 Recovery Codes)</option>
+                        {% endif %}
+                    </select>
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-slate-400">
+                        <span class="material-symbols-outlined text-[20px]">unfold_more</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Sent Email Info Banner -->
+            <div id="email-info-banner" class="p-3.5 bg-blue-50 border border-blue-200 rounded-xl text-xs text-blue-900 flex items-start gap-3" style="{% if not sent_email %}display: none;{% endif %}">
+                <span class="material-symbols-outlined text-[20px] text-blue-600 shrink-0">mark_email_read</span>
+                <div>
+                    <p class="font-bold">Check your email inbox</p>
+                    <p class="text-[11px] text-blue-700 mt-0.5">We sent a 6-digit verification code to <strong>{{ sent_email|default:user.email }}</strong>.</p>
+                </div>
+            </div>
+
+            <!-- 2FA Code Submit Form -->
+            <form id="otp-form" method="POST" action="{% url 'adminflow_verify_2fa' %}" class="space-y-5">
+                {% csrf_token %}
+
+                <div class="space-y-1.5">
+                    <label id="otp-label" class="text-[11px] font-bold text-on-surface-variant uppercase tracking-wider block" for="id_otp_token">
+                        {% translate "VERIFICATION CODE (EMAIL)" %}
+                    </label>
+                    <div class="relative">
+                        <input type="text" name="otp_token" id="id_otp_token" required autofocus autocomplete="off"
+                               class="w-full h-12 px-4 text-center rounded-xl border border-outline-variant bg-surface-lowest text-on-surface text-base font-bold font-mono tracking-[4px] focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
+                               placeholder="123456"/>
+                    </div>
+                    <p id="otp-helper-text" class="text-[11px] text-on-surface-variant text-center mt-1">
+                        Enter the 6-digit code sent to your email inbox.
+                    </p>
+                </div>
+
+                <button type="submit" id="btn-verify" style="background-color: #2563eb; color: #ffffff;" class="w-full h-12 bg-blue-600 text-white rounded-xl text-sm font-bold hover:bg-blue-700 active:scale-[0.99] transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2 cursor-pointer">
+                    <span class="material-symbols-outlined text-[20px]">lock_open</span>
+                    <span>{% translate "Verify & Log In" %}</span>
+                </button>
+            </form>
+
+            <!-- Action Links: Resend Email or Cancel -->
+            <div class="pt-4 border-t border-slate-200 flex items-center justify-between text-xs">
+                <div id="resend-form-container" style="{% if not sent_email %}display: none;{% endif %}">
+                    <form id="resend-form" method="POST" action="{% url 'adminflow_verify_2fa' %}">
+                        {% csrf_token %}
+                        <input type="hidden" name="resend_email" value="1"/>
+                        <button type="submit" id="btn-resend" class="font-bold text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1 cursor-pointer disabled:text-slate-400 disabled:no-underline disabled:cursor-not-allowed disabled:hover:text-slate-400 transition-colors">
+                            <span class="material-symbols-outlined text-[16px]" id="resend-icon">refresh</span>
+                            <span id="resend-text">Resend Email Code</span>
+                        </button>
+                    </form>
+                </div>
+
+                <a href="/admin/login/" class="font-semibold text-slate-500 hover:text-slate-800 ml-auto">
+                    ← Back to Login
+                </a>
+            </div>
+
+        </div>
+    </div>
+
+    <!-- 15-Minute Countdown & Page Refresh Alert JS Logic -->
+    <script>
+        (function() {
+            let isSubmitting = false;
+
+            // Forms flag form submission to bypass refresh alert and show loading state
+            document.querySelectorAll('form').forEach(form => {
+                form.addEventListener('submit', function() {
+                    isSubmitting = true;
+                });
+            });
+
+            const otpForm = document.getElementById('otp-form');
+            const verifyBtn = document.getElementById('btn-verify');
+            const resendForm = document.getElementById('resend-form');
+            const btnResend = document.getElementById('btn-resend');
+            const resendText = document.getElementById('resend-text');
+            const resendIcon = document.getElementById('resend-icon');
+
+            if (otpForm && verifyBtn) {
+                otpForm.addEventListener('submit', function() {
+                    verifyBtn.disabled = true;
+                    verifyBtn.classList.add('opacity-75', 'cursor-not-allowed', 'pointer-events-none');
+                    verifyBtn.innerHTML = `
+                        <svg class="animate-spin h-5 w-5 text-white inline-block shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        <span>Verifying Code...</span>
+                    `;
+                });
+            }
+
+            if (resendForm && btnResend) {
+                resendForm.addEventListener('submit', function() {
+                    btnResend.disabled = true;
+                    btnResend.classList.add('opacity-75', 'cursor-not-allowed', 'pointer-events-none');
+                    btnResend.innerHTML = `
+                        <svg class="animate-spin h-4 w-4 text-blue-600 inline-block shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        <span>Sending Email Code...</span>
+                    `;
+                });
+            }
+
+            // Detect if page was refreshed/reloaded
+            const navEntries = performance.getEntriesByType && performance.getEntriesByType('navigation');
+            const isReload = navEntries && navEntries.length > 0 ? navEntries[0].type === 'reload' : (performance.navigation && performance.navigation.type === 1);
+            
+            if (isReload) {
+                // If page reloaded, redirect to login page directly
+                window.location.href = '/admin/login/?reason=refreshed';
+                return;
+            }
+
+            // 2FA Method Switcher Function
+            window.switch2FAOption = function(option) {
+                const methodSelect = document.getElementById('security-method-select');
+                if (methodSelect && methodSelect.value !== option) {
+                    methodSelect.value = option;
+                }
+
+                const emailBanner = document.getElementById('email-info-banner');
+                const resendContainer = document.getElementById('resend-form-container');
+
+                const inputLabel = document.getElementById('otp-label');
+                const inputField = document.getElementById('id_otp_token');
+                const helperText = document.getElementById('otp-helper-text');
+
+                if (option === 'email') {
+                    if (emailBanner) emailBanner.style.display = 'flex';
+                    if (resendContainer) resendContainer.style.display = 'block';
+                    if (inputLabel) inputLabel.textContent = 'VERIFICATION CODE (EMAIL)';
+                    if (inputField) { inputField.placeholder = '123456'; inputField.focus(); }
+                    if (helperText) helperText.innerHTML = 'Enter the 6-digit code sent to your email inbox.';
+                } else if (option === 'totp') {
+                    if (emailBanner) emailBanner.style.display = 'none';
+                    if (resendContainer) resendContainer.style.display = 'none';
+                    if (inputLabel) inputLabel.textContent = 'AUTHENTICATOR CODE (TOTP)';
+                    if (inputField) { inputField.placeholder = '123456'; inputField.focus(); }
+                    if (helperText) helperText.innerHTML = 'Enter the 6-digit code from <strong>Google Authenticator</strong> or <strong>1Password</strong>.';
+                } else if (option === 'static') {
+                    if (emailBanner) emailBanner.style.display = 'none';
+                    if (resendContainer) resendContainer.style.display = 'none';
+                    if (inputLabel) inputLabel.textContent = 'EMERGENCY RECOVERY CODE';
+                    if (inputField) { inputField.placeholder = 'Recovery Code'; inputField.focus(); }
+                    if (helperText) helperText.innerHTML = 'Enter one of your 10 single-use <strong>Emergency Recovery Backup Codes</strong>.';
+                }
+            };
+
+            // Auto-select initial tab based on device availability
+            const initialOption = ("{{ has_email_device }}" === "True" && "{{ sent_email }}") ? "email" : ("{{ has_totp_device }}" === "True" ? "totp" : ("{{ has_static_device }}" === "True" ? "static" : ("{{ has_email_device }}" === "True" ? "email" : "static")));
+            switch2FAOption(initialOption);
+            window.addEventListener('beforeunload', function(e) {
+                if (!isSubmitting) {
+                    const msg = "Are you sure you want to refresh? Refreshing will cancel your 2FA verification session and return you to the login page.";
+                    e.preventDefault();
+                    e.returnValue = msg;
+                    return msg;
+                }
+            });
+
+            // 60-Second Resend Email Code Cooldown Timer
+            let resendSeconds = parseInt("{{ resend_cooldown_remaining|default:60 }}", 10);
+
+            function updateResendTimer() {
+                if (resendSeconds > 0) {
+                    if (btnResend) {
+                        btnResend.disabled = true;
+                        btnResend.classList.add('opacity-50', 'pointer-events-none');
+                    }
+                    if (resendText) resendText.textContent = `Resend Code in ${resendSeconds}s`;
+                    if (resendIcon) resendIcon.classList.add('animate-spin');
+                    resendSeconds--;
+                } else {
+                    if (btnResend) {
+                        btnResend.disabled = false;
+                        btnResend.classList.remove('opacity-50', 'pointer-events-none');
+                    }
+                    if (resendText) resendText.textContent = 'Resend Email Code';
+                    if (resendIcon) resendIcon.classList.remove('animate-spin');
+                }
+            }
+            updateResendTimer();
+            setInterval(updateResendTimer, 1000);
+
+            // 15-Minute Live Countdown Timer (900 seconds)
+            let remainingSeconds = parseInt("{{ remaining_seconds|default:900 }}", 10);
+            const timerEl = document.getElementById('session-timer');
+
+            function updateTimer() {
+                if (remainingSeconds <= 0) {
+                    if (timerEl) timerEl.textContent = "00:00";
+                    isSubmitting = true;
+                    alert("Your 15-minute 2FA verification session has expired. Redirecting to login page.");
+                    window.location.href = '/admin/login/?reason=expired';
+                    return;
+                }
+
+                const mins = Math.floor(remainingSeconds / 60);
+                const secs = remainingSeconds % 60;
+                if (timerEl) {
+                    timerEl.textContent = (mins < 10 ? "0" : "") + mins + ":" + (secs < 10 ? "0" : "") + secs;
+                }
+                remainingSeconds--;
+            }
+
+            updateTimer();
+            setInterval(updateTimer, 1000);
+        })();
+    </script>
+
+    <!-- Floating Toast Notifications -->
+    {% include "admin/includes/toast.html" %}
+
+</body>
+</html>