{% extends "dialog_form.html" %}

{% block dialog_width %}480{% endblock %}
{% block dialog_title %}Proxmox Job{% endblock %}
{% block form_action %}/api/proxmox_jobs/create{% endblock %}
{% block form_attrs %}hx-indicator="#{{ loading_id }}" onsubmit="return !!document.getElementById('pjobs-job').value"{% endblock %}

{% block dialog_body %}
  {# hx-on::after-request stoppt die Bubbling-Kette explizit: sonst faengt
     dialog_form.html's Auto-Close-Guard (per event.detail.elt) dieses
     Nachladen mit ab, weil "load" schon waehrend des Oeffnens feuert und die
     beiden Request-Lifecycles ineinanderlaufen. #}
  <div hx-get="/ui/proxmox_jobs/available-select"
       hx-trigger="load"
       hx-target="this"
       hx-swap="outerHTML"
       hx-on::after-request="event.stopPropagation()">
    <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:pjobs-spin .7s linear infinite;"></span>
      Verfügbare Jobs werden geladen…
    </div>
    <style>@keyframes pjobs-spin{to{transform:rotate(360deg)}}</style>
  </div>

  <input type="hidden" name="job"       id="pjobs-job">
  <input type="hidden" name="type"      id="pjobs-type">
  <input type="hidden" name="remote_id" id="pjobs-remote-id">
  <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 %}