{% extends "base.html" %}
{% load static %}
{% load custom_tags %}
{% block title %}
    Sign Up | {% env 'PROJECT_NAME' %}
{% endblock title %}
{% block description %}
    Create an account to join the community. Sign up with your email and username to start discovering and reporting bugs.
{% endblock description %}
{% block keywords %}
    Sign Up, Create Account, Join Community, Email, Username, Discover Bugs, Report Bugs
{% endblock keywords %}
{% block og_title %}
    Sign Up - Join Our Community
{% endblock og_title %}
{% block og_description %}
    Create an account to join our community. Sign up with your email and username to start discovering and reporting bugs.
{% endblock og_description %}
{% load i18n %}
{% load custom_tags %}
{% block natural_content %}
    {% include "includes/sidenav.html" %}
    <div class="flex items-center justify-center w-full min-h-screen p-4 bg-gray-100 h-full">
        <div class="flex flex-col w-full max-w-md bg-white rounded-md shadow-lg md:flex-row md:max-w-2xl lg:max-w-4xl">
            <!-- Left Section -->
            <div class="p-4 py-6 text-white bg-red-500 md:w-96 md:flex-shrink-0 md:flex md:flex-col md:items-center md:justify-evenly">
                <div class="my-3 text-4xl font-bold tracking-wider text-center">
                    <a href="{% url 'home' %}"
                       class="hover:no-underline text-white hover:text-white">{% env 'PROJECT_NAME' %}</a>
                </div>
                <p class="mt-6 font-normal text-center text-white text-xl md:mt-0">
                    {% env 'PROJECT_NAME' %} {% trans "is a bug logging tool to report issues and get points, Organizations are held accountable" %}.
                </p>
                <p class="flex flex-col items-center justify-center text-sm mt-10 text-center">
                    <span>{% trans "Already have an account" %}?</span>
                    <a href="{% url 'account_login' %}?next={{ request.path }}"
                       class="underline text-white">{% trans "Login" %}!</a>
                </p>
                <p class="mt-6 text-sm text-center text-white">
                    {% trans "Read our" %} <a href="{% url 'terms' %}" class="underline">{% trans "terms" %}</a> {% trans "and" %} <a href="{% url 'terms' %}" class="underline">{% trans "conditions" %}</a>
                </p>
            </div>
            <!-- Right Section -->
            <div class="p-5 bg-white md:flex-1">
                <h3 class="my-4 text-2xl font-semibold text-gray-700">{% trans "Account SignUp" %}</h3>
                <form class="flex flex-col space-y-5 login"
                      method="post"
                      action="{% url 'account_signup' %}">
                    {% csrf_token %}
                    <!-- Username Field -->
                    <div class="flex flex-col space-y-1">
                        <label for="email" class="text-sm font-semibold text-gray-500">Username</label>
                        <input autofocus
                               type="text"
                               id="id_username"
                               name="username"
                               value="{{ form.username.value|default:'' }}"
                               class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
                        <span class="help-block">{{ form.username.errors }}</span>
                    </div>
                    <!-- Email Field -->
                    <div class="flex flex-col space-y-1">
                        <label for="email" class="text-sm font-semibold text-gray-500">Email</label>
                        <input type="email"
                               id="id_email"
                               name="email"
                               value="{{ form.email.value|default:'' }}"
                               class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
                        <span class="help-block">{{ form.email.errors }}</span>
                    </div>
                    <!-- Password Field -->
                    <div class="flex flex-col space-y-1">
                        <div class="flex items-center justify-between">
                            <label for="password" class="text-sm font-semibold text-gray-500">Password</label>
                        </div>
                        <div class="relative">
                            <input type="password"
                                   id="id_password"
                                   name="password1"
                                   value="{{ form.password1.value|default:'' }}"
                                   class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
                            <button type="button"
                                    id="togglePassword"
                                    class="password-toggle absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-800 focus:outline-none"
                                    data-target="id_password">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24"
                                     fill="currentColor"
                                     class="size-6"
                                     id="svg-eye">
                                    <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
                                    <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
                                    <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
                                </svg>
                            </button>
                        </div>
                        <span class="help-block">{{ form.password1.errors }}</span>
                    </div>
                    <!-- Confirm Password Field -->
                    <div class="flex flex-col space-y-1">
                        <div class="flex items-center justify-between">
                            <label for="password" class="text-sm font-semibold text-gray-500">Confirm Password</label>
                        </div>
                        <div class="relative">
                            <input type="password"
                                   id="id_password2"
                                   name="password2"
                                   value="{{ form.password2.value|default:'' }}"
                                   class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
                            <button type="button"
                                    id="togglePassword"
                                    class="password-toggle absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-800 focus:outline-none"
                                    data-target="id_password2">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24"
                                     fill="currentColor"
                                     class="size-6"
                                     id="svg-eye">
                                    <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
                                    <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
                                    <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
                                </svg>
                            </button>
                        </div>
                        <span class="help-block">{{ form.password2.errors }}</span>
                    </div>
                    <!-- Captcha Field -->
                    <div class="flex flex-col space-y-1">
                        <label for="captcha" class="text-sm font-semibold text-gray-500">Captcha</label>
                        <div class="flex items-center">
                            <div class="captcha-container">
                                <input type="hidden" name="captcha_0" value="{{ form.captcha.value.key }}">
                                <img id="captcha-image"
                                     src="{{ form.captcha.image_url }}"
                                     alt="Captcha Image"
                                     width="150"
                                     height="50"
                                     class="border border-gray-300 rounded">
                            </div>
                            <button type="button"
                                    onclick="refreshCaptcha()"
                                    class="ml-2 p-2 rounded-md hover:bg-gray-100 transition-colors">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     fill="none"
                                     viewBox="0 0 24 24"
                                     stroke-width="1.5"
                                     stroke="currentColor"
                                     class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                                </svg>
                            </button>
                        </div>
                        <input type="text"
                               name="captcha_1"
                               placeholder="Enter Captcha"
                               class="px-2 py-1 mt-2 border border-gray-300 rounded focus:ring-red-200 w-1/2"
                               required>
                        <span class="help-block">{{ form.captcha.errors }}</span>
                    </div>
                    <!-- Hidden Redirect Field -->
                    {% if redirect_field_value %}
                        <input type="hidden"
                               name="{{ redirect_field_name }}"
                               value="{{ redirect_field_value }}" />
                    {% endif %}
                    <!-- Submit Button -->
                    <div>
                        <button type="submit"
                                name="signup_button"
                                class="w-full md:w-auto px-4 py-2 text-lg font-semibold text-white transition-colors duration-300 bg-red-500 rounded-md shadow hover:bg-red-600 focus:outline-none focus:ring-red-200 focus:ring-4">
                            {% trans "Sign Up" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Captcha Refresh Script -->
    <script>
        function refreshCaptcha() {
            const captchaContainer = document.querySelector('.captcha-container');
            
            fetch('/captcha/refresh/', {
                headers: {
                    "X-Requested-With": "XMLHttpRequest"
                }
            })
            .then(response => response.json())
            .then(data => {
                captchaContainer.innerHTML = `
                    <input type="hidden" name="captcha_0" value="${data.key}">
                    <img id="captcha-image" src="${data.image_url}?${Date.now()}" alt="Captcha Image" width="150" height="50" class="border border-gray-300 rounded">
                `;
            })
            .catch(error => console.error('Error:', error));
        }
        
        window.addEventListener('load', function() {
            const captchaImg = document.getElementById('captcha-image');
            if (!captchaImg || !captchaImg.getAttribute('src').trim()) {
                refreshCaptcha();
            }
        });
    </script>
{% endblock natural_content %}