wireguard: Fix format when showing multiple endpoints of the server

- Show them in multiple lines using <pre> like before.

Tests:

- Multiple endpoints are shown in the one line each using <pre> tag.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/modules/wireguard/templates/wireguard.html

@@ -10,86 +10,87 @@
   <h3>{% trans "As a Server" %}</h3>
 
   {% if server.public_key %}
-  <h4>{% trans "Server" %}</h4>
+    <h4>{% trans "Server" %}</h4>
 
-  <p>
+    <p>
-    {% blocktrans trimmed %}
+      {% blocktrans trimmed %}
-      Information for this {{ box_name }}:
+        Information for this {{ box_name }}:
-    {% endblocktrans %}
+      {% endblocktrans %}
-  </p>
+    </p>
 
-  <div class="table-responsive">
+    <div class="table-responsive">
-    <table class="table" id="server-info-table">
+      <table class="table" id="server-info-table">
-      <tr>
-        <th>{% trans "Property" %}</th>
-        <th>{% trans "Value" %}</th>
-      </tr>
         <tr>
-          <td>{% trans "Public Key" %}</td>
+          <th>{% trans "Property" %}</th>
-          <td>{{ server.public_key }}</td>
+          <th>{% trans "Value" %}</th>
         </tr>
           <tr>
-            <td>{% trans "Endpoint(s)" %}</td>
+            <td>{% trans "Public Key" %}</td>
-            <td>
+            <td>{{ server.public_key }}</td>
-              {% for endpoint in server_endpoints %}{{ endpoint }}
+          </tr>
-{% endfor %}</td>
-        </tr>
-        <tr>
-          <td>
-            {% blocktrans trimmed %}
-              {{ box_name }} VPN IP for services
-            {% endblocktrans %}
-          </td>
-          <td>{{ server.ip_address }}</td>
-        </tr>
-    </table>
-  </div>
-
-  <h4>{% trans "Peers" %}</h4>
-
-  <p>{% trans "Peers allowed to connect to this server:" %}</p>
-
-  <div class="table-responsive">
-    <table class="table" id="server-peers-list">
-      <tr>
-        <th>{% trans "Public Key" %}</th>
-        <th>{% trans "Allowed IPs" %}</th>
-        <th>{% trans "Last Connected Time" %}</th>
-      </tr>
-      {% if server.peers %}
-        {% for peer in server.peers.values %}
-          {% if peer.public_key %}
             <tr>
+              <td>{% trans "Endpoint(s)" %}</td>
               <td>
-                <a href="{% url 'wireguard:show-client' peer.public_key|urlencode:'' %}">
+                <pre>{% for endpoint in server_endpoints %}{{ endpoint }}
-                  {{ peer.public_key }}
+{% endfor %}</pre>
-                </a>
               </td>
-              <td>{{ peer.allowed_ips|join:", " }}</td>
+          </tr>
-              <td>{{ peer.status.latest_handshake|default:'' }}</td>
+          <tr>
-            </tr>
+            <td>
-          {% endif %}
+              {% blocktrans trimmed %}
-        {% endfor %}
+                {{ box_name }} VPN IP for services
-      {% else %}
+              {% endblocktrans %}
-        <tr>
+            </td>
-          <td colspan="3">
+            <td>{{ server.ip_address }}</td>
-            {% blocktrans trimmed %}
+          </tr>
-              No peers configured to connect to this {{ box_name }} yet.
+      </table>
-            {% endblocktrans %}
+    </div>
-          </td>
-        </tr>
-      {% endif %}
-    </table>
-  </div>
 
-  <div class="btn-toolbar">
+    <h4>{% trans "Peers" %}</h4>
-      <a title="{% trans 'Add a new peer' %}"
+
-         role="button" class="btn btn-default btn-add-client"
+    <p>{% trans "Peers allowed to connect to this server:" %}</p>
-         href="{% url 'wireguard:add-client' %}">
+
-        <span class="fa fa-plus" aria-hidden="true"></span>
+    <div class="table-responsive">
-        {% trans "Add Allowed Client" %}
+      <table class="table" id="server-peers-list">
-      </a>
+        <tr>
-  </div>
+          <th>{% trans "Public Key" %}</th>
+          <th>{% trans "Allowed IPs" %}</th>
+          <th>{% trans "Last Connected Time" %}</th>
+        </tr>
+        {% if server.peers %}
+          {% for peer in server.peers.values %}
+            {% if peer.public_key %}
+              <tr>
+                <td>
+                  <a href="{% url 'wireguard:show-client' peer.public_key|urlencode:'' %}">
+                    {{ peer.public_key }}
+                  </a>
+                </td>
+                <td>{{ peer.allowed_ips|join:", " }}</td>
+                <td>{{ peer.status.latest_handshake|default:'' }}</td>
+              </tr>
+            {% endif %}
+          {% endfor %}
+        {% else %}
+          <tr>
+            <td colspan="3">
+              {% blocktrans trimmed %}
+                No peers configured to connect to this {{ box_name }} yet.
+              {% endblocktrans %}
+            </td>
+          </tr>
+        {% endif %}
+      </table>
+    </div>
+
+    <div class="btn-toolbar">
+        <a title="{% trans 'Add a new peer' %}"
+           role="button" class="btn btn-default btn-add-client"
+           href="{% url 'wireguard:add-client' %}">
+          <span class="fa fa-plus" aria-hidden="true"></span>
+          {% trans "Add Allowed Client" %}
+        </a>
+    </div>
   {% else %}
     <div>
       <p class="alert alert-info">{% trans "WireGuard server not started yet." %}</p>
@@ -102,8 +103,7 @@
         </button>
       </form>
     </div>
-    {% endif %}
+  {% endif %}
-
 
   <h3>{% trans "As a Client" %}</h3>
   <p>