{% extends "base.html" %}
{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

{% load bootstrap %}
{% load i18n %}
{% load extras %}

{% block content %}

  <h3>{{ title }}</h3>

  <div class="alert alert-info alert-client-added">
    {% trans "New client added with public key:" %} {{ client_pubkey }}
  </div>

  <p>
    {% blocktrans trimmed %}
      To configure the client app, download the configuration file (.conf) for
      import, scan the QR code, or use the parameters to configure from
      scratch. This information can't be shown again. Be sure to get it before
      navigating away from this page. Keep this information confidential.
    {% endblocktrans %}
  </p>

  {% for domain, domain_info in domains.items %}
    <h4>{% trans "Using domain:" %} {{ domain }}</h4>
    <div class="btn-toolbar">
      <a download="wg-client.conf" href="data:text/plain;base64,{{ domain_info.config }}"
         class="btn btn-default btn-download-config-file">
        {% icon 'download' %}
        {% trans "Download config file" %}
      </a>
      <button class="btn btn-default btn-show-qr-code" type="button"
              data-bs-target="#qr-code-{{ domain_info.endpoint }}"
              aria-expanded="false" data-bs-toggle="collapse"
              aria-controls="qr-code-{{ domain_info.endpoint }}">
        {% trans "Show QR code" %}
      </button>
      <button class="btn btn-default btn-show-config-parameters" type="button"
              data-bs-target="#config-params-{{ domain_info.endpoint }}"
              aria-expanded="false" data-bs-toggle="collapse"
              aria-controls="config-params-{{ domain_info.endpoint }}">
        {% trans "Show config parameters" %}
      </button>
    </div>
    <div class="collapse" id="qr-code-{{ domain_info.endpoint }}">
      <img src="data:image/svg+xml;base64,{{ domain_info.qr_code }}"></img>
    </div>
    <div class="collapse" id="config-params-{{ domain_info.endpoint }}">
      <table class="table table-sm">
        <tbody>
          <tr>
            <td>{% trans "Client Public Key" %}</td>
            <td class="client-public-key">{{ client_pubkey }}</td>
          </tr>
          <tr>
            <td>{% trans "Client Private Key" %}</td>
            <td class="client-private-key">{{ client_privkey }}</td>
          </tr>
          <tr>
            <td>{% trans "Client IP Address" %}</td>
            <td>{{ next_ip }}</td>
          </tr>
          <tr>
            <td>{% trans "Client DNS Server" %}</td>
            <td>10.84.0.1</td>
          </tr>
          <tr>
            <td>{% trans "Server/Peer Public Key" %}</td>
            <td>{{ server_pubkey }}</td>
          </tr>
          <tr>
            <td>{% trans "Server/Peer Endpoint" %}</td>
            <td>{{ domain_info.endpoint }}</td>
          </tr>
          <tr>
            <td>{% trans "Server/Peer Allowed IPs" %}</td>
            <td>0.0.0.0/0,::0/0</td>
          </tr>
        </tbody>
      </table>
    </div>
  {% endfor %}

{% endblock %}