{% extends 'base.html' %}

{% block bodydata %}
data-project-id="{{ project.id }}"
data-project-locked="{{ project.islocked }}"
data-usergroup-id="{{ usergroup.id }}"
{% endblock %}

{% block title %} | Project: {{ project.name }} - User group: {{ usergroup.name }} - Overview{% endblock %}

{% block main %}
<div class="page-header">
    <div class="container">
        <h1 class="smaller">
            {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
            <a href="{% url 'admin:project_overview' project.id %}">{{ project.name }}</a>
        </h1>

        {% include 'projects/navigation.html' %}
    </div>
</div>

<div class="container">
    {% include 'snippets/messages.html' %}

    <div class="row">
        <div class="col-sm-4">
            {% include 'users/usergroup_navigation.html' %}
        </div>

        <div class="col-sm-8" id="members">
            {% include 'snippets/usergroup_editor.html' with users=usergroup.users.all %}
        </div>
    </div>
</div>
{% endblock %}

{% block libraries %}
<script src="/static/lib/handlebars/handlebars.js"></script>
<script src="/static/js/templates.js"></script>

<script src="/static/js/admin.ui.usergroup.users.js"></script>
<script src="/static/js/admin.control.ajax.js"></script>
{% endblock %}
