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

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

{% block content %}

  <h3>{{ title }}</h3>
  <p>
    {% blocktrans trimmed %}
      {{ box_name }} will allow this client to connect to it. Ensure that the
      client is configured with the following information.
    {% endblocktrans %}
  </p>
  <div class="table-responsive">
    <table class="table">
      <tbody>
        <tr class="client-public-key">
          <th>{% trans "Client public key:" %}</th>
          <td>{{ client.public_key }}</td>
        </tr>
        <tr class="client-allowed-ips">
          <th>{% trans "IP address to use for client:" %}</th>
          <td>{{ client.allowed_ips|join:", " }}</td>
        </tr>
        <tr class="client-preshared-key">
          <th>{% trans "Pre-shared key:" %}</th>
          <td>{{ client.preshared_key }}</td>
        </tr>
        <tr class="server-endpoints">
          <th>{% trans "Server endpoints:" %}</th>
          <td>
            {% for endpoint in endpoints %}
              <div>{{ endpoint }}</div>
            {% endfor %}
          </td>
        </tr>
        <tr class="server-public-key">
          <th>{% trans "Server public key:" %}</th>
          <td>{{ server.public_key }}</td>
        </tr>
        <tr class="server-ip">
          <th>{% trans "Server VPN IP address for services:" %}</th>
          <td>{{ server.ip_address }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h3>{% trans "Status" %}</h3>
  <div class="table-responsive">
    <table class="table">
      <tbody>
        <tr class="client-transfer-tx">
          <th>{% trans "Data transmitted:" %}</th>
          <td>{{ client.status.transfer_tx|filesizeformat }}</td>
        </tr>
        <tr class="client-transfer-rx">
          <th>{% trans "Data received:" %}</th>
          <td>{{ client.status.transfer_rx|filesizeformat }}</td>
        </tr>
        <tr class="client-latest-handshake">
          <th>{% trans "Latest handshake:" %}</th>
          <td>{{ client.status.latest_handshake|default:'' }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="btn-toolbar">
    <a class="btn btn-default btn-edit-client"
       href="{% url 'wireguard:edit-client' client.public_key|urlencode:'' %}">
      {% icon 'pencil-square-o' %}
      {% trans "Edit" %}
    </a>
    <a class="btn btn-default btn-delete-client"
       href="{% url 'wireguard:delete-client' client.public_key|urlencode:'' %}">
      {% icon 'trash-o' %}
      {% trans "Delete" %}
    </a>
  </div>

{% endblock %}
