{% extends 'base.html' %}
{% block 'body' %}
<h1>Add a trusted user</h1>

<form class="form-horizontal" action="{% url 'add_trusted_user' org.id %}" method="POST">
    <div class="form-group-inline">
        <input type="search" id="searchbox" class="form-control" placeholder="Search users..."></input>
    </div>

    {% for user in users %}
        <div class="checkbox-inline user_sortable">
            <input type="checkbox" id="u_{{ user.id }}" value="{{ user.id }}" name="u_{{ user.id }}" />
            <label for="u_{{ user.id }}" class="name-modified">{{ user.name }}</label>
        </div>
    {% endfor %}

    <script>
        const usersearch = document.getElementById("searchbox");
        const userchecks = document.getElementsByClassName("user_sortable");
        usersearch.addEventListener("keyup", function () {
            var query = usersearch.value.toLowerCase();
            for (let user of userchecks) {
                var name = user.children[1].innerHTML.toLowerCase()
                if(name.includes(query)) {
                    user.style.display = null;
                } else {
                    user.style.display = "none";
                }
            }
        });
    </script>

    <div class="form-group">
        <button type="submit" class="btn btn-primary">Add user</button>
    </div>

    {% csrf_token %}
</form>
{% endblock %}