{% extends "base.html" %}
{% load i18n %}
{% load custom_tags %}
{% load account socialaccount %}
{% block natural_content %}
    {% get_providers as socialaccount_providers %}
    <div class="flex items-center 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 "Don't have an account" %}?</span>
                    <a href="{% url 'account_signup' %}" class="underline text-white">{% trans "Get Started" %}!</a>
                </p>
                <p class="mt-6 text-sm text-center text-white">
                    {% trans "Read our" %} <a href="{% url 'terms' %}" class="underline text-white">{% trans "terms" %}</a> {% trans "and" %} <a href="{% url 'terms' %}" class="underline text-white">{% 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 Login" %}</h3>
                <form class="flex flex-col space-y-5 login"
                      method="post"
                      action="{% url 'account_login' %}">
                    {% 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
                               id="id_login"
                               name="login"
                               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.login.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>
                            <a href="{% url 'account_reset_password' %}"
                               class="text-sm text-red-600 hover:underline focus:text-red-800">{% trans "Forgot Password?" %}</a>
                        </div>
                        <input type="password"
                               id="id_password"
                               name="password"
                               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.password.errors }}</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <input type="checkbox"
                               id="id_remember"
                               name="remember"
                               class="w-4 h-4 transition duration-300 rounded focus:ring-2 focus:ring-offset-0 focus:outline-none focus:ring-red-200" />
                        <label for="remember" class="text-sm font-semibold mt-8 text-gray-500">Remember me</label>
                    </div>
                    <div>
                        <button type="submit"
                                name="login_button"
                                class="px-4 py-2 w-[100%] 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 "Log in" %}
                        </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 %}
                    <div class="flex flex-col space-y-5">
                        <span class="flex items-center justify-center space-x-2">
                            <span class="h-px bg-gray-400 w-14"></span>
                            <span class="font-normal text-gray-500">{% trans "or login with" %}</span>
                            <span class="h-px bg-gray-400 w-14"></span>
                        </span>
                        <div class="flex flex-col space-y-4">
                            <a href="{% url 'github_callback' %}"
                               class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline">
                                <span>
                                    <svg class="w-5 h-5 text-gray-800 fill-current group-hover:text-white"
                                         viewBox="0 0 16 16"
                                         version="1.1"
                                         aria-hidden="true">
                                        <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
                                        </path>
                                    </svg>
                                </span>
                                <span class="text-sm font-medium text-gray-800 group-hover:text-white">Github</span>
                            </a>
                            <a href="{% url 'google_callback' %}"
                               class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="w-5 h-5 text-gray-800 fill-current group-hover:text-white"
                                         viewBox="0 0 24 24">
                                        <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.917 16.083c-2.258 0-4.083-1.825-4.083-4.083s1.825-4.083 4.083-4.083c1.103 0 2.024.402 2.735 1.067l-1.107 1.068c-.304-.292-.834-.63-1.628-.63-1.394 0-2.531 1.155-2.531 2.579 0 1.424 1.138 2.579 2.531 2.579 1.616 0 2.224-1.162 2.316-1.762h-2.316v-1.4h3.855c.036.204.064.408.064.677.001 2.332-1.563 3.988-3.919 3.988zm9.917-3.5h-1.75v1.75h-1.167v-1.75h-1.75v-1.166h1.75v-1.75h1.167v1.75h1.75v1.166z" />
                                    </svg>
                                </span>
                                <span class="text-sm font-medium text-gray-800 group-hover:text-white">Google</span>
                            </a>
                            <a href="{% url 'facebook_callback' %}"
                               class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="w-5 h-5 text-gray-800 fill-current group-hover:text-white"
                                         viewBox="0 0 24 24">
                                        <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
                                    </svg>
                                </span>
                                <span class="text-sm font-medium text-gray-800 group-hover:text-white">Facebook</span>
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock natural_content %}