{% load i18n rivet_static %}<div class="phone-add" id="qr-add"
     data-msg-unsupported="{% translate "This browser cannot generate WireGuard keys (WebCrypto X25519 is missing). Please use “Set up manually” below: generate the key pair in the WireGuard app and paste its public key." %}"
     data-msg-working="{% translate "Creating the phone and generating the key …" %}"
     data-msg-failed="{% translate "Could not create the phone:" %}"
     data-msg-done="{% translate "Shown once – scan now. The private key exists only in this page; it was not sent to the server. After leaving the page it is gone." %}">
  <form method="post" class="qr-add-form">{% csrf_token %}
    {% for e in form.non_field_errors %}<div class="msg error">{{ e }}</div>{% endfor %}
    <p><label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label><br>{{ form.name }}</p>
    {% for e in form.name.errors %}<div class="msg error">{{ e }}</div>{% endfor %}
    <p class="muted">{{ form.name.help_text }}</p>
    <fieldset class="kinds"><legend>{{ form.access.label }}</legend>
      {% for radio in form.access %}<label class="kind">{{ radio.tag }} <span>{{ radio.choice_label }}</span></label>{% endfor %}
    </fieldset>
    <div class="qr-status msg" role="status" hidden></div>
    <div class="qr-add-actions" hidden>
      <p class="muted">{% blocktranslate trimmed %}The browser generates the key pair. Only the public key is sent
      to the portal; the private key stays in this page and goes into the QR code. In the WireGuard app tap “+” →
      “Scan from QR code”.{% endblocktranslate %}</p>
      <p><button type="submit" class="qr-add-button" disabled>{% translate "Create and generate QR code" %}</button>
      <a class="btn secondary" href="{{ cancel_url }}">{% translate "Cancel" %}</a></p>
    </div>
    <noscript><div class="msg">{% translate "Generating a QR code needs JavaScript. Please use “Set up manually” below." %}</div></noscript>
    <details class="manual" open>
      <summary>{% translate "Set up manually" %}</summary>
      <p><label for="{{ form.public_key.id_for_label }}">{{ form.public_key.label }}</label><br>{{ form.public_key }}</p>
      {% for e in form.public_key.errors %}<div class="msg error">{{ e }}</div>{% endfor %}
      <p class="muted">{{ form.public_key.help_text }}</p>
      <p><button type="submit" name="manual" value="1" class="manual-button">{% translate "Create" %}</button>
      <a class="btn secondary" href="{{ cancel_url }}">{% translate "Cancel" %}</a></p>
    </details>
  </form>
  <div class="qr-result" hidden>
    <div class="msg"><strong>{% translate "The phone has been created." %}</strong>
    <span class="qr-once"></span></div>
    <div class="qr-code"></div>
    <p><a class="btn secondary qr-download" href="#">{% translate "Download .conf" %}</a>
    <a class="btn qr-detail" href="#">{% translate "Go to the phone page" %}</a></p>
  </div>
</div>
<style>
  .phone-add [hidden] { display:none !important; }
  fieldset.kinds { border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin:0 0 12px; }
  fieldset.kinds legend { padding:0 4px; }
  label.kind { display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
  label.kind input { margin-top:5px; }
  input.key { width:100%; max-width:34em; font-family:monospace; }
  details.manual { margin:12px 0; }
  details.manual > summary { cursor:pointer; padding:6px 0; }
  .phone-add .qr-status.error { border-color:var(--danger); }
  .phone-add .qr-code svg { width:100%; max-width:320px; height:auto; background:#fff; padding:8px; box-sizing:border-box; }
</style>
<script src="{% static_v 'gateways/qrcode.js' %}" defer></script>
<script src="{% static_v 'gateways/phone_qr.js' %}" defer></script>