<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>{{ .Static.WebsiteTitle }} - Admin</title>
    <meta name="description" content="{{ .Static.WebsiteTitle }}">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="/css/custom.css">
</head>

<body id="page-top" class="d-flex flex-column min-vh-100">
    {{template "prt_nav.html" .}}
    <div class="container mt-5 main-app">
        <h1>Edit interface <strong>{{.Device.DeviceName}}</strong></h1>
        {{template "prt_flashes.html" .}}

        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link {{if eq .Device.Type "server"}}active{{end}}" data-toggle="tab" href="#server">Server Mode</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{if eq .Device.Type "client"}}active{{end}}" data-toggle="tab" href="#client">Client Mode</a>
            </li>
        </ul>

        <div id="configContent" class="tab-content">
            <!-- server mode -->
            <div class="tab-pane fade {{if eq .Device.Type "server"}}active show{{end}}" id="server">
                <form method="post" enctype="multipart/form-data">
                    <input type="hidden" name="_csrf" value="{{.Csrf}}">
                    <input type="hidden" name="device" value="{{.Device.DeviceName}}">
                    <input type="hidden" name="devicetype" value="server">
                    <h3>Server's interface configuration</h3>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="server_DisplayName">Display Name</label>
                            <input type="text" name="displayname" class="form-control" id="server_DisplayName" value="{{.Device.DisplayName}}">
                        </div>
                    </div>
                    {{if .EditableKeys}}
                    <div class="form-row">
                        <div class="form-group required col-md-12">
                            <label for="server_PrivateKey">Private Key</label>
                            <input type="text" name="privkey" class="form-control" id="server_PrivateKey" value="{{.Device.PrivateKey}}" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group required col-md-12">
                            <label for="server_PublicKey">Public Key</label>
                            <input type="text" name="pubkey" class="form-control" id="server_PublicKey" value="{{.Device.PublicKey}}" required>
                        </div>
                    </div>
                    {{else}}
                    <input type="hidden" name="privkey" value="{{.Device.PrivateKey}}">
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="server_ro_PublicKey">Public Key</label>
                            <input type="text" name="pubkey" readonly class="form-control" id="server_ro_PublicKey" value="{{.Device.PublicKey}}">
                        </div>
                    </div>
                    {{end}}
                    <div class="form-row">
                        <div class="form-group required col-md-6">
                            <label for="server_ListenPort">Listen port</label>
                            <input type="number" name="port" class="form-control" id="server_ListenPort" placeholder="51820" value="{{.Device.ListenPort}}" required>
                        </div>
                        <div class="form-group required col-md-6">
                            <label for="server_IPs">Server IP address</label>
                            <input type="text" name="ip" class="form-control" id="server_IPs" placeholder="10.6.6.1/24" value="{{.Device.IPsStr}}" required>
                        </div>
                    </div>
                    <h3>Client's global configuration (<span class="text-blue">g</span>)</h3>
                    <div class="form-row">
                        <div class="form-group required col-md-12">
                            <label for="server_PublicEndpoint">Public Endpoint for Clients</label>
                            <input type="text" name="endpoint" class="form-control" id="server_PublicEndpoint" placeholder="vpn.company.com:51820" value="{{.Device.DefaultEndpoint}}" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="server_DNS">DNS Servers</label>
                            <input type="text" name="dns" class="form-control" id="server_DNS" placeholder="1.1.1.1" value="{{.Device.DNSStr}}">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="server_AllowedIP">Default allowed IPs</label>
                            <input type="text" name="allowedip" class="form-control" id="server_AllowedIP" placeholder="10.6.6.0/24" value="{{.Device.DefaultAllowedIPsStr}}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="server_MTU">MTU (also used for the server interface, 0 = default)</label>
                            <input type="number" name="mtu" class="form-control" id="server_MTU" placeholder="" value="{{.Device.Mtu}}">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="server_PersistentKeepalive">Persistent Keepalive (0 = off)</label>
                            <input type="number" name="keepalive" class="form-control" id="server_PersistentKeepalive" placeholder="16" value="{{.Device.DefaultPersistentKeepalive}}">
                        </div>
                    </div>
                    <h3>Interface configuration hooks</h3>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="server_PreUp">Pre Up</label>
                            <input type="text" name="preup" class="form-control" id="server_PreUp" value="{{.Device.PreUp}}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="server_PostUp">Post Up</label>
                            <input type="text" name="postup" class="form-control" id="server_PostUp" value="{{.Device.PostUp}}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="server_PreDown">Pre Down</label>
                            <input type="text" name="predown" class="form-control" id="server_PreDown" value="{{.Device.PreDown}}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="server_PostDown">Post Down</label>
                            <input type="text" name="postdown" class="form-control" id="server_PostDown" value="{{.Device.PostDown}}">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="d-flex align-items-center">
                            <a href="#" class="advanced-settings btn btn-link collapsed" data-toggle="collapse" data-target="#collapseAdvancedServer" aria-expanded="false" aria-controls="collapseAdvancedServer">
                                Advanced Settings
                            </a>
                        </div>
                    </div>
                    <div id="collapseAdvancedServer" class="collapse" aria-labelledby="collapseAdvancedServer">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="server_FirewallMark">Firewall Mark (0 = default or off)</label>
                                <input type="number" name="firewallmark" class="form-control" id="server_FirewallMark" placeholder="" value="{{.Device.FirewallMark}}">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="server_RoutingTable">Routing Table (empty = default or auto)</label>
                                <input type="text" name="routingtable" class="form-control" id="server_RoutingTable" placeholder="auto" value="{{.Device.RoutingTable}}">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <div class="custom-control custom-switch">
                                    <input class="custom-control-input" name="saveconfig" type="checkbox" value="true" id="server_SaveConfig" {{if .Peer.SaveConfig}}checked{{end}}>
                                    <label class="custom-control-label" for="server_SaveConfig">
                                        Save Configuration (if interface was edited via WireGuard configuration tool)
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Save</button>
                    <a href="/admin" class="btn btn-secondary">Cancel</a>
                    <a href="/admin/device/applyglobals" class="btn btn-dark float-right">Apply Global Settings (<span class="text-blue">g</span>) to clients</a>
                </form>
            </div>

            <!-- client mode -->
            <div class="tab-pane fade {{if eq .Device.Type "client"}}active show{{end}}" id="client">
                <form method="post" enctype="multipart/form-data">
                    <input type="hidden" name="_csrf" value="{{.Csrf}}">
                    <input type="hidden" name="device" value="{{.Device.DeviceName}}">
                    <input type="hidden" name="devicetype" value="client">
                    <h3>Client's interface configuration</h3>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="client_DisplayName">Display Name</label>
                            <input type="text" name="displayname" class="form-control" id="client_DisplayName" value="{{.Device.DisplayName}}">
                        </div>
                    </div>
                    {{if .EditableKeys}}
                    <div class="form-row">
                        <div class="form-group required col-md-12">
                            <label for="client_PrivateKey">Private Key</label>
                            <input type="text" name="privkey" class="form-control" id="client_PrivateKey" value="{{.Device.PrivateKey}}" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group required col-md-12">
                            <label for="client_PublicKey">Public Key</label>
                            <input type="text" name="pubkey" class="form-control" id="client_PublicKey" value="{{.Device.PublicKey}}" required>
                        </div>
                    </div>
                    {{else}}
                    <input type="hidden" name="privkey" value="{{.Device.PrivateKey}}">
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="client_ro_PublicKey">Public Key</label>
                            <input type="text" name="pubkey" readonly class="form-control" id="client_ro_PublicKey" value="{{.Device.PublicKey}}">
                        </div>
                    </div>
                    {{end}}
                    <div class="form-row">
                        <div class="form-group required col-md-6">
                            <label for="client_IPs">Client IP address</label>
                            <input type="text" name="ip" class="form-control" id="client_IPs" placeholder="10.6.6.1/24" value="{{.Device.IPsStr}}" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="client_DNS">DNS Servers</label>
                            <input type="text" name="dns" class="form-control" id="client_DNS" placeholder="1.1.1.1" value="{{.Device.DNSStr}}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="client_MTU">MTU (0 = default)</label>
                            <input type="number" name="mtu" class="form-control" id="client_MTU" placeholder="" value="{{.Device.Mtu}}">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="client_FirewallMark">Firewall Mark (0 = default or off)</label>
                            <input type="number" name="firewallmark" class="form-control" id="client_FirewallMark" placeholder="" value="{{.Device.FirewallMark}}">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="client_RoutingTable">Routing Table (empty = default or auto)</label>
                            <input type="text" name="routingtable" class="form-control" id="client_RoutingTable" placeholder="auto" value="{{.Device.RoutingTable}}">
                        </div>
                    </div>
                    <h3>Interface configuration hooks</h3>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="client_PreUp">Pre Up</label>
                            <input type="text" name="preup" class="form-control" id="client_PreUp" value="{{.Device.PreUp}}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="client_PostUp">Post Up</label>
                            <input type="text" name="postup" class="form-control" id="client_PostUp" value="{{.Device.PostUp}}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="client_PreDown">Pre Down</label>
                            <input type="text" name="predown" class="form-control" id="client_PreDown" value="{{.Device.PreDown}}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="client_PostDown">Post Down</label>
                            <input type="text" name="postdown" class="form-control" id="client_PostDown" value="{{.Device.PostDown}}">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Save</button>
                    <a href="/admin" class="btn btn-secondary">Cancel</a>
                </form>
            </div>
        </div>
    </div>
    {{template "prt_footer.html" .}}
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easing.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/bootstrap-confirmation.min.js"></script>
    <script src="/js/custom.js"></script>
</body>

</html>