{% include "partials/header.html.j2" %}
{% if usr_roles is containing('new') %}
    {% set logo= assets_url~"/images/logo_new.svg" %}
{% elif usr_roles is containing('dev') %}
    {% set logo= assets_url~"/images/logo_dev.svg" %}
{% else %}
    {% set logo= assets_url~"/images/logo.svg" %}
{% endif %}
<div class="blue-radial">
    {% include "partials/mini_navbar.html.j2" %}
    <section class="w-auto min-h-200 mt-10%">
        <div 
            class="flex flex-col items-center justify-center min-h-70%"
        >
            <form id="main-form" class="border-1 border-gray-500 bg-white dark:bg-gray-800 shadow-md rounded px-11 pt-6 pb-8 mb-4 -mt-8" onsubmit="return false;">
                <div
                    class="flex items-center justify-center p-5">
                    <a href="/"><img src="{{logo}}" style="height: 7.5rem" class="" alt="{{ main_name | default(value="") }}" /></a>
                </div>
                <div class="mb-4">
                    <label class="block text-slate-700 dark:text-slate-200 text-sm font-bold mb-2" for="username"> Username </label>
                    <div class="flex">
                        <input type="text" id="login-name-inpt" onchange="set_name(this)"
                                class="shadow appearance-none border rounded w-full py-2 px-3 text-slate-700 dark:text-slate-200 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                placeholder="Username"
                        />
                    </div>
                </div>
                <div class="mb-3">
                    <label class="block text-slate-700 dark:text-slate-200 text-sm font-bold mb-2" for="password" > Password </label>
                    <div class="flex">
                        <input type="password" id="login-password-inpt" onchange="set_password(this)"
                            class="shadow appearance-none border border-slate-500 rounded w-full py-2 px-3 text-gray-700 dark:text-slate-200 dark:bg-gray-700  mb-3 leading-tight focus:outline-none focus:shadow-outline"
                            placeholder="********"
                        />
                        <i id="show-password">
                            <svg class="hidden pl-3 mt-2 text-slate-700 w-8 h-8"><use href="#symbl-eye-slash" /></svg>
                            <svg class="pl-3 mt-2 text-slate-700 w-8 h-8"><use href="#symbl-eye" /></svg>
                        </i>
                    </div>
                </div>
                <div id="login-messages-inpt" class="mb-3 text-red-500 text-xs italic"></div>
                <div id="main-loading" class="hidden flex flex-col justify-center md:w-2/3 w-1/3 ml-3 my-2 md:mt-0 p-3 text-xl border-slate-200 rounded-lg border-0 text-slate-600">
                    <svg class=""><use href="#symbl-loading" /></svg>
                    <span class="text-lg m-auto pt-5"> Checking ... </span>
                </div>
                <div id="main-btns" class="flex items-center justify-between">
                    <button id="signin-button" class="!bg-indigo-500 hover:bg-indigo-200 text-white py-2 px-4 rounded  focus:outline-none focus:shadow-inline accent-indigo-600" onclick="log_in()">
                    Login 
                    </button>
                    {% if use_mail %}
                    <a class="inline-block ml-3 align-baseline text-center text-xs text-blue-500 hover:text-blue-800" onclick="on_forgot_passwd()">
                        Forgot <br>Password?
                    </a>
                    {% endif %}
                    {% if signup_mode == "open" %} 
                    <a id="login-button" class="ml-3 hover:bg-indigo-200 hover:text-indigo-800 border-indigo-500 border-1 text-indigo-500 py-2 px-4 rounded  focus:outline-none focus:shadow-inline accent-indigo-600" onclick="sign_up()">
                        SingUp 
                    </a>
                    {% endif %}
                </div>
            </form>
            <div id="forgot-messages" class="hidden border-1 border-gray-500 bg-white dark:bg-gray-800 shadow-md rounded px-5 pt-4 pb-4 mb-11 text-orange-500 text-sm"></div>
            {% if with_totp %}
            <form id="otp-form" class="hidden bg-white dark:bg-gray-800 shadow-md rounded px-11 pt-6 pb-8 mb-4 -mt-8" onsubmit="return false;">
                <div
                    class="flex items-center justify-center p-5">
                    <a id="otp-logo-link" href="/"><img src="{{logo}}" style="height: 7.5rem" class="" alt="{{ main_name | default(value="") }}" /></a>
                </div>
                <div class="mb-4">
                    <label class="block text-slate-700 dark:text-slate-200 text-sm font-bold mb-2" for="username"> Enter TOTP code </label>
                    <div class="flex">
                        <input type="text" id="login-totp-inpt" onchange="set_totp(this)"
                            class="shadow appearance-none border rounded w-full py-2 px-3 text-slate-700 dark:text-slate-200 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                            placeholder="totp-code"
                        />
                    </div>
                </div>
                <div id="otp-messages-inpt" class="mb-3 text-red-500 text-xs italic"></div>
                <div id="otp-loading" class="hidden flex flex-col items-center justify-center md:w-2/3 w-1/3 ml-3 my-2 md:mt-0 p-3 text-xl border-slate-200 border-0 rounded-lg text-slate-600">
                    <svg class=""><use href="#symbl-loading" /></svg>
                    <span class="text-lg m-auto pt-5"> Checking ... </span>
                </div>
                <div id="otp-btns" class="flex flex-col space-y-2 items-center justify-between">
                    <button id="otp-forgot-password" class="hidden !bg-indigo-500 hover:bg-indigo-200 text-white py-2 px-4 rounded  focus:outline-none focus:shadow-inline accent-indigo-600" onclick="forgot_passwd()">
                        Reset Password
                    </button>
                    <button href="#" id="otp-login-link" class="hidden border-1 border-indigo-500 hover:bg-indigo-200 text-indigo-500 py-2 px-4 rounded focus:outline-none focus:shadow-inline accent-indigo-600" onclick="restart()">
                        Back to Login 
                    </button>
                    <button id="otp-signin-button" class="!bg-indigo-500 hover:bg-indigo-200 text-white py-2 px-4 rounded  focus:outline-none focus:shadow-inline accent-indigo-600" onclick="otp_in()">
                    Login 
                    </button>
                </div>
            </form>
            {% endif %}
        </div>
    </section>
</div>
<script>
const SIGNIN_URL = "{{main_url}}/login";
const SIGNUP_URL = "{{main_url}}/signup";    
const RESET_URL = "{{main_url}}/reset";    
const totp_digits = {{totp_digits | default(value=0)}};
</script>
<script src="{{assets_url | default(value='')}}/js/login.js"></script> 
{% include "partials/symbols.html.j2" %}
{% include "partials/footer.html.j2" %}