{% 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:900px; padding:20px 24px;">

    {{ modal_title(title="SSH-Erreichbarkeit") }}

    <div id="ssh-check-body" style="margin-top:16px;">
      {% include "remotes/partials/ssh_check_spinner.html" %}
    </div>

    <div class="ds-modal-footer-simple">
      <svg class="htmx-indicator" width="14" height="14" viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="2"
           style="animation:spin 1s linear infinite; color:var(--text-3);">
        <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>
      <button class="btn btn-ghost btn-sm"
              hx-get="/ui/remotes/check-ssh-spinner"
              hx-target="#ssh-check-body"
              hx-swap="innerHTML">
        Erneut prüfen
      </button>
      <button class="btn btn-ghost btn-sm" onclick="this.closest('.ds-modal-backdrop').remove()">
        Schließen
      </button>
    </div>

  </div>
</div>