{% extends "base_settings_page.html" %}
{% block content %}

<form method="post" target="/admin/users">
    <!-- User ID -->
    <div class="form-group">
        <label class="form-label mt-4" for="userID">User ID</label>
        <input class="form-control" id="userID" type="text" readonly=""
               name="uid" value="{{ u.uid }}"/>
    </div>

    <!-- User name -->
    <div class="form-group">
        <label class="form-label mt-4" for="username">User name</label>
        <input class="form-control" id="username" type="text"
               name="username" value="{{ u.username }}" required/>
    </div>

    <!-- First name -->
    <div class="form-group">
        <label class="form-label mt-4" for="first_name">First name</label>
        <input class="form-control" id="first_name" type="text"
               name="first_name" value="{{ u.first_name }}"/>
    </div>

    <!-- Last name -->
    <div class="form-group">
        <label class="form-label mt-4" for="last_name">Last name</label>
        <input class="form-control" id="last_name" type="text"
               name="last_name" value="{{ u.last_name }}"/>
    </div>

    <!-- Email -->
    <div class="form-group">
        <label class="form-label mt-4" for="email">Email address</label>
        <input class="form-control" id="email" type="email"
               name="email" value="{{ u.email }}"/>
    </div>

    <div class="form-group mt-4">
        <!-- Generate new password -->
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="gen_new_password" id="gen_new_password" {% if
                   u.password.is_empty() %} checked="" {% endif %}>
            <label class="form-check-label" for="gen_new_password">
                Generate a new temporary password
            </label>
        </div>

        <!-- Enabled -->
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="enabled" id="enabled" {% if u.enabled %} checked="" {%
                   endif %}>
            <label class="form-check-label" for="enabled">
                Enabled
            </label>
        </div>

        <!-- Admin -->
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="admin" id="admin" {% if u.admin %} checked="" {% endif
                   %}>
            <label class="form-check-label" for="admin">
                Grant admin privileges
            </label>
        </div>
    </div>

    <!-- Granted clients -->
    <fieldset class="form-group">
        <legend class="mt-4">Granted clients</legend>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="granted_clients"
                       value="all_clients" {% if u.authorized_clients== None %} checked="" {% endif %}>
                Grant all clients
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="granted_clients"
                       value="custom_clients" {% if u.authorized_clients !=None %} checked="checked" {% endif %}>
                Manually specify allowed clients
            </label>
        </div>

        <div id="clients_target">
            {% for c in clients %}
            <div class="form-check">
                <input class="form-check-input" type="checkbox" class="authorize_client" data-id="{{ c.id.0 }}"
                       {% if u.can_access_app(c.id) %} checked="" {% endif %}>
                <label class="form-check-label" for="admin">
                    {{ c.name }}
                </label>
            </div>
            {% endfor %}
        </div>
    </fieldset>
</form>

<script>
    // Clients granted
    function refreshDisplayAuthorizedClients() {
        const clientsSelectorEl = document.getElementById("clients_target");
        const radioBtn = document.querySelector("input[name=granted_clients][value=custom_clients]");
        clientsSelectorEl.style.display = radioBtn.checked ? "block" : "none";
    }
    refreshDisplayAuthorizedClients();
    document.querySelectorAll("input[name=granted_clients]").forEach(el=> {
        el.addEventListener("change", refreshDisplayAuthorizedClients)
    })

</script>
{% endblock content %}