{% 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">
                        
                        {% if messages %}
                        {% for message in messages %}
                            
                                    {% if message.tags == 'success' %}
                                    <h4 class="text-2xl dark:text-white"><strong class="ltr:mr-1 rtl:ml-1">Success!</strong>{{ message }}</h4>
                                    {% elif message.tags == 'error' %}
                                    <h4 class="text-2xl dark:text-white"><strong class="ltr:mr-1 rtl:ml-1">Error!</strong>{{ message }}</h4>
                                    {% else %}
                                    <h4 class="text-2xl dark:text-white">{{ message }}</h4>
                                    {% endif %}
                               
                        {% endfor %}
                    {% endif %}
                    </div>
                    
                    <div class="mb-10">
                        <h1 class="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">
                            Contact Developer
                        </h1>
                        <p class="text-base font-bold leading-normal text-white-dark">
                            Having Difficulties? Contact me below and I will get back to you ASAP
                        </p>
                    </div>
                        
                    <form method="POST" action="{% url 'contact-developer' %}" class="space-y-5">
                        {% csrf_token %}
                        
                        <div class="relative text-white-dark">
                            <input id="Subject" name="Subject" type="text" placeholder="Subject" class="form-input ps-10 placeholder:text-white-dark" />
                            <span class="absolute start-4 top-1/2 -translate-y-1/2">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.5" d="M15.636 6.53479C16.7878 5.38301 16.7878 3.51561 15.636 2.36383C14.4843 1.21206 12.6169 1.21206 11.4651 2.36383L10.7998 3.02911C10.8089 3.05662 10.8184 3.08451 10.8282 3.11277C11.072 3.81562 11.5321 4.737 12.3976 5.60252C13.2631 6.46803 14.1845 6.92811 14.8874 7.17196C14.9155 7.18172 14.9432 7.19113 14.9706 7.2002L15.636 6.53479Z" fill="#888EA8" />
                                        <path d="M10.8289 3.00049L10.8003 3.02913C10.8094 3.05664 10.8189 3.08453 10.8287 3.11279C11.0725 3.81564 11.5326 4.73703 12.3981 5.60254C13.2636 6.46805 14.185 6.92813 14.8879 7.17198C14.9157 7.18166 14.9433 7.19099 14.9704 7.19998L8.55008 13.6203C8.11723 14.0532 7.90076 14.2696 7.66212 14.4558C7.38061 14.6753 7.07602 14.8636 6.75373 15.0172C6.48052 15.1474 6.19014 15.2442 5.60938 15.4378L2.54688 16.4586C2.26108 16.5539 1.94599 16.4795 1.73297 16.2665C1.51995 16.0534 1.44557 15.7384 1.54084 15.4526L2.56167 12.3901C2.75526 11.8093 2.85205 11.5189 2.98226 11.2457C3.13585 10.9234 3.3241 10.6188 3.54367 10.3373C3.7298 10.0987 3.94623 9.88225 4.37906 9.44942L10.8289 3.00049Z" fill="#888EA8" />
                                    </svg>
                                </svg>
                            </span>
                        </div>
                    
                        <div class="relative text-white-dark">
                            <textarea id="Textarea" name="Textarea" rows="4" class="form-textarea resize-none ps-10 placeholder:text-white-dark" placeholder="Message"></textarea>
                            <span class="absolute start-4 top-2.5">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.5" d="M10.2216 15.3539L9.81499 16.0408C9.45262 16.653 8.54735 16.653 8.18498 16.0408L7.7784 15.3539C7.46305 14.8211 7.30537 14.5547 7.05209 14.4074C6.79882 14.2601 6.47995 14.2546 5.8422 14.2436H5.84218C4.90066 14.2274 4.31017 14.1697 3.81494 13.9645C2.89608 13.5839 2.16605 12.8539 1.78545 11.9351C1.5 11.2459 1.5 10.3723 1.5 8.625V7.875C1.5 5.41993 1.5 4.19239 2.0526 3.29063C2.36181 2.78605 2.78605 2.36181 3.29063 2.0526C4.19239 1.5 5.41993 1.5 7.875 1.5H10.125C12.5801 1.5 13.8076 1.5 14.7094 2.0526C15.214 2.36181 15.6382 2.78605 15.9474 3.29063C16.5 4.19239 16.5 5.41993 16.5 7.875V8.625C16.5 10.3723 16.5 11.2459 16.2145 11.9351C15.8339 12.8539 15.1039 13.5839 14.1851 13.9645C13.6898 14.1697 13.0993 14.2274 12.1578 14.2436H12.1578C11.52 14.2546 11.2011 14.2601 10.9479 14.4074C10.6946 14.5547 10.5369 14.8211 10.2216 15.3539Z" fill="#888EA8" />
                                    <path d="M12.75 8.25C12.75 8.66421 12.4142 9 12 9C11.5858 9 11.25 8.66421 11.25 8.25C11.25 7.83579 11.5858 7.5 12 7.5C12.4142 7.5 12.75 7.83579 12.75 8.25Z" fill="#888EA8" />
                                    <path d="M9.75 8.25C9.75 8.66421 9.41421 9 9 9C8.58579 9 8.25 8.66421 8.25 8.25C8.25 7.83579 8.58579 7.5 9 7.5C9.41421 7.5 9.75 7.83579 9.75 8.25Z" fill="#888EA8" />
                                    <path d="M6.75 8.25C6.75 8.66421 6.41421 9 6 9C5.58579 9 5.25 8.66421 5.25 8.25C5.25 7.83579 5.58579 7.5 6 7.5C6.41421 7.5 6.75 7.83579 6.75 8.25Z" fill="#888EA8" />
                                </svg>
                                
                            </span>
                        </div>
                    
                        <button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
                            Submit
                        </button>
                    </form>
                    
                    <br />
                    
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}