{% extends "layout.html" %}

{% block content %}
<div class="container-xl">
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          Servers
        </h2>
      </div>
      <div class="col-auto ms-auto">
        <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary">
          <i class="fas fa-plus me-2"></i> Add Server
        </a>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-body">
      {% if servers %}
      <div class="table-responsive">
        <table class="table table-vcenter table-hover">
          <thead>
            <tr>
              <th>Hostname</th>
              <th>IP Address</th>
              <th>Subnet</th>
              <th>Created</th>
              <th class="w-1"></th>
            </tr>
          </thead>
          <tbody>
            {% for server in servers %}
            <tr>
              <td>{{ server.hostname }}</td>
              <td>{{ server.ip_address }}</td>
              <td>{{ server.subnet.cidr if server.subnet else 'N/A' }}</td>
              <td>{{ server.created_at.strftime('%Y-%m-%d') }}</td>
              <td>
                <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="btn btn-sm btn-primary">
                  View
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="text-center py-4">
        <div class="mb-3">No servers added yet</div>
        <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary">
          Add Your First Server
        </a>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}