{% extends 'core/auth/auth.html' %}
{% load static %}
{% block image %}
    {% static 'img/mobile_login.svg' %}
{% endblock image %}
{% block title %}
    Login
{% endblock title %}
{% block content %}
    <style>
        @keyframes fade-in {
            from {
                opacity: 0;
            }
        }

        @keyframes fade-out {
            to {
                opacity: 0;
            }
        }

        @keyframes slide-from-right {
            from {
                transform: translateX(90px);
            }
        }

        @keyframes slide-to-left {
            to {
                transform: translateX(-90px);
            }
        }

        /* define animations for the old and new content */
        ::view-transition-old(slide-it) {
            animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
            600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
        }

        ::view-transition-new(slide-it) {
            animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
            600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
        }

        /* tie the view transition to a given CSS class */
        .slide-transition {
            view-transition-name: slide-it;
        }

        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: inherit;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        }

        .popup .h2 {
            color: inherit;
        }

        .popup .p {
            color: inherit;
        }

        .btn-loading {
            background: url(https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/90-ring-with-bg-white-36.svg) no repeat 50% 50%;
        }

    </style>
    <form id="login-form"
          method="post"
          action="{% url 'core:auth:login manual' %}">
        {% csrf_token %}
        <noscript>
            <div data-theme="dim"
                 class="overlay fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center">
                <div class="popup bg-gray-700 rounded-lg p-8 w-96">
                    <br>
                    <h2 class="text-2xl font-bold text-center">
                        JavaScript is disabled in your browser. Please enable JavaScript.
                    </h2>
                    <br>
                    <p class="text-center mt-4">
                        Need to know how to enable JavaScript ?
                        <a href="http://enable-javascript.com/" class="text-blue-500 underline">Go here.</a>
                    </p>
                    <br>
                </div>
            </div>
        </noscript>
        <div class="form-control w-full mt-4">
            <label class="label">
                <span class="label-text text-base-content undefined">Email Address</span>
            </label>
            <input required
                   type="email"
                   name="email"
                   pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
                   placeholder="jsmith@example.com"
                   class="peer input input-bordered w-full"
                   value="{{ request.GET.email|default_if_none:'' }}">
            <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
                <span class="label-text-alt text-error">Please enter a valid email.</span>
            </label>
            <input type="hidden" name="next" value="{{ request.GET.next }}">
        </div>
        <div class="form-control w-full mt-4">
            <label class="label">
                <span class="label-text text-base-content undefined">Password</span>
            </label>
            <input required
                   autofocus
                   type="password"
                   name="password"
                   placeholder="********"
                   class="input input-bordered w-full">
        </div>
        <button id="login-btn"
                class="btn btn-primary loading-htmx mt-5 w-full"
                data-hx-loading="save"
                type="submit">
            <span class="loading-htmx-text">Login</span>
            <span id="currency_save_loading"
                  class="loading loading-spinner loading-htmx-loader"></span>
        </button>
        <div class="divider mt-8">OR</div>
        {% if magic_links_enabled %}
            <button type="button"
                    hx-post="{% url 'core:auth:login magic_link request' %}"
                    hx-vals='{"email": "{{ email }}", "next": "{{ next }}"}'
                    class="btn-large-card flex flex-col items-center">
                <span>Login with email magic link</span>
                <span class="text-xs text-center">This sends an email to your address, all you need to do is press the link and you're in!</span>
            </button>
        {% endif %}
        <div class="text-center mt-3">
            Don't have an account yet?
            <a href="{% url 'core:auth:login create_account' %}"
               class="my-4 group text-secondary transition duration-300">
                Create one!
                <span class="my-2 block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-secondary"></span>
            </a>
            <a href="{% url 'index' %}" class="text-primary inline-block">Back to homepage</a>
        </div>
        {% if github_enabled %}
            <a href="{% url 'social:begin' 'github' %}" class="btn-large-card">
                <i class="fa-brands fa-github mr-2"></i>
                Login with github
            </a>
        {% endif %}
        {% if google_enabled %}
            <a href="{% url 'social:begin' 'google-oauth2' %}"
               class="btn-large-card">
                <i class="fa-brands fa-google mr-2 text-orange-500"></i>
                Login with google
            </a>
        {% endif %}
    </form>
    <script>
        // Displays loader and disables button when form is submitted
        const form = document.getElementById("login-form");
        form.addEventListener("submit", (event) => {
            const button = document.getElementById("login-btn");
            const loader = document.getElementById("currency_save_loading");
            button.setAttribute("disabled", "");
            loader.style.display = "inline-block";
        })
    </script>
{% endblock %}
