{% extends "base.html" %}
{% block content %}
<div class="page-header"><h1>Control Panels</h1></div>
<div class="row g-3">
  <div class="col-lg-8">
    <div class="card-panel">
      <table class="hop-table">
        <thead><tr><th>Name</th><th>Description</th><th>Servers</th></tr></thead>
        <tbody>
        {% for p in panels %}
          <tr><td>{{ p.name }}</td><td>{{ p.description }}</td><td>{{ p.servers | length }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card-panel">
      <h2 class="h6">Add Control Panel</h2>
      <form method="post" action="/servers-config/control-panels/new">
        <div class="mb-2"><input name="name" class="form-control" placeholder="Name" required></div>
        <div class="mb-2"><textarea name="description" class="form-control" placeholder="Description" rows="2"></textarea></div>
        <button class="btn btn-primary btn-sm w-100">Add</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}