{% extends "dialog_core.html" %}

{% block dialog_width %}480{% endblock %}
{% block dialog_title %}{{ 'Neu verbinden' if host_label else 'Host koppeln' }}{% endblock %}

{% block dialog_body %}
{% if host_label %}
<p class="ds-modal-copy">
  Im Agenten auf <strong>{{ host_label }}</strong> eingeben, um mit einem
  neuen Token erneut zu verbinden — Gruppen und Policies bleiben dabei
  unverändert. Der Code ist {{ ttl_minutes }} Minuten gültig und nur
  einmal verwendbar.
</p>
{% else %}
<p class="ds-modal-copy">
  Auf dem Zielhost eingeben, um den astrapi-admin-Agenten mit diesem
  Server zu verbinden. Der Code ist {{ ttl_minutes }} Minuten gültig und
  nur einmal verwendbar.
</p>
{% endif %}

{% set cli_cmd = "sudo astrapi-admin-agent pair '" ~ server_url ~ "' '" ~ token ~ "'" %}
<div style="margin:14px 0 6px;" x-data="{copied:false}">
  <label class="form-label">Befehl auf dem Zielhost</label>
  <div style="display:flex; gap:6px; align-items:center;">
    <code class="mono" x-ref="cmd" style="flex:1; padding:8px 10px; background:var(--card-2,var(--card)); border-radius:var(--rad); overflow-x:auto; word-break:break-all;">{{ cli_cmd }}</code>
    <button type="button" class="btn-icon" title="Kopieren"
            x-on:click="copyToClipboard($refs.cmd.textContent.trim()); copied=true; setTimeout(()=>copied=false,1500)">
      <template x-if="!copied">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-copy"></use></svg>
      </template>
      <template x-if="copied">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-check"></use></svg>
      </template>
    </button>
  </div>
</div>
{% endblock %}