{% extends "base.html" %}
{% load static %}
{% load custom_tags %}
{% load i18n %}
{% load account socialaccount %}
{% block title %}
    Account Login | {% env 'PROJECT_NAME' %}
{% endblock title %}
{% block description %}
    Log in to your account to access the bug logging tool. Enter your username and password or log in with Google or GitHub.
{% endblock description %}
{% block keywords %}
    Account Login, Bug Logging Tool, Username, Password, Google Login, GitHub Login
{% endblock keywords %}
{% block og_title %}
    Account Login - Access Your Bug Logging Tool
{% endblock og_title %}
{% block og_description %}
    Log in to your account to access the bug logging tool. Enter your username and password or log in with Google or GitHub for a seamless experience.
{% endblock og_description %}
{% block natural_content %}
    {% include "includes/sidenav.html" %}
    {% 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 overflow-hidden bg-white rounded-md shadow-lg max md:flex-row md:flex-1 lg:max-w-screen-sm">
            <!-- Left Side (Branding and Info) -->
            <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-2 text-4xl font-bold tracking-wider text-center">
                    <!-- Reduced margin-y -->
                    <a href="{% url 'home' %}"
                       class="hover:no-underline text-white hover:text-white">{% env 'PROJECT_NAME' %}</a>
                </div>
                <p class="mt-4 font-normal text-center text-white text-xl md:mt-0">
                    <!-- Reduced margin-top -->
                    {% 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-6 text-center">
                    <!-- Reduced margin-top -->
                    <span>{% trans "Don't have an account" %}?</span>
                    <a href="{% url 'account_signup' %}{% if redirect_field_value %}?{{ redirect_field_name }}={{ redirect_field_value }}{% endif %}"
                       class="underline text-white">{% trans "Get Started" %}!</a>
                </p>
                <p class="mt-4 text-sm text-center text-white">
                    <!-- Reduced margin-top -->
                    {% 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>
            <!-- Right Side (Login Form) -->
            <div class="p-5 bg-white md:flex-1">
                <h3 class="text-2xl font-semibold text-gray-700">{% trans "Account Login" %}</h3>
                <form class="flex flex-col space-y-4 login"
                      method="post"
                      action="{% url 'account_login' %}?next={{ request.path }}">
                    {% csrf_token %}
                    {% if redirect_field_value %}
                        <input type="hidden"
                               name="{{ redirect_field_name }}"
                               value="{{ redirect_field_value }}" />
                    {% endif %}
                    <!-- Username Field -->
                    <div class="flex flex-col space-y-1">
                        <label for="id_login" class="text-sm font-semibold text-gray-500">Username</label>
                        <input autofocus
                               id="id_login"
                               name="login"
                               value="{{ form.login.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 text-sm text-red-500">{{ form.login.errors }}</span>
                    </div>
                    <!-- Password Field -->
                    <div class="flex flex-col space-y-1">
                        <div class="flex items-center justify-between">
                            <label for="id_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">{% trans "Forgot Password?" %}</a>
                        </div>
                        <div class="relative">
                            <input type="password"
                                   id="id_password"
                                   name="password"
                                   value="{{ form.password.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">
                                    <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 text-sm text-red-500">{{ form.password.errors }}</span>
                    </div>
                    <!-- Remember Me Checkbox -->
                    <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="id_remember"
                               class="mb-0 text-sm font-semibold text-gray-500 select-none">Remember me</label>
                    </div>
                    <!-- Login Button -->
                    <div>
                        <button type="submit"
                                name="login_button"
                                class="w-full 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 "Log in" %}
                        </button>
                    </div>
                    <!-- Social Login Buttons -->
                    <div class="flex flex-col space-y-4">
                        <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>
                        <a href="{% url 'github_login' %}"
                           class="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">
                            <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 class="text-sm font-medium text-gray-800 group-hover:text-white">Github</span>
                        </a>
                        <!-- <a href="{% url 'google_login' %}" 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_login' %}" 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>
                </form>
            </div>
        </div>
    </div>
{% endblock natural_content %}