{% extends "framework.html" %}

{% block content %}

{% block action_modals %}
{% include "modals/objects/edit_group_modal.html" %}
{% include "modals/objects/edit_group_member_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %}

<div class="panel-group" id="package-detail">
    <div class="panel panel-default">
        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
            {{ group.name }}
            <div id="actionsButton"
                 style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                     aria-haspopup="true" aria-expanded="false"><span
                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
                    style="padding-right:1em"></span></a>
                <ul id="actionsList" class="dropdown-menu">
                    {% block actions %}
                    {% include "actions/objects/group.html" %}
                    {% endblock %}
                </ul>
            </div>
        </div>
        <div class="panel-body">
            <p> {{ group.description }} </p>
        </div>
    </div>

    <p></p>

    <div class="panel panel-default">
        <div id="member-panel" style="font-size:2rem;height: 46px" class="panel-heading">Members</div>
        <div class="panel-body">
            <p>List of members of this group</p>
        </div>
        <ul class="list-group">
            {% for um in group.user_member.all %}
            <a class="list-group-item" href="{{ um.url }}">{{ um.username }}</a>
            {% endfor %}
            {% for gm in group.group_member.all %}
            <a class="list-group-item" href="{{ gm.url }}">{{ gm.name }}</a>
            {% endfor %}
        </ul>
    </div>

    <p></p>

    <div class="panel panel-default">
        <div id="package-panel" style="font-size:2rem;height: 46px" class="panel-heading">Packages</div>
        <div class="panel-body">
            <p>Packages where this group has access to</p>
        </div>
        <ul class="list-group">
            {% for p in packages %}
            <a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock content %}