{% extends "base.html" %}
{% import "macros/ui.html" as m %}
{% block title %}{{ ws_name }} · {{ srv_name }}{% endblock %}
{% block nav_workspaces %}btn-active{% endblock %}


{% block content %}
{{ m::ws_tabs(ws_name=ws_name, active=ws_active_tab, ws_envs=ws_envs, ws_has_clusters=ws_has_clusters, ws_has_workflows=ws_has_workflows, current_env=current_env) }}

{% if server %}
<div class="max-w-3xl space-y-4">

  <div class="flex items-center gap-3 flex-wrap">
    <h2 class="font-mono font-bold text-primary text-lg">{{ server.name }}</h2>
    {{ m::server_status(status=server.status) }}
    {% if server.server_type %}
    <span class="badge badge-ghost badge-sm font-mono">{{ server.server_type.name }}</span>
    {% endif %}
    {% if srv_role == "ControlPlane" %}
      <span class="badge badge-primary badge-sm font-mono">ControlPlane</span>
    {% elif srv_role == "Worker" %}
      <span class="badge badge-info badge-sm font-mono">Worker</span>
    {% elif srv_role == "LoadBalancer" %}
      <span class="badge badge-warning badge-sm font-mono">LoadBalancer</span>
    {% endif %}
  </div>

  {# ── provider + infra row ─────────────────────────────────────────────── #}
  <div class="font-mono text-sm text-base-content/50 flex gap-3 flex-wrap">
    <span>hetzner</span>
    {% if server.server_type %}<span class="text-base-content/70">{{ server.server_type.name }}</span>{% endif %}
    {% if server.datacenter %}<span>{{ server.datacenter.location.name }}</span>{% endif %}
    <span class="text-base-content/30">id={{ server.id }}</span>
  </div>

  <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Public IPv4</div>
      <div class="stat-value text-base font-mono">
        {% if server.public_net and server.public_net.ipv4 %}{{ server.public_net.ipv4.ip }}{% else %}—{% endif %}
      </div>
    </div>
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Floating IP</div>
      <div class="stat-value text-base font-mono text-accent">
        {% if srv_cache and srv_cache.floating_ip_address %}
          {{ srv_cache.floating_ip_address }}
          <div class="stat-desc font-mono">{{ srv_cache.floating_ip }}</div>
        {% else %}—{% endif %}
      </div>
    </div>
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Private IP</div>
      <div class="stat-value text-base font-mono">
        {% if server.private_net %}{% set pn = server.private_net | first %}{% if pn %}{{ pn.ip }}{% else %}—{% endif %}{% else %}—{% endif %}
      </div>
    </div>
    {% if server.server_type %}
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">vCPU / RAM</div>
      <div class="stat-value text-base font-mono">{{ server.server_type.cores }}c / {{ server.server_type.memory }}GB</div>
    </div>
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Disk</div>
      <div class="stat-value text-base font-mono">{{ server.server_type.disk }}GB</div>
    </div>
    {% endif %}
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Protection</div>
      <div class="stat-value text-base font-mono">
        {% if srv_cache and srv_cache.protection_delete %}
          <span class="badge badge-warning badge-sm">del</span>
        {% elif server.protection and server.protection.delete %}
          <span class="badge badge-warning badge-sm">del</span>
        {% else %}—{% endif %}
      </div>
    </div>
    {% if server.created %}
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Created</div>
      <div class="stat-value text-base font-mono text-base-content/60">{{ server.created | truncate(length=10, end="") }}</div>
    </div>
    {% endif %}
    {% if server.datacenter %}
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Datacenter</div>
      <div class="stat-value text-base font-mono text-base-content/60">{{ server.datacenter.name | default(value="—") }}</div>
      {% if server.datacenter.location %}<div class="stat-desc font-mono">{{ server.datacenter.location.description | default(value="") }}</div>{% endif %}
    </div>
    {% endif %}
  </div>

  {# ── cache sync ────────────────────────────────────────────────────────── #}
  <div class="text-xs text-base-content/30 font-mono flex items-center gap-2">
    {% if srv_cache and srv_cache.last_sync %}
    <span>cache sync:</span>
    <span>{{ srv_cache.last_sync }}</span>
    {% endif %}
    <button onclick="liveBtnClick(this)"
            data-live-url="?"
            class="btn btn-ghost btn-xs gap-1 font-mono text-base-content/30 hover:text-base-content ml-auto"
            title="Reload live server state from hcloud">
      <span class="live-spin loading loading-spinner loading-xs hidden"></span>
      <svg class="live-icon w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
      </svg>
      <span class="live-label">↺ live</span>
    </button>
  </div>

  {% if server.image %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <h3 class="font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider mb-2">Image</h3>
      <div class="flex items-center gap-2 font-mono text-sm">
        <span class="text-primary">{{ server.image.name | default(value=server.image.description) }}</span>
        <span class="badge badge-ghost badge-xs">{{ server.image.os_flavor }}</span>
        <span class="badge badge-ghost badge-xs">{{ server.image.os_version | default(value="?") }}</span>
      </div>
    </div>
  </div>
  {% endif %}

  {% if server.labels %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <h3 class="font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider mb-2">Labels</h3>
      <div class="flex flex-wrap gap-1">
        {% for k, v in server.labels %}
        <span class="badge badge-outline badge-sm font-mono">{{ k }}={{ v }}</span>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  {% if srv_scale and srv_scale != "" %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <details>
        <summary class="cursor-pointer font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider select-none list-none flex items-center gap-2">
          <svg class="w-4 h-4 text-info flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M4 6h16M4 10h16M4 14h8M4 18h8M16 14l4 4m0 0l-4 4m4-4H12"/>
          </svg>
          Scale Policy
          <span class="badge badge-info badge-xs font-mono ml-1">
            {{ srv_scale.min }}–{{ srv_scale.max }} nodes
          </span>
          <svg class="w-3 h-3 ml-auto details-chevron transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
          </svg>
        </summary>
        <div class="mt-3 space-y-3">
          <div class="grid grid-cols-2 gap-2 text-xs font-mono">
            <div class="text-base-content/40">role</div>
            <div>{{ srv_scale.role }}</div>
            <div class="text-base-content/40">min nodes</div>
            <div>{{ srv_scale.min }}</div>
            <div class="text-base-content/40">max nodes</div>
            <div>{{ srv_scale.max }}</div>
          </div>
          {% if srv_scale.template %}
          <div class="divider my-1 text-xs text-base-content/30">template</div>
          <div class="grid grid-cols-2 gap-2 text-xs font-mono">
            {% if srv_scale.template.server_type %}
            <div class="text-base-content/40">server_type</div>
            <div class="text-primary">{{ srv_scale.template.server_type }}</div>
            {% endif %}
            {% if srv_scale.template.location %}
            <div class="text-base-content/40">location</div>
            <div>{{ srv_scale.template.location }}</div>
            {% endif %}
            {% if srv_scale.template.hostname_pattern %}
            <div class="text-base-content/40">hostname_pattern</div>
            <div class="text-primary">{{ srv_scale.template.hostname_pattern }}</div>
            {% endif %}
            {% if srv_scale.template.private_network %}
            <div class="text-base-content/40">private_network</div>
            <div>{{ srv_scale.template.private_network }}</div>
            {% endif %}
            {% if srv_scale.template.ip_range_prefix %}
            <div class="text-base-content/40">ip_range_prefix</div>
            <div>{{ srv_scale.template.ip_range_prefix }}.x</div>
            {% endif %}
            {% if srv_scale.template.image_role %}
            <div class="text-base-content/40">image_role</div>
            <div>{{ srv_scale.template.image_role }}</div>
            {% endif %}
            {% if srv_scale.template.architecture %}
            <div class="text-base-content/40">architecture</div>
            <div>{{ srv_scale.template.architecture }}</div>
            {% endif %}
          </div>
          {% endif %}
        </div>
      </details>
    </div>
  </div>
  {% endif %}

  {# ── hcloud attached volumes (enriched) ──────────────────────────────── #}
  {% if hcloud_volumes and hcloud_volumes | length > 0 %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <h3 class="font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider mb-2">Attached Volumes</h3>
      <div class="space-y-2">
        {% for vol in hcloud_volumes %}
        <div class="flex items-center gap-3 font-mono text-sm flex-wrap">
          <a href="/ui/workspaces/{{ ws_name }}/volumes/{{ vol.id }}"
             class="badge badge-primary badge-outline badge-sm hover:badge-primary hover:text-primary-content transition-colors">
            {{ vol.name | default(value=vol.id) }}
          </a>
          {% if vol.size %}<span class="text-base-content/50 text-xs">{{ vol.size }}GB</span>{% endif %}
          {% if vol.location and vol.location.name %}<span class="text-base-content/30 text-xs">{{ vol.location.name }}</span>{% endif %}
          {% if vol.status %}<span class="badge badge-ghost badge-xs">{{ vol.status }}</span>{% endif %}
          {% if vol.linux_device %}<span class="text-base-content/25 text-xs font-mono">{{ vol.linux_device }}</span>{% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% elif server.volumes and server.volumes | length > 0 %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <h3 class="font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider mb-2">Attached Volumes</h3>
      <div class="flex flex-wrap gap-2">
        {% for vol in server.volumes %}
        <a href="/ui/workspaces/{{ ws_name }}/volumes/{{ vol }}"
           class="badge badge-primary badge-outline badge-sm font-mono hover:badge-primary hover:text-primary-content">
          vol-{{ vol }}
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  {# ── declared volumes (from servers.ncl) ─────────────────────────────── #}
  {% if srv_volumes_declared and srv_volumes_declared | length > 0 %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <h3 class="font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider mb-2">Declared Volumes</h3>
      <div class="space-y-1">
        {% for vol in srv_volumes_declared %}
        <div class="font-mono text-sm flex items-center gap-3">
          <span class="badge badge-info badge-outline badge-sm">{{ vol.name }}</span>
          <span class="text-base-content/50">{{ vol.size_gb }}GB</span>
          <span class="text-base-content/40 text-xs">{{ vol.mount_path }}</span>
          <span class="text-base-content/30 text-xs">{{ vol.type }}</span>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  {% if server.private_net %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <h3 class="font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider mb-2">Private Networks</h3>
      <div class="space-y-1">
        {% for net in server.private_net %}
        <div class="font-mono text-sm flex items-center gap-2">
          <span class="text-primary">{{ net.ip }}</span>
          <span class="text-base-content/40">net-id:{{ net.network }}</span>
          {% if net.alias_ips and net.alias_ips | length > 0 %}
          <span class="text-base-content/25 text-xs">aliases: {{ net.alias_ips | join(sep=", ") }}</span>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  {# ── DAG taskserv deployment history ──────────────────────────────────── #}
  {% if dag_taskservs and dag_taskservs | length > 0 %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <div class="flex items-center gap-2 mb-3">
        <h3 class="font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider">DAG</h3>
        <span class="badge badge-xs font-mono
          {% if dag_deployed == dag_total %}badge-success{% else %}badge-warning{% endif %}">
          {{ dag_deployed }}/{{ dag_total }} deployed
        </span>
      </div>
      <div class="space-y-1">
        {% for ts in dag_taskservs %}
        <div class="font-mono text-xs flex items-center gap-2">
          {% if ts.state == "completed" %}
            <span class="text-success">✅</span>
          {% elif ts.state == "failed" %}
            <span class="text-error">❌</span>
          {% elif ts.state == "running" %}
            <span class="text-warning loading loading-spinner loading-xs"></span>
          {% else %}
            <span class="text-base-content/20">○</span>
          {% endif %}
          <span class="text-base-content/80 w-32 truncate">{{ ts.name }}</span>
          <span class="text-base-content/40 w-20">{{ ts.state }}</span>
          {% if ts.ended_at %}
          <span class="text-base-content/25">{{ ts.ended_at | truncate(length=16, end="") }}</span>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  {# ── provider live (hcloud describe) ──────────────────────────────────── #}
  {% if server %}
  <div class="card bg-base-200 shadow border border-base-300">
    <div class="card-body p-4">
      <h3 class="font-mono font-semibold text-sm text-base-content/60 uppercase tracking-wider mb-3 flex items-center gap-2">
        Provider · Hetzner Cloud
        <span class="badge badge-xs badge-ghost font-mono">live</span>
      </h3>
      <div class="grid grid-cols-[7rem_1fr] gap-x-3 gap-y-1 font-mono text-xs">
        <span class="text-base-content/40">server</span>
        <span class="text-base-content/80">{{ server.name }}</span>
        <span class="text-base-content/40">id</span>
        <span class="text-base-content/50">{{ server.id }}</span>
        <span class="text-base-content/40">status</span>
        <span>{{ m::server_status(status=server.status) }}</span>
        {% if server.server_type %}
        <span class="text-base-content/40">type</span>
        <span class="text-primary">{{ server.server_type.name }}
          <span class="text-base-content/40 ml-1">{{ server.server_type.cores }}vCPU · {{ server.server_type.memory }}GB RAM · {{ server.server_type.disk }}GB disk</span>
        </span>
        {% endif %}
        {% if server.datacenter %}
        <span class="text-base-content/40">datacenter</span>
        <span>{{ server.datacenter.name }}
          {% if server.datacenter.location %}<span class="text-base-content/40 ml-1">{{ server.datacenter.location.description | default(value="") }}</span>{% endif %}
        </span>
        {% endif %}
        {% if server.public_net and server.public_net.ipv4 %}
        <span class="text-base-content/40">public IPv4</span>
        <span class="text-accent">{{ server.public_net.ipv4.ip }}</span>
        {% endif %}
        {% if server.public_net and server.public_net.ipv6 %}
        <span class="text-base-content/40">public IPv6</span>
        <span class="text-base-content/50 text-xs break-all">{{ server.public_net.ipv6.ip }}</span>
        {% endif %}
        {% if srv_cache and srv_cache.floating_ip_address %}
        <span class="text-base-content/40">floating IP</span>
        <span class="text-accent">{{ srv_cache.floating_ip_address }}
          <span class="text-base-content/40 ml-1">{{ srv_cache.floating_ip | default(value="") }}</span>
        </span>
        {% endif %}
        {% if server.private_net %}
        {% for net in server.private_net %}
        <span class="text-base-content/40">{% if loop.first %}private IP{% else %}&nbsp;{% endif %}</span>
        <span>{{ net.ip }} <span class="text-base-content/30">net-id:{{ net.network }}</span>
          {% if net.alias_ips and net.alias_ips | length > 0 %}<span class="text-base-content/25 ml-1">aliases: {{ net.alias_ips | join(sep=", ") }}</span>{% endif %}
        </span>
        {% endfor %}
        {% endif %}
        {% if hcloud_volumes and hcloud_volumes | length > 0 %}
        {% for vol in hcloud_volumes %}
        <span class="text-base-content/40">{% if loop.first %}volumes{% else %}&nbsp;{% endif %}</span>
        <span>
          <a href="/ui/workspaces/{{ ws_name }}/volumes/{{ vol.id }}" class="text-primary hover:underline">{{ vol.name | default(value=vol.id) }}</a>
          {% if vol.size %}<span class="text-base-content/40 ml-1">{{ vol.size }}GB</span>{% endif %}
          {% if vol.linux_device %}<span class="text-base-content/30 ml-1">{{ vol.linux_device }}</span>{% endif %}
        </span>
        {% endfor %}
        {% endif %}
        {% if server.image %}
        <span class="text-base-content/40">image</span>
        <span>{{ server.image.name | default(value=server.image.description) }}
          <span class="text-base-content/40 ml-1">{{ server.image.os_flavor }} {{ server.image.os_version | default(value="") }}</span>
        </span>
        {% endif %}
        {% if server.labels %}
        <span class="text-base-content/40">labels</span>
        <span class="flex flex-wrap gap-1">
          {% for k, v in server.labels %}
          <span class="badge badge-outline badge-xs font-mono">{{ k }}={{ v }}</span>
          {% endfor %}
        </span>
        {% endif %}
        {% if server.created %}
        <span class="text-base-content/40">created</span>
        <span class="text-base-content/40">{{ server.created | truncate(length=19, end="") }}</span>
        {% endif %}
        <span class="text-base-content/40">protection</span>
        <span>
          {% if server.protection and server.protection.delete %}
            <span class="badge badge-warning badge-xs">delete</span>
          {% else %}
            <span class="text-base-content/30">none</span>
          {% endif %}
        </span>
      </div>
    </div>
  </div>
  {% endif %}

</div>
{% else %}
<div class="alert alert-error">
  <span>Server <code class="font-mono">{{ srv_name }}</code> not found or HCLOUD_TOKEN not set.</span>
</div>
{% endif %}

<div class="mt-6">
  <a href="/ui/workspaces/{{ ws_name }}/servers" class="btn btn-sm btn-ghost">← Back to Servers</a>
</div>
{% endblock %}