{% extends 'backend/components/layouts/auth.html' %} 
{% load static %} 
{% block content %}

<div x-data="auth">
    <div class="absolute inset-0">
        <img
            src="{% static 'assets/images/auth/bg-gradient.png' %}"
            alt="image"
            class="h-full w-full object-cover"
        />
    </div>

    <div
        class="relative flex min-h-screen items-center justify-center bg-[url(../images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
    >
        <img
            src="{% static 'assets/images/auth/coming-soon-object1.png' %}"
            alt="image"
            class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2"
        />
        <img
            src="{% static 'assets/images/auth/coming-soon-object2.png' %}"
            alt="image"
            class="absolute left-24 top-0 h-40 md:left-[30%]"
        />
        <img
            src="{% static 'assets/images/auth/coming-soon-object3.png' %}"
            alt="image"
            class="absolute right-0 top-0 h-[300px]"
        />
        <img
            src="{% static 'assets/images/auth/polygon-object.svg' %}"
            alt="image"
            class="absolute bottom-0 end-[28%]"
        />
        <div
            class="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]"
        >
            <div
                class="relative flex flex-col justify-center rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 px-6 lg:min-h-[758px] py-20"
            >
                
                <div class="mx-auto w-full max-w-[440px]">
                    <div class="mb-10 flex items-center">
                        <div
                            class="flex h-16 w-16 items-end justify-center overflow-hidden rounded-full bg-[#00AB55] ltr:mr-4 rtl:ml-4"
                        >
                            <img
                                src="{% static 'assets/images/auth/unlocked.png' %}"
                                class="w-full object-cover"
                                alt=""
                            />
                        </div>
                        <div class="flex-1">
                            <h4 class="text-2xl dark:text-white">SUCCESS! You have been verified</h4>
                            <p class="text-white-dark">
                                You many now proceed to Your Dashboard
                            </p>
                        </div>
                    </div>
                    <form class="space-y-5">
                        <button type="button" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]" onclick="redirectToDashboard()">
                            Dashboard
                        </button>
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function redirectToDashboard() {
        window.location.href = '{% url "Dashboard" %}';
    }
</script>

{% endblock %}