{% extends "base.html" %}
{% block content %}
<div class="breadcrumb-bar"><a href="/servers">Servers</a> / {{ server.hostname }}</div>
<div class="page-header">
  <h1>{{ server.hostname }} <span class="status-pill badge-status-{{ server.status.value }}">{{ server.status.value }}</span></h1>
  <div>
    {% if current_user.has_permission('servers.edit') %}<a href="/servers/{{ server.id }}/edit" class="btn btn-outline-primary btn-sm"><i class="fa-solid fa-pen"></i> Edit</a>{% endif %}
    {% if current_user.has_permission('servers.delete') %}
      <form class="d-inline" method="post" action="/servers/{{ server.id }}/delete" onsubmit="return confirm('Delete this server record? This cannot be undone.')">
        <button class="btn btn-outline-danger btn-sm"><i class="fa-solid fa-trash"></i> Delete</button>
      </form>
    {% endif %}
  </div>
</div>

<ul class="nav nav-tabs mb-3" id="serverTabs">
  <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#overview">Overview</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#resources">Resources</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#services">Services</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#backup">Backup &amp; Monitoring</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#notes">Notes</button></li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="overview">
    <div class="card-panel">
      <dl class="row mb-0">
        <dt class="col-sm-3">IP Address</dt><dd class="col-sm-9">{{ server.ip_address or '—' }}</dd>
        <dt class="col-sm-3">IPv6</dt><dd class="col-sm-9">{{ server.ipv6_address or '—' }}</dd>
        <dt class="col-sm-3">Control Panel</dt><dd class="col-sm-9">{{ server.control_panel.name if server.control_panel else '—' }}</dd>
        <dt class="col-sm-3">Datacenter</dt><dd class="col-sm-9">{{ server.datacenter.name if server.datacenter else '—' }} {{ '('+server.datacenter.location+')' if server.datacenter and server.datacenter.location else '' }}</dd>
        <dt class="col-sm-3">Provider</dt><dd class="col-sm-9">{{ server.provider or '—' }}</dd>
        <dt class="col-sm-3">Type</dt><dd class="col-sm-9">{{ server.server_type or '—' }}</dd>
        <dt class="col-sm-3">OS</dt><dd class="col-sm-9">{{ server.os_name }} {{ server.os_version }} ({{ server.architecture }})</dd>
      </dl>
    </div>
  </div>

  <div class="tab-pane fade" id="resources">
    <div class="card-panel">
      <dl class="row mb-0">
        <dt class="col-sm-3">CPU</dt><dd class="col-sm-9">{{ server.cpu }} ({{ server.cpu_cores }} cores)</dd>
        <dt class="col-sm-3">RAM</dt><dd class="col-sm-9">{{ server.ram_gb }} GB</dd>
        <dt class="col-sm-3">Swap</dt><dd class="col-sm-9">{{ server.swap_gb }} GB</dd>
        <dt class="col-sm-3">Disk</dt><dd class="col-sm-9">{{ server.disk }} ({{ server.storage_type }})</dd>
        <dt class="col-sm-3">Web Stack</dt><dd class="col-sm-9">{{ server.web_stack or '—' }}</dd>
      </dl>
    </div>
  </div>

  <div class="tab-pane fade" id="services">
    <div class="card-panel">
      {% for svc in server.services %}<span class="tag-pill">{{ svc.name }}</span>{% else %}<p class="text-muted mb-0">No services assigned.</p>{% endfor %}
    </div>
  </div>

  <div class="tab-pane fade" id="backup">
    <div class="card-panel">
      <dl class="row mb-0">
        <dt class="col-sm-3">Backups</dt><dd class="col-sm-9">{{ 'Enabled' if server.backup_enabled else 'Disabled' }}</dd>
        <dt class="col-sm-3">Type</dt><dd class="col-sm-9">{{ server.backup_type or '—' }}</dd>
        <dt class="col-sm-3">Destination</dt><dd class="col-sm-9">{{ server.backup_destination or '—' }}</dd>
        <dt class="col-sm-3">Schedule</dt><dd class="col-sm-9">{{ server.backup_schedule or '—' }}</dd>
        <dt class="col-sm-3">Retention</dt><dd class="col-sm-9">{{ server.backup_retention or '—' }}</dd>
        <dt class="col-sm-3">Monitoring</dt><dd class="col-sm-9">{{ 'Enabled — ' + server.monitoring_system if server.monitoring_enabled else 'Disabled' }}</dd>
      </dl>
    </div>
  </div>

  <div class="tab-pane fade" id="notes">
    <div class="card-panel">
      <p class="mb-2"><strong>Credential reference:</strong> {{ server.credential_reference }}</p>
      <p class="mb-0">{{ server.notes or 'No notes recorded.' }}</p>
    </div>
  </div>
</div>
{% endblock %}