{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Server Inventory</h1>
  {% if current_user.has_permission('servers.create') %}
    <a href="/servers/new" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus"></i> Add Server</a>
  {% endif %}
</div>

<form method="get" class="row g-2 mb-3">
  <div class="col-md-4"><input type="text" name="q" class="form-control form-control-sm" placeholder="Search hostname or IP" value="{{ q }}"></div>
  <div class="col-md-3">
    <select name="control_panel_id" class="form-select form-select-sm">
      <option value="">All Control Panels</option>
      {% for cp in control_panels %}<option value="{{ cp.id }}">{{ cp.name }}</option>{% endfor %}
    </select>
  </div>
  <div class="col-md-3">
    <select name="status" class="form-select form-select-sm">
      <option value="">All Statuses</option>
      {% for s in statuses %}<option value="{{ s.value }}">{{ s.value | capitalize }}</option>{% endfor %}
    </select>
  </div>
  <div class="col-md-2"><button class="btn btn-sm btn-outline-secondary w-100">Filter</button></div>
</form>

<div class="card-panel">
  <table class="hop-table">
    <thead><tr><th>Hostname</th><th>IP</th><th>Control Panel</th><th>OS</th><th>Status</th></tr></thead>
    <tbody>
    {% for s in servers %}
      <tr>
        <td><a class="row-link" href="/servers/{{ s.id }}">{{ s.hostname }}</a></td>
        <td>{{ s.ip_address }}</td>
        <td>{{ s.control_panel.name if s.control_panel else '—' }}</td>
        <td>{{ s.os_name }} {{ s.os_version }}</td>
        <td><span class="status-pill badge-status-{{ s.status.value }}">{{ s.status.value }}</span></td>
      </tr>
    {% else %}
      <tr><td colspan="5"><div class="empty-state"><i class="fa-solid fa-server"></i><p>No servers found.</p></div></td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}