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

    {{ modal_title(title=host) }}

    <div id="power-check-body-{{ item_id }}"
         hx-post="/ui/remotes/{{ item_id }}/power"
         hx-trigger="load"
         hx-target="#power-check-body-{{ item_id }}"
         hx-swap="innerHTML"
         style="margin-top:16px; display:flex; align-items:center; justify-content:center; min-height:60px; gap:10px; color:var(--text-3); font-size:13px;">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           style="animation:spin 1s linear infinite; flex-shrink:0;">
        <line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/>
        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/>
        <line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/>
        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>
      </svg>
      SSH-Status wird geprüft …
    </div>

  </div>
</div>