{% extends "base.html" %}
{% import "macros/ui.html" as m %}
{% block title %}{{ ws_name }} · vol {{ vol_id }}{% 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 volume %}
<div class="max-w-2xl space-y-4">

  <div class="flex items-center gap-3 flex-wrap">
    <h2 class="font-mono font-bold text-primary text-lg">{{ volume.name }}</h2>
    <span class="badge badge-ghost badge-sm font-mono">{{ volume.size }}GB</span>
    {% if volume.status == "available" %}
      <span class="badge badge-success badge-sm font-mono">available</span>
    {% elif volume.status == "creating" %}
      <span class="badge badge-warning badge-sm font-mono">creating</span>
    {% else %}
      <span class="badge badge-ghost badge-sm font-mono">{{ volume.status }}</span>
    {% endif %}
    <button onclick="liveBtnClick(this)" data-live-url="?"
            class="btn btn-ghost btn-xs gap-1 font-mono text-base-content/40 hover:text-base-content ml-auto">
      <span class="live-spin loading loading-spinner loading-xs hidden"></span>
      <svg class="live-icon w-3.5 h-3.5" 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>

  <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">Size</div>
      <div class="stat-value text-base font-mono">{{ volume.size }}GB</div>
    </div>
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Location</div>
      <div class="stat-value text-base font-mono">
        {% if volume.location %}{{ volume.location.name }}{% else %}—{% endif %}
      </div>
    </div>
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">Format</div>
      <div class="stat-value text-base font-mono">{{ volume.format | default(value="—") }}</div>
    </div>
    <div class="stat bg-base-200 rounded-box p-3">
      <div class="stat-title text-xs">ID</div>
      <div class="stat-value text-base font-mono text-base-content/50">{{ volume.id }}</div>
    </div>
    <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 volume.protection and volume.protection.delete %}
          <span class="badge badge-warning badge-sm">del</span>
        {% else %}—{% endif %}
      </div>
    </div>
    {% if volume.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">{{ volume.created | truncate(length=10, end="") }}</div>
    </div>
    {% endif %}
    {% if volume.linux_device %}
    <div class="stat bg-base-200 rounded-box p-3 col-span-2">
      <div class="stat-title text-xs">Device</div>
      <div class="stat-value text-sm font-mono text-base-content/60 break-all">{{ volume.linux_device }}</div>
    </div>
    {% endif %}
  </div>

  {# ── attachment ──────────────────────────────────────────────────────── #}
  <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">Attachment</h3>
      {% set srv_name = volume.server.name | default(value="") %}
      {% if srv_name %}
      <div class="space-y-1 font-mono text-sm">
        <div class="flex gap-3">
          <span class="text-base-content/40 w-28">server</span>
          <a href="/ui/workspaces/{{ ws_name }}/servers/{{ srv_name }}"
             class="text-primary hover:underline">{{ srv_name }}</a>
        </div>
        {% if volume.linux_device %}
        <div class="flex gap-3">
          <span class="text-base-content/40 w-28">device</span>
          <span class="text-base-content/70">{{ volume.linux_device }}</span>
        </div>
        {% endif %}
      </div>
      {% elif volume.server %}
      <span class="text-base-content/50 font-mono text-sm">attached (id: {{ volume.server }})</span>
      {% else %}
      <span class="text-base-content/30 font-mono text-sm">not attached</span>
      {% endif %}
    </div>
  </div>

  {% if volume.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 volume.labels %}
        <span class="badge badge-outline badge-sm font-mono">{{ k }}={{ v }}</span>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  {# ── provider live (hcloud describe) ──────────────────────────────────── #}
  <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">name</span>
        <span class="text-base-content/80">{{ volume.name }}</span>
        <span class="text-base-content/40">id</span>
        <span class="text-base-content/50">{{ volume.id }}</span>
        <span class="text-base-content/40">status</span>
        <span>
          {% if volume.status == "available" %}
            <span class="badge badge-success badge-xs font-mono">{{ volume.status }}</span>
          {% elif volume.status == "creating" %}
            <span class="badge badge-warning badge-xs font-mono">{{ volume.status }}</span>
          {% else %}
            <span class="badge badge-ghost badge-xs font-mono">{{ volume.status }}</span>
          {% endif %}
        </span>
        <span class="text-base-content/40">size</span>
        <span class="text-primary">{{ volume.size }}GB</span>
        {% if volume.location %}
        <span class="text-base-content/40">location</span>
        <span>{{ volume.location.name }}
          {% if volume.location.description %}<span class="text-base-content/40 ml-1">{{ volume.location.description }}</span>{% endif %}
        </span>
        {% endif %}
        {% if volume.format %}
        <span class="text-base-content/40">format</span>
        <span>{{ volume.format }}</span>
        {% endif %}
        {% if volume.linux_device %}
        <span class="text-base-content/40">device</span>
        <span class="text-base-content/60 break-all">{{ volume.linux_device }}</span>
        {% endif %}
        {% set srv_name = volume.server.name | default(value="") %}
        {% if srv_name %}
        <span class="text-base-content/40">server</span>
        <span><a href="/ui/workspaces/{{ ws_name }}/servers/{{ srv_name }}" class="text-primary hover:underline">{{ srv_name }}</a></span>
        {% elif volume.server %}
        <span class="text-base-content/40">server</span>
        <span class="text-base-content/50">id:{{ volume.server }}</span>
        {% else %}
        <span class="text-base-content/40">server</span>
        <span class="text-base-content/30">not attached</span>
        {% endif %}
        {% if volume.labels %}
        <span class="text-base-content/40">labels</span>
        <span class="flex flex-wrap gap-1">
          {% for k, v in volume.labels %}
          <span class="badge badge-outline badge-xs font-mono">{{ k }}={{ v }}</span>
          {% endfor %}
        </span>
        {% endif %}
        {% if volume.created %}
        <span class="text-base-content/40">created</span>
        <span class="text-base-content/40">{{ volume.created | truncate(length=19, end="") }}</span>
        {% endif %}
        <span class="text-base-content/40">protection</span>
        <span>
          {% if volume.protection and volume.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>

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

<div class="mt-6">
  <a href="javascript:history.back()" class="btn btn-sm btn-ghost">← Back</a>
</div>
{% endblock %}