{% extends "base.html" %}
{% block content %}
<div class="page-header"><h1>Datacenters</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>Location</th><th>Provider</th><th>Servers</th></tr></thead>
        <tbody>
        {% for dc in datacenters %}
          <tr><td>{{ dc.name }}</td><td>{{ dc.location }}</td><td>{{ dc.provider }}</td><td>{{ dc.servers | length }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card-panel">
      <h2 class="h6">Add Datacenter</h2>
      <form method="post" action="/servers-config/datacenters/new">
        <div class="mb-2"><input name="name" class="form-control" placeholder="Name" required></div>
        <div class="mb-2"><input name="location" class="form-control" placeholder="Location"></div>
        <div class="mb-2"><input name="provider" class="form-control" placeholder="Provider"></div>
        <button class="btn btn-primary btn-sm w-100">Add</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}