{% include "partials/header.html.j2" %}
<section class="bg-center bg-no-repeat text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 bg-blend-multiply">
    <div class="flex justify-between items-center px-4 mx-auto py-4 lg:py-5">
        <h1 class="mt-2 mx-5 mb-4 text-3xl font-extrabold tracking-tight leading-none tex-gray-700 dark:text-gray-300  md:text-4xl lg:text-5xl">
            <div>Users List</div> 
        </h1>
        <div class="mx-8"><span id="count-select" class="p-2 text-gray-700 dark:text-gray-300"></span>{{total_usrs | default(value="") }} items</div>
</section>
<section class="bg-white dark:bg-gray-900 pt-0 px-2 lg:px-5">
    <div class="relative min-h-200 overflow-x-auto overflow-y-hidden shadow-md sm:rounded-lg">
        <div class="flex flex-col md:flex-row items-center justify-center space-y-3  md:justify-between py-4 bg-white dark:bg-gray-800">
            <div>
                <button id="dropdown-action-button" data-dropdown-toggle="dropdown-action" class="ml-2 inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                    <span class="sr-only">Action button</span>
                    Action
                    <svg class="w-3 h-3 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>
                <!-- Dropdown menu -->
                <div id="dropdown-action" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
                    <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdown-action-button">
                        <li>
                            <button class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" onclick="act_reset_password()">Reset Password</button>
                        </li>
                        <li>
                            <button  class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" onclick="act_reset_totp()">Reset TOTP</button>
                        </li>
                        <li>
                            <button  class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" onclick="act_set_isadmin()">Set Admin</button>
                        </li>
                    </ul>
                    <div class="py-1">
                        <button class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" onclick="act_delete()">Delete User</button>
                    </div>
                </div>
            </div>
            <a href="/logs" 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">
                <span class="relative px-2 py-1 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                   <img src="/assets/images/log.svg" width="35em"> 
                </span>
            </a>
            <a href="/signup" class="max-w-32 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">
                <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                   New Signup 
                </span>
            </a>
            {% if signup_mode != "open" %} 
            <a href="/invite" class="max-w-38 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-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800">
                <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                    Invite new User
                </span>
            </a>
            {% endif %}
            <label for="table-search" class="sr-only">Search</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
                </div>
                <input type="text" id="table-search-usrs" class="block p-2 pl-10 w-60 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 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" placeholder="Search for users"
                  onchange="on_search(this,event)"
                  onkeydown="on_search_keydown(this,event)"
                >
                <button type="button" class="absolute inset-y-0 right-2 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
                    onclick="clean_search()"
                >
                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
                </button>
            </div>
        </div>
        <div id="alert-danger" class="hidden flex items-center w-full max-w-xs mt-2 p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
            <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                <span class="sr-only">Error icon</span>
            </div>
            <div id="danger-message" class="ml-3 text-sm font-normal"></div>
            <button type="button" class="ml-auto -mx-0 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" 
                aria-label="Close"
                onclick="alert_danger('close','')"
            >
                <span class="sr-only">Close</span>
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
        </div>
        <div id="alert-info" class="hidden flex items-center w-full max-w-xs mt-2 py-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
            <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                <span class="sr-only">Info icon</span>
            </div>
            <div id="info-message" class="ml-3 text-sm font-normal"></div>
            <button type="button" class="ml-auto -mx-0 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" 
                aria-label="Close"
                onclick="alert_info('close','')"
            >
                <span class="sr-only">Close</span>
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
        </div>
        <table id="table-usrs" class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th data-th="check" scope="col" class="py-4 pl-2">
                        <div class="flex items-center">
                            <input id="checkbox-all" type="checkbox" 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 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                onchange="on_check_all(this,event)"
                            >
                            <label for="checkbox-all-search" class="sr-only">checkbox</label>
                        </div>
                    </th>
                    <th data-th="name" scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            Name
                            <svg class="pl-2 w-4 h-4"><use href="#symbl-table-col-sort" /></svg>
                            <svg id="name-arrow-down" class="hidden pl-2 w-6 h-6"><use href="#symbl-arrow-up" /></svg> 
                            <svg id="name-arrow-up" class="hidden pl-2 w-6 h-6"><use href="#symbl-arrow-down" /></svg> 
                        </div>
                    </th>
                    <th data-th="roles" scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                           Logs 
                        </div>
                    </th>
                    <th data-th="roles" scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            Roles
                        </div>
                    </th>
                    <th data-th="status" scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            Status
                            <svg class="pl-2 w-4 h-4"><use href="#symbl-table-col-sort" /></svg>
                        </div>
                    </th>
                    <th data-th="status" scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            Is Admin 
                        </div>
                    </th>
                    <th data-th="status" scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            Open IDs
                        </div>
                    </th>
                    <th data-th="totp" scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                            TOTP
                        </div>
                    </th>
                    <th data-th="totp" scope="col" class="px-6 py-3">
                        <div class="flex items-center">
                           Dates 
                        </div>
                    </th> 
                </tr>
            </thead>
            <tbody>
                {% if users %}
                {% for user in users %}
                    {% if loop.index % 2 == 0%}
                    {% set tr_css="bg-gray-100 dark:bg-gray-800" %}
                    {% else %}
                    {% set tr_css="bg-white dark:bg-gray-900" %}
                    {% endif %}
                    {% if user.isadmin == true %}
                       {% set text_isadmin = '1' %}
                    {% else %}
                       {% set text_isadmin = '0' %}
                    {% endif %}

                <tr data-row="{{user.name~':'~user.fullname~':'~user.email~':'~user.description~':'~user.roles~':'~user.status~':'~text_isadmin}}" class="{{tr_css}} hover:bg-gray-300 dark:hover:bg-gray-700">
                    <td class="w-4 p-2">
                        <div class="flex items-center">
                            <input data-col="{{loop.index0}}" id="checkbox-table-search-3" type="checkbox" class="col-check 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 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                        </div>
                       
                    </td>
                    <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        {% set first = user.name | truncate(length=1, end="") | upper %}
                        <div class="border-2 p-0.2 rounded-full border-indigo-500">
                            <button data-popover-target="popover-{{user.name}}-profile" data-popover-placement="bottom"  type="button" 
                                class="relative inline-flex items-center justify-center border-1 border-gray-500 overflow-hidden text-sm font-medium text-gray-900 rounded-full 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_row({{loop.index0}})"
                            >
                                <span class="relative px-3.5 py-1 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                                    <div class="text-2xl">{{ first }}</div>
                                </span>
                                {# class="py-2.5 px-5 mx-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-full border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" #}
                            </button>
                        </div>
                        <div data-popover id="popover-{{user.name}}-profile" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600">
                            <div class="p-3 flex flex-col items-center space-y-3">
                                <p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
                                    {{user.fullname}}
                                </p>
                                <p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
                                    {{user.email}}
                                </p>
                                <p class="mb-3 text-sm font-normal">
                                    {{user.description}}
                                </p>
                                <div id="toast-{{user.name}}" class="flex items-center w-full max-w-xs p-4 space-x-4 text-gray-500 bg-white divide-x divide-gray-200 rounded-lg shadow dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800" role="alert">
                                    <svg aria-hidden="true" class="w-5 h-5 text-blue-600 dark:text-blue-500" focusable="false"><use href="#symbl-edit" /></svg>
                                    <div class="pl-4 text-sm font-normal">Click to Edit</div>
                                </div>
                            </div>
                            <div data-popper-arrow></div>
                        </div>
                        <div class="pl-3">
                            <div class="text-base font-semibold">{{user.name}}</div>
                            <div class="font-normal text-gray-500">{{user.fullname}}</div>
                        </div>
                    </th>
                    <td class="px-6">
                        <a href="/log/{{user.id}}" class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium">
                           <img src="/assets/images/log.svg" width="35em">
                        </a>
                    </td>
                    <td class="px-6">
                        {% set roles = user.roles | split(pat=",") %}
                        {% for rol in roles %}
                        <span class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium text-blue-800 bg-blue-100 rounded dark:bg-blue-900 dark:text-blue-300">
                           {{rol}}
                        </span>
                        {% endfor %}
                    </td>
                    <td  class="px-6">
                        {% if user.status == "Active" %}
                         {% set status_color="green" %}
                        {% elif user.status == "Created" %}
                         {% set status_color="blue" %}
                        {% elif user.status == "Pending" %}
                            {% set status_color="orange" %}
                        {% elif user.status == "Lock" %}
                            {% set status_color="red" %}
                        {% else %}
                            {% set status_color="yellow" %}
                        {% endif %}
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-{{status_color}}-500 mr-2"></div>{{user.status}} 
                        </div>
                    <td class="px-6">
                        <div class="flex items-center">
                            {% if user.isadmin == true %} admin {% endif %}
                        </div>
                    </td>
                    <td class="px-6">
                        <div class="flex items-center">
                            {% if users_openids and users_openids[loop.index0] %}
                               {{ users_openids[loop.index0] | default(value='') }}
                            {% endif %}
                        </div>
                    </td>
                    <td class="px-6">
                        <div class="flex flex-col mt-2">
                            <div class="mt-2 mb-2 flex space-x-2">
                                {% if user.otp_enabled == 1 %}
                                <span class="bg-gray-100 text-gray-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-gray-700 dark:text-gray-400 border border-gray-500">
                                    <svg aria-hidden="true" class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
                                    Enabled
                                </span>
                                {% endif %}
                                {% if user.otp_verified == 1 %}
                                <span class="bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400">
                                    <svg aria-hidden="true" class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
                                    Verified
                                </span>
                                {% endif %}
                            </div>
                            {% if user.otp_defs != "" %}
                            <div class="m-2">defs: {{user.otp_defs}} </div>
                            {% endif %}
                        </div> 
                        {# <a href="#" type="button" data-odal-show="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                         onclick="edit_row({{loop.index0}})"
                        >Edit user</a> #}
                    </td>
                    <td class="px-6">
                        <div class="flex flex-col mt-2">
                            <div> {{user.lastaccess}} </div>
                            <div> {{user.created}} </div>
                        <div>
                    </td>
                </tr>
                {% endfor %}
                {% endif %}
            </tbody>
        </table>
        <!-- Edit user modal -->
        {% include "partials/modal_edit_user.html.j2" %}
    </div>
</section>
<script id="js-data">
   let users_list = {% if users %} JSON.stringify({{users | map(attribute="id")| json_encode() | safe }}); {% else %} ''; {% endif %}
</script>
<script>
    const GETUSER_URL = "{{main_url}}/userget";
    const SAVEUSER_URL = "{{main_url}}/usersave";

    const RESETPASSWD_URL = "{{main_url}}/passwdreset";
    const SETADMIN_URL = "{{main_url}}/userasadmin";
    const RESETTOTP_URL = "{{main_url}}/userdisabletotp";
    const DELETEUSER_URL = "{{main_url}}/userdelete";
{#
    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 == true or isadmin == 'TRUE' %}
    const id_user = 'A';
    {% else %}
    const id_user = '';
    {% endif %}
#}
</script>
<script src="{{assets_url | default(value='')}}/js/users.js"></script> 
{% include "partials/symbols.html.j2" %} 
{% include "partials/footer.html.j2" %}
