{% extends "dialog_form.html" %}

{% block dialog_width %}480{% endblock %}
{% block dialog_title %}Proxmox LXC{% endblock %}
{% block form_action %}/api/proxmox_lxc/create{% endblock %}
{% block form_attrs %}hx-indicator="#{{ loading_id }}" onsubmit="return !!document.getElementById('lxc-vmid').value"{% endblock %}

{% block dialog_body %}
  <div hx-get="/ui/proxmox_lxc/available-select"
       hx-trigger="load"
       hx-target="this"
       hx-swap="outerHTML">
    <div style="display:flex; align-items:center; gap:8px; color:var(--text-3); font-size:13px; padding:6px 0;">
      <span style="display:inline-block; width:14px; height:14px; border:2px solid var(--border-1,#ccc); border-top-color:var(--accent,#4a9eff); border-radius:50%; animation:lxc-spin .7s linear infinite;"></span>
      Verfügbare Container werden geladen…
    </div>
    <style>@keyframes lxc-spin{to{transform:rotate(360deg)}}</style>
  </div>

  <input type="hidden" name="vmid"        id="lxc-vmid">
  <input type="hidden" name="description" id="lxc-description">
  <input type="hidden" name="node"        id="lxc-node">
  <input type="hidden" name="enabled"     value="1">
{% endblock %}

{% block dialog_footer %}
<div class="ds-modal-footer ds-modal-footer--end">
  <button type="button" class="btn btn-sm btn-ghost" onclick="closeModal(this)">Abbrechen</button>
  <button type="submit" class="btn btn-sm btn-primary">Erstellen</button>
</div>
{% endblock %}