{% extends "dialog_core.html" %}

{% block dialog_width %}440{% endblock %}
{% block dialog_title %}Einladen: {{ user.display_name or user.username }}{% endblock %}

{% block dialog_body %}
<p class="ds-modal-copy">
  Link oder QR-Code an <strong>{{ user.display_name or user.username }}</strong> schicken,
  zum Aktivieren öffnen lassen -- dort wird Passkey oder Passwort selbst gewählt.
  Gültig für {{ ttl_minutes }} Minuten, nur einmal verwendbar.
</p>

{% if qr_svg %}
<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>
  .pairing-qr-wrap svg { width: 100%; height: 100%; }
</style>
{% endif %}

<div style="margin:6px 0 6px;" x-data="{copied:false}">
  <label class="form-label">Link</label>
  <div style="display:flex; gap:6px; align-items:center;">
    <code class="mono" x-ref="inviteUrl" style="flex:1; padding:8px 10px; background:var(--card-2,var(--card)); border-radius:var(--rad); overflow-x:auto; word-break:break-all;">{{ invite_url }}</code>
    <button type="button" class="btn-icon" title="Kopieren"
            x-on:click="copyToClipboard($refs.inviteUrl.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 %}