{% 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 %}

<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>
{% endblock %}