{% extends "layout.html" %}
{% from "_formhelpers.html" import render_field %}

{% block head %}Group: {{group}}{% endblock %}

{% block content %}
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Info</h3>
  </div>

  <div class="panel-body">
    {% if group.description %}
      {{ group.description }}
    {% else %}
      No description
    {% endif %}
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Members</h3>
  </div>

  <ul class="list-group">
    {% for member in members|selectattr("active") %}
      <li class="list-group-item">{{member.user}}{% if member.admin %} (is admin){% endif %}</li>
    {% endfor %}
  </ul>
</div>

{% if admin %}
  {% for member in members|rejectattr("active") %}
    {% if loop.first %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Pending members</h3>
      </div>

      <table class="table table-hover">
        <tr>
           <th class="col-sm-3">username</th>
           <th class="col-sm-9 text-center">mail</th>
        </tr>
    {% endif %}
        <tr>
          <td>{{member.user.username}}</td>
          <td class="text-center">{{member.user.email}}</td>
        </tr>
    {% if loop.last %}
      </table>
    </div>
    {% endif %}
  {% endfor %}

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <a data-toggle="collapse" href="#collapseOperations">
          Operations
        </a>
      </h3>
    </div>

    <div id="collapseOperations" class="panel-collapse collapse in">
      <div class="panel-body">
        <p class="col-lg-offset-2 col-lg-8">
          <a href="{{ url_for('group_change', group_name=group.name) }}" class="btn btn-block btn-default">Change this group</a>
        </p>

        <p class="col-lg-offset-2 col-lg-8">
          <a href="{{ url_for('group_delete', group_name=group.name) }}" class="btn btn-block btn-danger">Delete this group</a>
        </p>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $('#collapseOperations').collapse('hide');
  </script>
{% endif %}
{% endblock %}