{% extends 'generic/object.html' %}
{% load helpers %}
{% load pve_sync_tags %}

{% block content %}

{# ── 頁首：狀態列 ── #}
<div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
  <span class="badge text-bg-{{ object.status_badge }} fs-6 px-3 py-2">
    {{ object.get_status_display }}
  </span>
  <a href="{% url 'plugins:pve_sync_plugin:vmprovisioninglog_list' %}" class="btn btn-outline-secondary btn-sm ms-auto">
    <i class="mdi mdi-arrow-left"></i> 返回列表
  </a>
</div>

<div class="row g-4">

  {# ── 左欄：VM 資訊 + IP ── #}
  <div class="col-md-6">

    <div class="card mb-3">
      <h5 class="card-header"><i class="mdi mdi-server"></i> VM 資訊</h5>
      <table class="table table-hover attr-table mb-0">
        <tr><th>VM 名稱</th><td><strong>{{ object.vm_name }}</strong></td></tr>
        <tr><th>VMID</th><td>{{ object.vmid|default:"—" }}</td></tr>
        <tr><th>叢集</th><td>{{ object.cluster_name|default:"—" }}</td></tr>
        <tr><th>節點</th><td>{{ object.node|default:"—" }}</td></tr>
        <tr><th>作業系統</th><td>{{ object.os_type|default:"—" }}</td></tr>
        <tr><th>規格</th>
          <td>
            {% if object.cpu %}{{ object.cpu }} vCPU{% endif %}
            {% if object.ram_gb %} / {{ object.ram_gb }} GB RAM{% endif %}
            {% if object.disk_gb %} / {{ object.disk_gb }} GB{% endif %}
            {% if not object.cpu and not object.ram_gb and not object.disk_gb %}—{% endif %}
          </td>
        </tr>
        <tr><th>建立時間</th><td>{{ object.created|date:"Y-m-d H:i" }}</td></tr>
      </table>
    </div>

    <div class="card mb-3">
      <h5 class="card-header"><i class="mdi mdi-ip-network"></i> IP 配置</h5>
      <table class="table table-hover attr-table mb-0">
        <tr>
          <th><span class="badge bg-primary">NIC 1</span> Management</th>
          <td>
            {% if object.management_ip %}<code>{{ object.management_ip }}</code>
              {% if object.management_gw %}<span class="text-muted ms-2 small">GW {{ object.management_gw }}</span>{% endif %}
            {% else %}<span class="text-muted">—</span>{% endif %}
          </td>
        </tr>
        <tr>
          <th><span class="badge bg-success">NIC 2</span> Internet</th>
          <td>
            {% if object.internet_ip %}<code>{{ object.internet_ip }}</code>
              {% if object.internet_gw %}<span class="text-muted ms-2 small">GW {{ object.internet_gw }}</span>{% endif %}
            {% else %}<span class="text-muted">—</span>{% endif %}
          </td>
        </tr>
      </table>
      <div class="card-footer py-2 text-muted small">
        <i class="mdi mdi-information-outline"></i> IP 將於 PVE 同步後自動寫入 IPAM
      </div>
    </div>

  </div>

  {# ── 右欄：QEMU GA + 狀態備註 ── #}
  <div class="col-md-6">

    <div class="card mb-3">
      <h5 class="card-header"><i class="mdi mdi-chip"></i> QEMU Guest Agent</h5>
      <div class="card-body pb-2">
        {% for key, label in object.QEMU_GA_ITEMS %}
        <div class="d-flex align-items-center gap-2 mb-2">
          {% if object.checklist|get_item:key %}
            <i class="mdi mdi-check-circle text-success fs-5"></i>
          {% else %}
            <i class="mdi mdi-circle-outline text-secondary fs-5"></i>
          {% endif %}
          <span class="{% if object.checklist|get_item:key %}text-success{% else %}text-muted{% endif %}">{{ label }}</span>
        </div>
        {% endfor %}
      </div>
    </div>

    <form method="post">
      {% csrf_token %}
      <div class="card">
        <h5 class="card-header"><i class="mdi mdi-flag"></i> 狀態 / 備註</h5>
        <div class="card-body">
          <label class="form-label fw-semibold small">部署狀態</label>
          <select name="status" class="form-select mb-3">
            {% for val, lbl in object.STATUS_CHOICES %}
              <option value="{{ val }}" {% if object.status == val %}selected{% endif %}>{{ lbl }}</option>
            {% endfor %}
          </select>
          <label class="form-label fw-semibold small">備註</label>
          <textarea name="notes" class="form-control" rows="4">{{ object.notes }}</textarea>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="mdi mdi-content-save"></i> 儲存狀態 / 備註
          </button>
        </div>
      </div>
    </form>

  </div>

</div>{# /row #}

{% endblock %}