{% extends "base.html" %}
{% load i18n %}

{% block content %}

    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title">{% trans 'Peer Configuration' %}</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-6">
                    <!-- Name -->
                    <div class="form-group border-bottom pb-3">
                        <label>{% trans 'Name' %}</label>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>{{ current_peer.name|default:"-" }}</span>
                            <a href="{% url 'wireguard_peer_edit_field' %}?peer={{ current_peer.uuid }}&group=name"
                               class="btn btn-tool">
                                <i class="fas fa-pen"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Persistent Keepalive -->
                    <div class="form-group border-bottom pb-3">
                        <label>{% trans 'Persistent Keepalive' %}</label>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>{{ current_peer.persistent_keepalive }}</span>
                            <a href="{% url 'wireguard_peer_edit_field' %}?peer={{ current_peer.uuid }}&group=keepalive"
                               class="btn btn-tool">
                                <i class="fas fa-pen"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Keys Section -->
                    <div class="form-group">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="mb-0">{% trans 'Keys' %}</label>
                            <a href="{% url 'wireguard_peer_edit_field' %}?peer={{ current_peer.uuid }}&group=keys"
                               class="btn btn-tool">
                                <i class="fas fa-pen"></i>
                            </a>
                        </div>

                        <dl>
                            <dt class="small text-muted font-weight-normal">{% trans 'Public Key' %}</dt>
                            <dd class="text-break">{{ current_peer.public_key }}</dd>

                            <dt class="small text-muted font-weight-normal">{% trans 'Private Key' %}</dt>
                            <dd>
                                {% if current_peer.private_key %}
                                    <code>********************************************</code>
                                {% else %}
                                    <span class="text-muted">{% trans 'Not set' %}</span>
                                {% endif %}
                            </dd>

                            <dt class="small text-muted font-weight-normal">{% trans 'Pre-Shared Key' %}</dt>
                            <dd>
                                {% if current_peer.pre_shared_key %}
                                    <code>********************************************</code>
                                {% else %}
                                    <span class="text-muted">{% trans 'Not set' %}</span>
                                {% endif %}
                            </dd>
                        </dl>
                    </div>

                </div>
                <div class="col-lg-6">

                    <div class="row mt-3">
                        <div class="col-lg-12">
                            <div class="d-flex justify-content-between align-items-center ">
                                <label>
                                    <i class="fas fa-chart-area"></i>
                                    {% trans 'Peer Traffic' %}
                                </label>
                                <div class="btn-group" role="group" aria-label="Graph interval">
                                    <a href="#" data-period="1h" class="btn btn-outline-primary btn-xs">1h</a>
                                    <a href="#" data-period="3h" class="btn btn-outline-primary btn-xs">3h</a>
                                    <a href="#" data-period="6h" class="btn btn-outline-primary btn-xs">6h</a>
                                    <a href="#" data-period="1d" class="btn btn-outline-primary btn-xs">1d</a>
                                    <a href="#" data-period="7d" class="btn btn-outline-primary btn-xs">7d</a>
                                    <a href="#" data-period="30d" class="btn btn-outline-primary btn-xs">1m</a>
                                    <a href="#" data-period="90d" class="btn btn-outline-primary btn-xs">3m</a>
                                    <a href="#" data-period="180d" class="btn btn-outline-primary btn-xs">6m</a>
                                    <a href="#" data-period="365d" class="btn btn-outline-primary btn-xs">1y</a>
                                </div>
                            </div>

                            <center>
                                <img id="graphImg" src="/rrd/graph/?peer={{ current_peer.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}"
                                     class="img-fluid" alt="{% trans 'No traffic history, please wait a few minutes' %}"
                                     onerror="this.onerror=null; this.style.display='none'; this.insertAdjacentHTML('afterend', this.alt);">
                            </center>

                            <div class="d-flex justify-content-between align-items-center border-bottom mb-3"
                                 style="padding-top: 16px;"></div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <label>
                                    <i class="fas fa-info-circle" title="{% trans 'AllowedIPs at Peer section of wg' %}{{ current_peer.wireguard_instance.instance_id }}.conf"></i>
                                    {% trans 'Peer IP Addresses and networks' %}
                                </label>
                                <a class="btn btn-outline-primary btn-xs"
                                   href="/peer/manage_ip_address/?peer={{ current_peer.uuid }}&config=server">
                                    {% trans 'Add IP Address' %}
                                </a>
                            </div>

                            {% for ip_address in peer_ip_list %}
                                <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
                                    <p>
                                        <a href="/peer/manage_ip_address/?ip={{ ip_address.uuid }}">
                                            <i class="fas fa-network-wired"></i>
                                            {{ ip_address }}
                                        </a>
                                    </p>
                                    <p class="d-flex flex-column text-right small">
                                        {% if ip_address.priority == 0 %}
                                            {% trans 'Main ip address' %}
                                        {% else %}
                                            {% trans 'Priority' %}: {{ ip_address.priority }}
                                        {% endif %}
                                    </p>
                                </div>
                            {% endfor %}

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <label>
                                    <i class="fas fa-info-circle"
                                       title="{% trans 'AllowedIPs at client configuration file' %}"></i>
                                    {% trans 'Client Routing' %}
                                </label>
                                <div>
                                    <a class="btn btn-outline-info btn-xs"
                                       href="/peer/apply_route_template/?peer={{ current_peer.uuid }}">
                                        {% trans 'Apply template' %}
                                    </a>
                                    <a class="btn btn-outline-primary btn-xs"
                                       href="/peer/manage_ip_address/?peer={{ current_peer.uuid }}&config=client">
                                        {% trans 'Add Client route' %}
                                    </a>
                                </div>

                            </div>
                            {% if current_peer.routing_template %}
                                <div class="d-flex justify-content-between align-items-center">
                                    <p>
                                        <a href="/peer/apply_route_template/?peer={{ current_peer.uuid }}">
                                            <i class="fas fa-route"></i> {{ current_peer.routing_template.name }}
                                        </a>
                                    </p>
                                    <p class="d-flex flex-column text-right small">
                                        {% trans 'Routing Template' %}
                                    </p>
                                </div>

                                {% for ip_address in current_peer.routing_template.template_routes %}
                                    <div class="d-flex justify-content-between align-items-center text-muted">
                                        <p>
                                    <span>
                                        <i class="fas fa-network-wired"></i>
                                        {{ ip_address }}
                                    </span>
                                        </p>
                                        <p class="d-flex flex-column text-right small">
                                            {% trans 'Template Route' %}
                                        </p>
                                    </div>
                                {% endfor %}


                            {% else %}
                                <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
                                    <p>
                                        <a href="#"
                                                {% if peer_client_ip_list %}
                                           onclick="alert('{% trans 'The client is not configured to use the VPN as the default gateway.\n\nOnly the specific networks listed below are routed through the VPN.\n\nNote: These routes are not automatically pushed to the client. You will need to manually update the client configuration file to reflect these settings.' %}');"
                                           style="text-decoration: line-through;"
                                                {% else %}
                                           onclick="alert('{% trans 'The client is configured to use the VPN as the default gateway. \n\nThis setting routes all client internet traffic through the VPN, enhancing privacy and security across all connections.' %}');"
                                                {% endif %}
                                        >
                                            <i class="fas fa-network-wired"></i>
                                            0.0.0.0/0, ::/0
                                        </a>
                                    </p>
                                    <p class="d-flex flex-column text-right small">
                                        {% trans 'default route' %}
                                    </p>
                                </div>
                            {% endif %}


                            {% for ip_address in peer_client_ip_list %}
                                <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
                                    <p>
                                        <a href="/peer/manage_ip_address/?ip={{ ip_address.uuid }}">
                                            <i class="fas fa-network-wired"></i>
                                            {{ ip_address }}
                                        </a>
                                    </p>
                                    <p class="d-flex flex-column text-right small">
                                        {% if ip_address.priority == 0 %}
                                            {% trans 'Main ip address' %}
                                        {% else %}
                                            {% trans 'Priority' %}: {{ ip_address.priority }}
                                        {% endif %}
                                    </p>
                                </div>
                            {% endfor %}

                        </div>
                    </div>


                </div>
            </div>
        </div>
        <div class="card-footer">
            <a class="btn btn-outline-secondary"
               href="/peer/list/?uuid={{ current_peer.wireguard_instance.uuid }}#peer-{{ current_peer.public_key }}">
                {% trans 'Back' %}
            </a>
            <a href='javascript:void(0)' class='btn btn-outline-danger' data-command='delete'
               onclick='openCommandDialog(this)'>{% trans 'Delete Peer' %}</a>
        </div>
    </div>
{% endblock %}

{% block custom_page_scripts %}

    <script>
        function openCommandDialog(element) {
            var command = element.getAttribute('data-command');
            var confirmation = prompt("{% trans 'Please type \"delete\" to remove peer configuration.' %}");
            if (confirmation) {
                var url = "?peer={{ current_peer.uuid }}&action=delete&confirmation=" + encodeURIComponent(confirmation);
                window.location.href = url;
            }
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var buttons = document.querySelectorAll('.btn-group a');
            buttons.forEach(function (button) {
                button.addEventListener('click', function (e) {
                    e.preventDefault();
                    var period = this.getAttribute('data-period');
                    var newSrc = '/rrd/graph/?peer={{ current_peer.uuid }}&period=' + period;
                    var imgElement = document.getElementById('graphImg');
                    if (imgElement) {
                        imgElement.setAttribute('src', newSrc);
                    }
                });
            });
        });
    </script>

{% endblock %}