{% extends "base.html" %}

{% block title %}{{ name }}{% endblock %}

{% block extra_head %}
<style>
.remove-button {
  background-color: #fff;
  border: 2px solid #ff4d4d;
  color: #ff4d4d;
  padding: 3px 6px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.remove-button-margin-left {
  margin-left: 2em;
}
.remove-button:hover {
  background-color: #ffc4c4;
  border-color: #ff3333;
  color: #ff3333;
}

.remove-button:active {
  transform: scale(0.9);
}
</style>
{% endblock %}

{% block crumbs %}

<p class="crumbs">
  <a href="{{ urls.path("/") }}">home</a>
  /
  <a href="{{ urls.path("/-/acl/groups") }}">groups</a>
</p>

{% endblock %}

{% block content %}
<h1>{{ name }} ({{ size }})</h1>

{% if is_deleted %}<p>This group has been deleted.</p>{% endif %}

{% if dynamic_config %}
<p>This is a <em>dynamic group</em>. You cannot manually edit the users in this group.</p>

<p>Users matching <code>{{ dynamic_config|tojson }}</code> will be automatically added to the group.</p>

{% if members %}
  <h2>Group members</h2>
  <ul>
    {% for member in members %}
      <li>{{ member }}</li>
    {% endfor %}
  </ul>
  {% endif %}
{% else %}
<form action="{{ request.path }}" method="post">
  <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
{% if members %}
<table>
  {% for member in members %}
  <tr>
    <td>{{ member }}</td><td><button name="remove" value="{{ member }}" class="remove-button remove-button-margin-left">Remove {{ member }}</button></td>
  </tr>
  {% endfor %}
</table>
{% endif %}
</form>
{% if not is_deleted %}
<h2>Add a member</h2>

<form action="{{ request.path }}" method="post">
  <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
  <p><label>User ID <input type="text" name="add"></label> <input type="submit" value="Add member"></p>
</form>
{% endif %}
{% endif %}

{% if audit_log %}
<h2>Audit history</h2>
<table>
  <thead>
    <tr>
      <th>Date and time</th>
      <th>Operation by</th>
      <th>Operation</th>
      <th>User</th>
    </tr>
  </thead>
  <tbody>
    {% for entry in audit_log %}
      <tr>
        <td>{{ entry.timestamp }}</td>
        <td>{{ entry.operation_by or '*dynamic*' }}</td>
        <td>{{ entry.operation }}</td>
        <td>{{ entry.actor_id or '' }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

{% if not is_deleted and not dynamic_config %}
  <form action="{{ request.path }}" method="post" style="margin-top: 1em">
    <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
    <p><button name="delete_group" value="1" class="remove-button">Delete this group</button></p>
  </form>
{% endif %}

<script>
// Focus on add input if we just added a member
if (window.location.hash === '#focus-add') {
  document.querySelector('input[name="add"]').focus();
}
</script>

{% endblock %}