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

{% block content %}

<div class="relative flex min-h-screen items-center justify-center overflow-hidden">
    <div class="px-6 py-16 text-center font-semibold before:container before:absolute before:left-1/2 before:-translate-x-1/2 before:rounded-full before:bg-[linear-gradient(180deg,#4361EE_0%,rgba(67,97,238,0)_50.73%)] before:aspect-square before:opacity-10 md:py-20">
        <div class="relative">
            <img :src="$store.app.theme === 'dark' || $store.app.isDarkMode ? `{% static 'assets/images/error/maintenence-dark.svg' %}` : `{% static 'assets/images/error/maintenence-light.svg' %}`" alt="maintenence" class="mx-auto -mt-10 w-full max-w-xs object-cover md:-mt-20 md:max-w-lg" />
            <div class="-mt-8 font-semibold dark:text-white">
                <h2 class="mb-5 text-3xl font-bold text-primary md:text-5xl">Under Maintenance</h2>
                {% comment %} <h4 class="mb-7 text-xl sm:text-2xl">Thank you for visiting us.</h4> {% endcomment %}
                <p class="text-base">
                    We are currently working on making some improvements <br class="hidden sm:block" />to give you better user experience and services. <br />
                    <br />Please visit us again shortly.
                </p>
            </div>
            <a href="{% url "home" %}" target="_blank" class="btn btn-gradient mx-auto !mt-7 w-max border-0 uppercase shadow-none">Home</a>
        </div>
        <br/>
        <br/>

        <div class="text-center dark:text-white">
            Our
            {% if latest_privacy_policy%}
            <a href="{{ latest_privacy_policy.document.url}}" target="_blank" class="text-primary underline transition hover:text-black dark:hover:text-white">Terms and Conditions</a> and 
            {% endif %}
            {% if latest_terms_and_conditions %}
            <a href="{{latest_terms_and_conditions.document.url}}" target="_blank" class="text-primary underline transition hover:text-black dark:hover:text-white">Privacy Policy</a > apply
            {% endif %}
            </div>
            
            
            

        <br/>
        <br/>
        <div class="text-center dark:text-white">
            Need assistance? Contact us  at
            {% if webdata.email %}
            <a href="mailto:{{webdata.email}}" target="_blank" class="text-primary underline transition hover:text-black dark:hover:text-white">{{webdata.email}}</a>
            {% endif %}
            or call
            {% if webdata.phone %}
            <a href="tel:{{webdata.phone}}" target="_blank" class="text-primary underline transition hover:text-black dark:hover:text-white">{{webdata.phone}}</a>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}