{% extends "base.html" %}
{% load static %}
{% block body %}

<a href="{% url "create_group" %}" class="btn btn-success btn-sm">New Group</a>
<br/><br/>
{% for group in groups %}
<div class="card bg-light">
  <div class="card-header">{{group.name}}</div>
  <div class="card-body">
    <p class="card-text">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Subnet</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        {% for subnet in group.subnets %}
        <tr>
          <td>{{subnet.name}}</td>
          <td>{{subnet.subnet}}</td>
          <td>
            <a href="{% url "remove_group_subnet" group_id=group.id permission_id=subnet.id %}" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></a>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <a href="{% url "add_group_subnet" group_id=group.id %}" class="btn btn-sm btn-info"><i class="fas fa-plus"></i></a>
    <a href="{% url "delete_group" group_id=group.id %}" onclick="return window.confirm('Are you sure you want to delete {{group.name}}?');" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></a>
    </p>
  </div>
</div>
<br/>
{% endfor %}
{% endblock %}