{% from "partials/components/ui_macros.html" import modal_title, modal_footer %}
<div id="create-edit-modal"
     class="ds-modal-backdrop"
     x-data
     x-on:keydown.escape.window="$el.remove()">
  <div class="ds-modal" style="max-width:480px; padding:20px 24px;">

    {{ modal_title(is_edit=False, title="Proxmox LXC") }}

    <form id="create-edit-form"
          hx-post="/api/proxmox_lxc/create"
          hx-target="#main-content"
          hx-swap="innerHTML"
          hx-indicator="#{{ loading_id }}"
          class="form-stack" style="gap:14px;">

      <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">

      {{ modal_footer(has_toggle=False, save_label='Erstellen',
                      save_id='create-edit-submit', save_type='button') }}
    </form>
  </div>
</div>

<script>
(function () {
  const form      = document.getElementById('create-edit-form');
  const submitBtn = document.getElementById('create-edit-submit');

  submitBtn.addEventListener('click', function () {
    if (!document.getElementById('lxc-vmid').value) return;
    htmx.trigger(form, 'submit');
    form.addEventListener('htmx:afterRequest', function handler(e) {
      if (e.detail.successful) document.getElementById('create-edit-modal')?.remove();
      form.removeEventListener('htmx:afterRequest', handler);
    });
  });
})();
</script>