{% extends "base.html" %}
{% from "_macros.html" import empty %}
{% block title %}Security groups · mgf-cloud-web{% endblock %}
{% block content %}
<header class="page-header">
  <div>
    <p class="eyebrow">networking</p>
    <h1>Security groups</h1>
  </div>
</header>
<div class="split">
  <div>
    {% if secgroups %}
    <div class="table-wrap">
      <table class="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 method="post" action="/security-groups/{{ g.name }}/delete"><button class="button button-danger button-sm">delete</button></form></td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    {{ empty("No security groups.", "Create a group to define firewall rules.") }}
    {% endif %}
  </div>
  <aside class="card">
    <p class="eyebrow">create security group</p>
    <form class="form" method="post" action="/security-groups">
      <div class="field"><label class="label" for="sgname">Name</label><input class="input" id="sgname" name="name" required></div>
      <div class="field"><label class="label" for="sgdesc">Description</label><input class="input" id="sgdesc" name="description"></div>
      <button class="button button-accent" type="submit">Create</button>
    </form>
  </aside>
</div>
{% endblock %}