{% include "partials/header.html.j2" %}
{% if usr_roles is containing('new') %}
    {% set logo= assets_url~"/images/tii_cl_logo_new.svg" %}
{% elif usr_roles is containing('dev') %}
    {% set logo= assets_url~"/images/tii_cl_logo_dev.svg" %}
{% else %}
    {% set logo= assets_url~"/images/tii_cl_logo.svg" %}
{% endif %}
<div class="{% if edit_reset and edit_reset == "password" %}mt-11{% endif %}">
    <section class="w-auto  mt-8">
        <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" 
                onkeydown="return event.key != 'Enter';"
                onsubmit="return false;"
            >
                <div
                    class="hidden flex items-center justify-center p-5">
                    <a href="/"><img src="{{logo}}" style="height: 7.5rem" class="" alt="TII Cryptographiuc Library" /></a>
                </div>
                <div id="section-title" class="mb-8 flex justify-center"mb-5 text-3xl text-indigo-800 dark:text-indigo-200">
                    <svg class="pl-3 w-8 h-8"><use href="#symbl-cog" /></svg>
                    <span class="ml-3 text-2xl">Settings</span>
                </div>
                {% if edit_target and edit_target == "main" %}
                    {% include "partials/form-user.html.j2" %}
                {% elif edit_target and edit_target == "totp" %}
                    {% include "partials/form-totp.html.j2" %}
                {% elif edit_target and edit_target == "password" %}
                    {% include "partials/form-password.html.j2" %}
                {% endif %}
                <div id="user-messages-inpt" class="mb-5 text-red-500 text-xs italic"></div>
                <div class="mt-8 flex items-center justify-{% if no_edit or edit_reset %}center{% else %}between{% endif %}">
                   {% if no_edit %} 
                    <button id="edit-button"  
                        class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
                        onclick="edit_in()"
                     >
                        <span class="relative text-sm px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                           Edit 
                        </span>
                    </button>
                   {% else %} 
                    {% if edit_reset and edit_reset == "password" %}
                    <span></span>
                    {% else %} 
                    <button id="back-btn" class="mx-3 text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800">
                        <svg class="w-8 h-8"><use href="#symbl-arrow-uturn-left"/></svg>
                    </button>
                    {% endif %} 
                    <button id="save-button"
                        class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
                        onclick="log_in()">
                        Save
                    </button>
                   {% endif %} 
                </div>
                {% if no_edit %} 
                <div class="inline-flex items-center justify-center w-full">
                    <hr class="w-64 h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
                    <span class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2 dark:text-white dark:bg-gray-900">or</span>
                </div>
                <div class="flex items-center justify-between">
                    <button id="password-button" 
                        class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
                        onclick="password_in()"
                    >
                        <span class="relative text-sm px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                           Password
                        </span>
                    </button>
                    {% if totp_mode != "no" %}
                    <button id="password-button" 
                        class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
                        onclick="totp_in()"
                    >
                        <span class="relative text-sm px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                            TOTP
                        </span>
                    </button>
                    {% endif %}
                </div>
                {% endif %} 
            </form>
        </div>
    </section>
</div>
<script>
    const TITLE_URL = "{{main_url}}/settings";
    const BACK_URL = "{{main_url}}/settings";
    {% if user and user.isadmin == 1 %}
    const id_user = 'A';
    {% else %}
    const id_user = '';
    {% endif %}
</script>
{% if no_edit %} 
<script>
const edit_in = () => {
   location.href=`${location.href}/main`;
};
const password_in = () => {
   location.href=`${location.href}/password`;
};
const totp_in = () => {
   location.href=`${location.href}/totp`;
};
</script>
<script src="{{assets_url | default(value='')}}/js/user_view.js"></script> 
{% else %} 
<script>
    const REQ_PATH = "{{req_path}}";
    {% if edit_reset and edit_reset == "password" and edit_target == "password" %}
    const SIGNIN_URL = "{{main_url}}/resetup";
    {% else %}
    const SIGNIN_URL = "{{main_url}}/settings";
    {% endif %}
    const CHECK_URL = "{{main_url}}/check";
    const INVITE_ID = "{{invite_id | default(value="")}}";
    const INVITE_KEY = "{{invite_key | default(value="")}}";
    {% if edit_target and edit_target == "password" %}
    const PASSWORD_SCORE = {{password_score | default(value=0)}};
    {% elif edit_target and edit_target == "totp" %}
    const totp_digits = {{totp_digits | default(value=0)}};
    const totp_algorithm = '{{totp_algorithm | default(value='')}}';
    const totp_mode = '{{totp_mode | default(value='')}}';
    {% endif %}
</script>
<script src="{{assets_url | default(value='')}}/js/user_settings.js"></script> 
{% endif %} 
{% include "partials/symbols.html.j2" %} 
{% include "partials/footer.html.j2" %}