{% extends "base.html" %}

{% block title %}{{ server.display_name }} • Keywarden{% endblock %}

{% block content %}
  <div class="space-y-8">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div class="flex items-center gap-4">
        <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600 text-white text-xl font-semibold">
          {{ server.initial }}
        </div>
        <div>
          <h1 class="text-2xl font-semibold tracking-tight text-gray-900">{{ server.display_name }}</h1>
          <p class="text-sm text-gray-600">
            {{ server.hostname|default:server.ipv4|default:server.ipv6|default:"Unassigned" }}
          </p>
        </div>
      </div>
      <a href="{% url 'servers:dashboard' %}" class="text-sm font-semibold text-purple-700 hover:text-purple-800">Back to servers</a>
    </div>

    <section class="grid gap-4 lg:grid-cols-3">
      <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm lg:col-span-2">
        <h2 class="text-lg font-semibold text-gray-900">Access</h2>
        <dl class="mt-4 space-y-3 text-sm text-gray-600">
          <div class="flex items-center justify-between">
            <dt>Access until</dt>
            <dd class="font-medium text-gray-900">
              {% if expires_at %}
                {{ expires_at|date:"M j, Y H:i" }}
              {% else %}
                No expiry
              {% endif %}
            </dd>
          </div>
          <div class="flex items-center justify-between">
            <dt>Last accessed</dt>
            <dd class="font-medium text-gray-900">
              {% if last_accessed %}
                {{ last_accessed|date:"M j, Y H:i" }}
              {% else %}
                —
              {% endif %}
            </dd>
          </div>
        </dl>
      </div>

      <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
        <h2 class="text-lg font-semibold text-gray-900">Server details</h2>
        <dl class="mt-4 space-y-3 text-sm text-gray-600">
          <div class="flex items-center justify-between">
            <dt>Hostname</dt>
            <dd class="font-medium text-gray-900">{{ server.hostname|default:"—" }}</dd>
          </div>
          <div class="flex items-center justify-between">
            <dt>IPv4</dt>
            <dd class="font-medium text-gray-900">{{ server.ipv4|default:"—" }}</dd>
          </div>
          <div class="flex items-center justify-between">
            <dt>IPv6</dt>
            <dd class="font-medium text-gray-900">{{ server.ipv6|default:"—" }}</dd>
          </div>
        </dl>
      </div>
    </section>

    <section class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
      <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold text-gray-900">Logs</h2>
        <span class="text-xs font-semibold text-gray-500">Placeholder</span>
      </div>
      <div class="mt-4 rounded-xl border border-dashed border-gray-200 bg-gray-50 p-6 text-center text-sm text-gray-600">
        Logs will appear here once collection is enabled for this server.
      </div>
    </section>
  </div>
{% endblock %}
