{%if usr_items and usr_items.theme %}
    {% set theme = usr_items.theme %}
{% else %}
    {% set theme = "" %}
{% endif %}
{% if user and user.isadmin and user.isadmin == "TRUE" or isadmin and isadmin == "TRUE"  %}
   {% set is_admin_user = 1 %}
{% else %}
   {% set is_admin_user = 0 %}
{% endif %}
{%if not admin_fields %}
    {% set admin_fields = "" %}
{% endif %}

<div class="mb-5 relative z-0 flex">
    <input type="text" id="user-name-inpt" onchange="set_name(this)"
        class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        value="{{user.name | default(value='')}}"
        data-val="{{user.name | default(value='')}}"
        {% if no_edit %} disabled {% elif is_admin_user != 1 and admin_fields is containing('name') %} disabled {% endif %}
    placeholder=" " />
    <label for="user-name-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
        Username
    </label>
</div>
<div class="mt-2 mb-5 text-xs text-red-500" id="name-error"></div>
<div class="mb-5 relative z-0 flex">
    <input type="text" id="user-fullname-inpt" 
        class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        value="{{user.fullname | default(value='')}}"
        data-val="{{user.fullname | default(value='')}}"
        {% if no_edit %} disabled {% elif is_admin_user != 1 and admin_fields is containing('fullname') %} disabled {% endif %}
    placeholder=" " />
    <label for="user-fullname-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
        Fullname
    </label>
</div>
<div class="mb-5 relative z-0 flex">
    <input type="text" id="user-description-inpt" 
        class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        value="{{user.description | default(value='')}}"
        data-val="{{user.description | default(value='')}}"
        {% if no_edit %} disabled {% elif is_admin_user != 1 and admin_fields is containing('description') %} disabled {% endif %}
    placeholder=" " />
    <label for="user-description-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
    Description
    </label>
</div>
<div class="mb-5 relative z-0 flex">
    <input type="text" id="user-email-inpt" onchange="set_email(this)"
        class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        value="{% if invite_id %}{{invite_id}}{% else %}{{user.email | default(value='')}}{% endif %}"
        data-val="{% if invite_id %}{{invite_id}}{% else %}{{user.email | default(value='')}}{% endif %}"
        {% if no_edit %} disabled {% elif is_admin_user != 1 and admin_fields is containing('email') %} disabled {% endif %}
    placeholder=" " />
    <label for="user-email-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
    Email address</label>
</div>
<div class="mt-2 mb-5 text-xs text-red-500" id="email-error"></div>
{% if user and user.roles and user.roles != '' %}
   {% set roles = user.roles %}
{% elif is_admin_user == 1 %}
   {% set roles = 'admin,dev' %}
{% else %}
   {% set roles = 'default' %}
{% endif %}
{% if no_edit %}
   {% set css_roles = 'hidden'%}
{% elif is_admin_user != 1 and admin_fields is containing('roles') %} 
   {% set css_roles = 'hidden'%}
{% else %}
   {% set css_roles = ''%}
{% endif %}
<div class="mb-3 flex space-x-3 text-gray-500 dark:text-gray-400">
    <div class="mt-1 text-sm">Roles: </div>
    <div id="roles-chips" class="flex {% if css_roles == '' %}mb-3{% endif %}"></div>
</div>
<div class="{{css_roles}} mb-2 relative z-0 flex">
    <input type="text" id="user-roles-inpt" onchange="set_role(this)"
        class=" block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        value="{{roles}}"
        data-val="{{user.roles | default(value='')}}"
        {% if no_edit %} disabled {% elif is_admin_user != 1 and admin_fields is containing('roles') %} disabled {% endif %}
    placeholder=" " />
    <label for="user-roles-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
    List of roles</label>
</div>
<div class="{{css_roles}} mb-5 text-xs text-gray-500">separated with commas</div>
<div class="mb-5 flex space-x-8 items-center">
    <label for="theme-select" class="mt-1 block mb-2 text-xs font-medium text-gray-900 dark:text-gray-200">Theme</label>
    <select show_dark=true id="theme-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-400 peer"
        onchange="set_theme(this)" 
        data-val="{{theme}}"
        {% if no_edit %} disabled {% elif is_admin_user != 1 and admin_fields is containing('items') %} disabled {% endif %}
    >
        <option value="light" {% if theme == 'light' %} selected {% endif %}>Light</option>
        <option value="dark" {% if theme == 'dark' %} selected {% endif %}>Dark</option>
    </select>
</div>
{% if openid_sel_appkeys %}
   {% set openids_keys = openid_sel_appkeys %}
{% else %}
   {% set openids_keys = ''%}
{% endif %}
{% if no_edit or openids_keys == "" %}
   {% set css_openid = 'hidden'%}
{% else %}
   {% set css_openid = ''%}
{% endif %}
<div class="mb-3 flex space-x-3 text-gray-500 dark:text-gray-400">
    <div class="mt-1 text-sm">OpenIDs:
        <svg class="ml-3 mr-3 svg" width="20" height="20" aria-hidden="true"><use href="#symbl-openid"/></svg>
    </div>
    <div id="openids-chips" class="flex {% if css_openid == '' %}mb-3{% endif %}"></div>
</div>
<div class="{{css_openid}} mb-2 relative z-0 flex">
    <input type="text" id="user-openids-inpt" onchange="set_openid(this)"
        class=" block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        value="{{openids_keys | default(value='')}}"
        data-val="{{openids_keys | default(value='')}}"
    placeholder=" " />
    <label for="user-openids-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
    Openid Auths</label>
</div>
<div class="{{css_openid}} mb-1 text-xs text-gray-500">Separated with commas.</div>
<div class="{{css_openid}} mb-5 text-xs text-gray-500">ONLY <b>to delete existing</b> items.</div>
