{% include "partials/header.html.j2" %}
<section id="invite-sec-form" class="w-auto text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-900">
    <div 
        class="flex flex-col space-y-2 items-center justify-center min-h-70% "
    >
       <div class="my-2 text-4xl">{{title | default (value="")}}</div>
        <form class="bg-white min-w-20%  dark:bg-gray-800 shadow-md rounded px-11 pt-6 pb-8 mb-4 -mt-8" onsubmit="return false;">

            <div class="mb-6">
                <label for="email-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email address</label>
                <input type="email" id="email-input"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    onchange="set_email(this)"
                    placeholder="email address"
                />
            </div>
            <div class="mb-6">
                <label for="roles-select" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Roles</label>
                <select multiple  size="2" show_dark=true id="roles-select" class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer">
                    <option value="user">User</option>
                    <option value="dev">Developer</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div class="mb-6">
                <label for="expire-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Expiration (minutes)</label>
                <input id="expire-range" type="range" 
                    value="{{invite_expire}}"
                    class="mb-3 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
                    onchange="set_expire(this)"
                    placeholder="expiration in minutes"
                />
                <input id="expire-input" type="text" 
                    value="{{invite_expire}}"
                    class="m-auto mb-3 w-25 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    onchange="set_expire_input(this)"
                    placeholder="expiration in minutes"
                />
                <p id="expire-value" class="w-80% ml-2 w-200 mb-2 text-sm font-medium text-gray-900 dark:text-white"></p>
            </div>
            <div id="invite-messages-inpt" class="mb-3 text-red-500 text-xs italic"></div>
            {% if use_mail %}
            <div class="flex items-center mb-4">
                <input id="send-email" 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="send-email" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Send email
                </label>
            </div>
            {% endif %}
            <div class="flex items-center justify-center">
                <button id="create-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="invite()">
                    {% if use_mail %} Create Other {% else %} Create {% endif %}

                </button>
            </div>
        </form>
    </div>
</section>
<section id="invite-sec-out" class="w-auto text-gray-800 dark:text-gray-200">
    <div 
        class="flex flex-col space-y-2 items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 "
    >
        <div id="invite-messages-out" class="mb-3 p-3 text-indigo-500 text-xs italic"></div>
        <button id="invite-restart" 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="show_form()">
            Restart 
        </button>
    </div>
</section>
<script> const target_url = "{{target_url}}"; </script>
<script src="{{assets_url | default(value='')}}/js/invite.js"></script> 
{% include "partials/footer.html.j2" %}