{% extends "base.html" %}
{% block content %}
<div class="page-header"><h1>Services</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>Category</th><th>Servers</th></tr></thead>
        <tbody>
        {% for s in services %}
          <tr><td>{{ s.name }}</td><td>{{ s.category }}</td><td>{{ s.servers | length }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card-panel">
      <h2 class="h6">Add Service</h2>
      <form method="post" action="/servers-config/services/new">
        <div class="mb-2"><input name="name" class="form-control" placeholder="Name" required></div>
        <div class="mb-2"><input name="category" class="form-control" placeholder="Category (web/db/mail...)"></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 %}