{% extends 'base.html' %}

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

{% block title %} | Project: {{ project.name }} - User groups{% 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-md-4 col-md-push-8">
            <div class="alert alert-info">
                {% if project.islocked %}
                    <p>The project is locked, therefore user groups cannot be edited. If you wish to edit them, you have to unlock the project in the <a href="{% url 'admin:project_settings' project.id %}"><strong>project settings</strong></a> first.</p>
                {% else %}
                    <p>Create user groups to grant `contribute` and `moderate` permissions to a set of users, also to grant access to subsets for private projects.</p>
                {% endif %}
            </div>
        </div>

        <div class="col-md-8 col-md-pull-4">
            <h3 class="header">
                {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
                <span>User groups</span>

                {% if not project.islocked %}
                    <a href="{% url 'admin:usergroup_create' project.id %}" class="btn btn-success btn-sm pull-right">
                        <span class="glyphicon glyphicon-plus"></span>
                        Create new user group
                    </a>
                {% endif %}
            </h3>

            <ul class="list-unstyled overview-list">
                <li>
                    <h4>
                        {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
                        <a href="{% url 'admin:admins_overview' project.id %}">Administrators</a>
                    </h4>

                    <p>Administrators for the project {{ project.name }}.</p>
                </li>

                {% for usergroup in project.usergroups.all %}
                    <li>
                        <h4>
                            {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
                            <a href="{% url 'admin:usergroup_overview' project.id usergroup.id %}">{{ usergroup.name }}</a>
                        </h4>

                        {% if usergroup.description %}<p>{{ usergroup.description }}</p>{% endif %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}
