{% extends "dialog_core.html" %}

{% block dialog_width %}480{% endblock %}
{% block dialog_title %}{{ 'Neu verbinden' if device_description else 'Gerät koppeln' }}{% endblock %}

{% block dialog_body %}
{% if device_description %}
<p class="ds-modal-copy">
  In der Client-App/CLI von <strong>{{ device_description }}</strong>
  eingeben, um mit einem neuen Token erneut zu verbinden — Plattform,
  Beschreibung und Ordner-Zugriff bleiben dabei unverändert. Der Code ist
  {{ ttl_minutes }} Minuten gültig und nur einmal verwendbar.
</p>
{% else %}
<p class="ds-modal-copy">
  In der Client-App/CLI eingeben, um dieses Gerät mit dem Server zu
  verbinden. Der Code ist {{ ttl_minutes }} Minuten gültig und nur einmal
  verwendbar.
</p>
{% endif %}

{% if qr_svg %}
{# QR-Code fuer einen kuenftigen Kamera-Scanner (z.B. in der Android-App) --
   enthaelt server_url + token als JSON, dieselben zwei Felder wie der
   manuelle CLI-Befehl unten. Noch kein Scanner-Client vorhanden, rein
   serverseitige Vorbereitung. #}
<div style="margin:0 0 16px; text-align:center;">
  <div style="display:inline-block; padding:10px; background:#fff; border-radius:var(--rad);">
    <div class="pairing-qr-wrap" style="width:180px; height:180px;">
      {{ qr_svg | safe }}
    </div>
  </div>
</div>
<style>
  /* qrcode liefert ein SVG mit fester mm-Groesse (image_factory=SvgPathImage)
     -- hier auf die feste Container-Groesse oben skaliert. */
  .pairing-qr-wrap svg { width: 100%; height: 100%; }
</style>
{% endif %}

<div style="margin:14px 0 6px;">
  <label class="form-label">Server</label>
  <div style="display:flex; gap:6px; align-items:center;">
    <code class="mono" style="flex:1; padding:8px 10px; background:var(--card-2,var(--card)); border-radius:var(--rad); overflow-x:auto;">{{ server_url }}</code>
    <button type="button" class="btn-icon" title="Kopieren" onclick="copyToClipboard('{{ server_url }}')">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-copy"></use></svg>
    </button>
  </div>
</div>

<div style="margin:6px 0 6px;">
  <label class="form-label">Pairing-Code</label>
  <div style="display:flex; gap:6px; align-items:center;">
    <code class="mono" style="flex:1; padding:8px 10px; background:var(--card-2,var(--card)); border-radius:var(--rad); overflow-x:auto; word-break:break-all;">{{ token }}</code>
    <button type="button" class="btn-icon" title="Kopieren" onclick="copyToClipboard('{{ token }}')">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-copy"></use></svg>
    </button>
  </div>
</div>

{# Fertiger, direkt kopierbarer CLI-Befehl -- vorher musste der Nutzer die
   beiden Felder oben selbst zu einem Befehl zusammensetzen (T-227-SYNC).
   Die Einzelfelder bleiben zusätzlich bestehen, z.B. für die GTK4-/
   Android-App, die keinen Shell-Befehl braucht. #}
{% set cli_cmd = "astrapi-sync-cli pair '" ~ server_url ~ "' '" ~ token ~ "'" %}
<div style="margin:14px 0 6px;">
  <label class="form-label">CLI-Befehl</label>
  <div style="display:flex; gap:6px; align-items:center;">
    <code class="mono" 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" onclick="copyToClipboard('{{ cli_cmd }}')">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-copy"></use></svg>
    </button>
  </div>
</div>
{% endblock %}