{% extends "./master.njk" %}

{% block content %}    
<div id="app" class="w-full flex align-center" style="min-height: 100svh;">
    <div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
        {% if error == "login failed" %}
        <!-- Login Error -->
        <div id="alert-login-failed" class="flex items-center w-full max-w-md px-4 py-3 text-red-800 border-t-4 border-red-300 bg-white dark:text-red-400 dark:bg-gray-800 dark:border-red-800 shadow rounded-lg" role="alert">
            <i class="ti ti-alert-hexagon-filled text-lg"></i>
            <div class="ms-3 text-sm font-medium">
                Login failed. Username or password is incorrect.
            </div>
        </div>
        {% endif %}
        {% if error == "otp failed" %}
        <!-- Login Error -->
        <div id="alert-login-failed" class="flex items-center w-full max-w-md px-4 py-3 text-red-800 border-t-4 border-red-300 bg-white dark:text-red-400 dark:bg-gray-800 dark:border-red-800 shadow rounded-lg" role="alert">
            <i class="ti ti-alert-hexagon-filled text-lg"></i>
            <div class="ms-3 text-sm font-medium">
                Login failed. OTP token is incorrect.
            </div>
        </div>
        {% endif %}
        {% if step == "login" %}
        <!-- Login Dialoge -->
        <div class="w-full max-w-md bg-white rounded-lg shadow dark:border md:mt-0 xl:p-0 dark:bg-gray-800 dark:border-gray-700">
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <div class="px-4 flex flex-col items-center gap-4">
                    <img class="min-h-4 max-w-full max-h-64" src="/img/logo-dark.png" alt="logo">
                    <h1 class="text-3xl text-gray-900 dark:text-white">
                        Identity Manager
                    </h1>
                </div>
                <form class="space-y-4 md:space-y-6" action="/login" method="post" enctype="application/x-www-form-urlencoded">
                    <div>
                        <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Your email
                        </label>
                        <input type="text" name="username" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="john-doe" required="">
                    </div>
                    <div>
                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Password
                        </label>
                        <input type="password" name="password" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="••••••••" required="">
                    </div>
                    <div class="flex items-center justify-end">
                        <a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Forgot password?</a>
                    </div>
                    <button type="submit" class="w-full px-5 py-3 text-sm text-center text-white bg-primary-600 hover:bg-primary-700 rounded-lg">Sign in</button>
                </form>
            </div>
        </div>
        {% endif %}
        {% if step == "otp" %}
        <!-- TOTP Dialoge -->
        <div class="w-full max-w-md bg-white rounded-lg shadow dark:border md:mt-0 xl:p-0 dark:bg-gray-800 dark:border-gray-700">
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <div class="px-4 flex flex-col items-center gap-4">
                    <img class="min-h-4 max-w-full max-h-64" src="/img/logo-dark.png" alt="logo">
                    <h1 class="text-3xl text-gray-900 dark:text-white">
                        Identity Manager
                    </h1>
                </div>
                <form class="space-y-4 md:space-y-6" action="/login" method="post" enctype="application/x-www-form-urlencoded">
                    <div>
                        <label for="otpToken" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            OTP Token
                        </label>
                        <input type="text" name="otpToken" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="12345" required="">
                    </div>
                    <button type="submit" class="w-full px-5 py-3 text-sm text-center text-white bg-primary-600 hover:bg-primary-700 rounded-lg">Continue</button>
                </form>
            </div>
        </div>
        <!-- / -->
        {% endif %}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
{% endblock %}