{% extends "base.html" %}
{% load i18n %}
{% load custom_tags %}
{% block natural_content %}
    <div class="flex items-center w-[100%] h-[60vh] min-h-screen p-4 bg-gray-100 lg:justify-center">
        <div class="flex flex-col  lg:scale-150 overflow-hidden bg-white rounded-md shadow-lg max md:flex-row md:flex-1 lg:max-w-screen-sm">
            <div class="p-4 py-6 text-white bg-red-500 md:w-80 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 'index' %}"
                       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, companies 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' %}" 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>
            <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 %}
                    <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"
                               class="px-4 py-2 w-[100%] h-[28px]  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>
                    <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"
                               class="px-4 py-2 w-[100%] h-[28px] 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>
                    <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>
                        <input type="password"
                               id="id_password"
                               name="password1"
                               class="px-4 py-2 w-[100%] h-[28px] 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.password1.errors }}</span>
                    </div>
                    <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>
                        <input type="password"
                               id="id_password2"
                               name="password2"
                               class="px-4 py-2 w-[100%] h-[28px] 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.password2.errors }}</span>
                    </div>
                    {% if redirect_field_value %}
                        <input type="hidden"
                               name="{{ redirect_field_name }}"
                               value="{{ redirect_field_value }}" />
                    {% endif %}
                    <div>
                        <button type="submit"
                                name="signup_button"
                                class="px-4 py-2 w-[30%] h-[28px] 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>
                    {% if form.errors %}
                        <div>
                            {% for _, error in form.errors.items %}
                                <strong class="text-red-500 text-center text-xl">{{ error }}</strong>
                            {% endfor %}
                        </div>
                    {% endif %}
                </form>
            </div>
        </div>
    </div>
{% endblock natural_content %}