{% extends "base.html" %}
{% block content %}
<h4 class="mb-4">Groups</h4>

{% if error %}
<div class="alert alert-danger" role="alert">
  {{ error }}
</div>
{% endif %}

<form method="post" class="mb-4">
  <div class="d-flex justify-content-between">
    <input class="form-control" name="secret" placeholder="Group secret" required>
    &nbsp;
    <button class="btn btn-success">+</button>
  </div>
</form>

<ul class="list-group">
  {% for group in groups %}
  <li class="list-group-item">
    <div class="fw-semibold">Group {{ group.id }}</div>
    <div class="text-muted small">{{ group.secret }}</div>
  </li>
  {% endfor %}
</ul>
{% endblock %}