{% extends "base.html" %}{% block content %}
<div class="page-header">
 <div class="titles"><h1>Security groups</h1></div>
</div>
<div class="table-wrap">
<table>
<thead><tr><th>Name</th><th>Description</th><th class="num">Rules</th><th class="actions"></th></tr></thead>
<tbody>
{% for g in secgroups %}
<tr>
 <td>{{ g.name }}</td><td>{{ g.description }}</td><td class="num">{{ g.rules|length }}</td>
 <td class="actions"><form class="inline" method="post" action="/security-groups/{{ g.name }}/delete"><button class="danger">delete</button></form></td>
</tr>
{% else %}<tr><td colspan="4" class="muted">No security groups.</td></tr>{% endfor %}
</tbody>
</table>
</div>
<div class="card" style="max-width:540px">
 <p class="card-title">Create security group</p>
 <form class="form-row" method="post" action="/security-groups">
  <label class="field">Name<input name="name" required></label>
  <label class="field">Description<input name="description"></label>
  <button class="primary">Create</button>
 </form>
</div>
{% endblock %}