{% load i18n rivet_static %}<div class="card setup">
  <h2>{% translate "Set up in the WireGuard app" %}</h2>
  {% if not setup.via_server %}<p class="msg">{% blocktranslate trimmed %}The server does not offer the phone
  connection yet (FORGEIEC_RIVET_PHONES_PUBLIC_KEY is not set). These values connect the phone directly to the gateway
  as before.{% endblocktranslate %}</p>{% endif %}
  <p class="muted">{% blocktranslate trimmed %}The key pair is generated on the phone. The private key stays on the phone;
  the portal only knows the public key. These values stay available here.{% endblocktranslate %}</p>
  {% if rekey_url %}
  <div class="qr-setup" id="qr-setup"
       data-msg-unsupported="{% translate "This browser cannot generate WireGuard keys (WebCrypto X25519 is missing). Please use the manual way below: generate the key pair in the WireGuard app." %}"
       data-msg-confirm="{% translate "A new key pair replaces the current key. A phone set up with the old key loses its connection. Continue?" %}"
       data-msg-working="{% translate "Generating key and saving the public key …" %}"
       data-msg-failed="{% translate "Could not save the new key:" %}"
       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." %}">
    <h3>{% translate "Set up with a QR code" %}</h3>
    <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>
    <form method="post" action="{{ rekey_url }}" class="qr-form">{% csrf_token %}
      <p><button type="submit" class="secondary">{% translate "Generate QR code" %}</button></p>
    </form>
    <p class="qr-status" role="status" hidden></p>
    <div class="qr-result" hidden>
      <div class="qr-code"></div>
      <p><a class="btn secondary qr-download" href="#">{% translate "Download .conf" %}</a></p>
    </div>
    <noscript><p class="muted">{% translate "Generating a QR code needs JavaScript. Please use the manual way below." %}</p></noscript>
  </div>
  <h3>{% translate "Set up manually" %}</h3>
  {% endif %}
  <ol>
    <li>{% translate "Install the WireGuard app (App Store or Google Play)." %}</li>
    <li>{% translate "In the app tap “+” → “Create from scratch” and enter a name under “Name”, e.g. “Rivet”." %}</li>
    <li>{% translate "Generate the key pair: Android: tap the icon at the end of the “Private key” field (“Generate new private key”), iOS: tap “Generate keypair”. The “Public key” shown by the app must be the one stored here:" %}<br><code class="key js-phone-public-key">{{ phone.public_key }}</code></li>
    <li>{% if setup.dns %}{% translate "Under “Interface” enter “Addresses”, “DNS servers” and “MTU” from the table below." %}{% else %}{% translate "Under “Interface” enter “Addresses” and “MTU” from the table below." %}{% endif %}</li>
    <li>{% translate "Tap “Add peer” and enter “Public key”, “Endpoint”, “Allowed IPs” and “Persistent keepalive” from the table below." %}</li>
    <li>{% translate "Tap “Save” (Android: disk icon at the top) and switch the tunnel on with the switch next to its name." %}</li>
  </ol>
  <table class="setup-values">
    <tr><th colspan="2">{% translate "Interface" context "WireGuard app" %}</th></tr>
    <tr><td>{% translate "Addresses" context "WireGuard app" %}</td><td><code class="key">{{ setup.address }}</code></td></tr>
    <tr><td>{% translate "MTU" context "WireGuard app" %}</td><td><code class="key">{{ setup.mtu }}</code></td></tr>
    {% if setup.dns %}<tr><td>{% translate "DNS servers" context "WireGuard app" %}</td><td><code class="key">{{ setup.dns }}</code><br><span class="muted">{% blocktranslate trimmed with server=setup.dns_server domain=setup.search_domain %}DNS server {{ server }}, search domain {{ domain }}{% endblocktranslate %}</span></td></tr>{% endif %}
    <tr><th colspan="2">{% translate "Peer" context "WireGuard app" %}</th></tr>
    <tr><td>{% translate "Public key" context "WireGuard app" %}</td><td><code class="key">{{ setup.peer_public_key }}</code></td></tr>
    <tr><td>{% translate "Endpoint" context "WireGuard app" %}</td><td><code class="key">{{ setup.endpoint }}</code></td></tr>
    <tr><td>{% translate "Allowed IPs" context "WireGuard app" %}</td><td><code class="key">{{ setup.allowed_ips }}</code></td></tr>
    <tr><td>{% translate "Persistent keepalive" context "WireGuard app" %}</td><td><code class="key">{{ setup.keepalive }}</code></td></tr>
  </table>
  {% if setup.via_server %}
  <h3>{% translate "Reachable with the tunnel switched on" %}</h3>
  {% if setup.reachable %}<ul class="reachable">
    {% for r in setup.reachable %}<li><code>{{ r.address }}</code> – {{ r.name }}<br><span class="muted">{% blocktranslate trimmed with url=r.url short=r.short_url %}by name: {{ url }} (or {{ short }}){% endblocktranslate %}</span></li>{% endfor %}
  </ul>{% else %}<p class="muted">{% translate "No forwards are released for this phone yet." %}</p>{% endif %}
  <p class="muted">{% translate "Connection via the server:" %}
  {% if phone_server %}{% if phone_server.seen %}{% blocktranslate trimmed with when=phone_server.seen|date:"SHORT_DATETIME_FORMAT" rx=phone_server.rx_bytes|filesizeformat tx=phone_server.tx_bytes|filesizeformat %}last handshake {{ when }} · received {{ rx }} · sent {{ tx }}{% endblocktranslate %}{% else %}{% translate "never connected" %}{% endif %}
  {% else %}{% translate "unknown" %}{% endif %}</p>
  {% endif %}
  <details><summary>{% translate "Configuration as text (template)" %}</summary>
    <p class="muted">{% translate "Replace the placeholder in the line “PrivateKey” with the private key from the WireGuard app before using the template." %}</p>
    <pre>{{ config_template }}</pre>
    <p><a class="btn secondary" href="{{ config_href }}" download="{{ config_filename }}">{% translate "Download template (.conf)" %}</a></p>
  </details>
</div>
<style>
  .setup code.key { word-break:break-all; font-size:.85rem; user-select:all; }
  table.setup-values { border-collapse:collapse; width:100%; margin:8px 0 12px; }
  table.setup-values th { text-align:left; padding:10px 0 4px; }
  table.setup-values td { padding:4px 12px 4px 0; vertical-align:top; }
  table.setup-values td:first-child { white-space:nowrap; }
  ul.reachable { margin:4px 0 12px; padding-left:20px; }
  .qr-setup { margin:8px 0 16px; }
  .qr-code svg { width:100%; max-width:320px; height:auto; background:#fff; padding:8px; box-sizing:border-box; }
  .qr-status.error { color:#b00020; }
</style>
{% if rekey_url %}<script src="{% static_v 'gateways/qrcode.js' %}" defer></script>
<script src="{% static_v 'gateways/phone_qr.js' %}" defer></script>{% endif %}