{% extends 'base.html' %}
{% block 'body' %}
<h1>Create a new organization</h1>

<p><i>You will be the administrator of this organization. If you don't want to be, <b>do not create the organization under your account &mdash; use someone else's!</b> You <b>won't be able to transfer ownership later</b>, so make a wise decision now.</i></p>
<form class="form-horizontal" action="{% url 'add_organization_flow_select' %}" method="POST">
    <div class="form-group-inline">
        <label class="control-label" for="organization-name">Organization name:</label>
        <input type="text" id="organization-name" name="name" class="form-control">
    </div>

    <style>
        .name-modified {
            font-weight: 100;
        }
    </style>

    <h2>Choose trusted channels</h2>
    <p>
    In order to have a channel appear as a choice here, you must be in that channel and you must be an admin in that channel.
    Trusted users can only send messages from trusted channels.

    (For technical reasons, if you're in more than 200 groups, we don't show all of them.
    Also, you're in <i>200 groups?</i>)
    </p>

    {% for group in groups %}
        <div class="checkbox-inline">
            <input type="checkbox" id="g_{{ group.id }}" value="{{ group.id }}" name="g_{{ group.id }}" />
            <label for="g_{{ group.id }}" class="name-modified">{{ group.name }}</label>
        </div>
    {% endfor %}

    <h2>Choose trusted users</h2>
    <p>
    A user appears here if they're in one of the channels you administrate.
    If someone is a trusted user, they can send messages to every group in a trusted channel.
    Don't forget to add yourself!
    </p>

    <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">Create organization</button>
    </div>

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