{% 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">
{% if isadmin and isadmin == "TRUE" %}
    {% include "partials/navbar.html.j2" %}
{% else %}
    {% include "partials/mini_navbar.html.j2" %}
{% endif %}
    <section class="w-auto {% if isadmin and isadmin == "TRUE" %} mt-0 {% else %}mt-8{% endif %}">
        <div 
            class="flex items-center justify-center min-h-70%"
        >
            <form class="min-w-100 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="flex justify-center mb-5 text-3xl text-indigo-800 dark:text-indigo-200">Signup</div>
                {% include "partials/form-user.html.j2" %}
                {% include "partials/form-password.html.j2" %}
                {% include "partials/form-totp.html.j2" %}
                <div id="user-messages-inpt" class="mb-5 text-red-500 text-xs italic"></div>
                <div class="flex items-center">
                    <input id="agree-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                    <label for="agree-checkbox" class="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                        I agree with the <a href="/page/terms-conditions.html" class="text-blue-600 dark:text-blue-500 hover:underline">terms and conditions</a>.
                    </label>
                </div>
                <div class="mt-8 flex items-center justify-between">
                    <button id="login-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()">
                        Sign In
                    </button>
                    <a class="hidden inline-block mt-5 align-baseline text-xs text-blue-500 hover:text-blue-800" href="#">
                        Forgot Password?
                    </a>
                </div>
            </form>
        </div>
    </section>
</div>
<script>
    const SIGNIN_URL = "{{main_url}}/signup";
    const CHECK_URL = "{{main_url}}/check";
    const INVITE_ID = "{{invite_id | default(value="")}}";
    const INVITE_KEY = "{{invite_key | default(value="")}}";
    const PASSWORD_SCORE = {{password_score | default(value=0)}};
    const totp_digits = {{totp_digits | default(value=0)}};
    const totp_algorithm = '{{totp_algorithm | default(value='')}}';
    const totp_mode = '{{totp_mode | default(value='')}}';
    {% if user and user.isadmin and user.isadmin == 1 or isadmin and isadmin == 'TRUE' %}
    const id_user = 'A';
    {% else %}
    const id_user = '';
    {% endif %}
</script>
{# <script src="{{assets_url | default(value='')}}/js/signup.js"></script>  #}
<script src="{{assets_url | default(value='')}}/js/user_settings.js"></script> 
{% include "partials/symbols.html.j2" %} 
{% include "partials/footer.html.j2" %}