<h3 class="header">
    {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
    User group members
</h3>

{% if project.islocked %}
    <div class="alert alert-info">
        <p>The project is locked, therefore user group cannot be edited. If you wish to edit it, you have to unlock the project in the <a href="{% url 'admin:project_settings' project.id %}"><strong>project settings</strong></a> first.</p>
    </div>
{% else %}
    <div class="dropdown">
        <input type="text" id="find-users" class="form-control" placeholder="Search for users to add to this user group">

        <ul class="dropdown-menu type-away">
            <li role="presentation" class="dropdown-header">Click on item to add user</li>
        </ul>
    </div>
{% endif %}

{% if users.all %}
    <ul class="user-list">
    	{% for user in users %}
    		<li>
    			{{ user }}
    			{% if users|length > 1 or not admins and not project.islocked %}<a class="text-danger remove" data-user-id="{{ user.id }}" href="#"><small>remove</small></a>{% endif %}
    		</li>
    	{% empty %}
    		<li>No users have been added to this user group yet.</li>
    	{% endfor %}
    </ul>
{% else %}
    <div class="well empty-list">
        <p class="lead">We couldn't find any users assigned to this user group.</p>

        {% if project.islocked %}
            <p>Unfortunately, you cannot add new users when the project is locked.</p>
        {% else %}
            <p>Type a display name in the input field to find the user you want to add, then click on the name in the results list to add the user to this user group.</p>
        {% endif %}
    </div>
{% endif %}
