{% extends "base.html" %}

{% block title %}{% if server %}VPN-Server bearbeiten{% else %}Neuer VPN-Server{% endif %} - mGuard VPN{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    {% if server %}
                    <i class="bi bi-pencil"></i> VPN-Server bearbeiten
                    {% else %}
                    <i class="bi bi-plus-lg"></i> Neuer VPN-Server
                    {% endif %}
                </h4>
            </div>
            <div class="card-body">
                <form action="{% if server %}/vpn-servers/{{ server.id }}/edit{% else %}/vpn-servers/new{% endif %}" method="post">

                    <!-- Basic Settings -->
                    <h6 class="text-muted mb-3">Grundeinstellungen</h6>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Name *</label>
                            <input type="text" name="name" class="form-control" required
                                   value="{{ server.name if server else '' }}"
                                   placeholder="z.B. Produktion UDP">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Certificate Authority *</label>
                            {% if server %}
                            <input type="text" class="form-control" disabled
                                   value="{{ server.certificate_authority.name }}">
                            <input type="hidden" name="ca_id" value="{{ server.ca_id }}">
                            {% else %}
                            <select name="ca_id" class="form-select" required>
                                <option value="">-- CA auswählen --</option>
                                {% for ca in cas %}
                                <option value="{{ ca.id }}">{{ ca.name }}</option>
                                {% endfor %}
                            </select>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Beschreibung</label>
                        <textarea name="description" class="form-control" rows="2"
                                  placeholder="Optionale Beschreibung">{{ server.description if server else '' }}</textarea>
                    </div>

                    <hr>
                    <h6 class="text-muted mb-3">Netzwerk</h6>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Hostname/IP *</label>
                            <input type="text" name="hostname" class="form-control" required
                                   value="{{ server.hostname if server else '' }}"
                                   placeholder="vpn.meinefirma.de">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Port *</label>
                            <input type="number" name="port" class="form-control" required
                                   value="{{ server.port if server else 1194 }}"
                                   min="1" max="65535">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Protokoll *</label>
                            <select name="protocol" class="form-select">
                                <option value="udp" {% if not server or server.protocol.value == 'udp' %}selected{% endif %}>UDP</option>
                                <option value="tcp" {% if server and server.protocol.value == 'tcp' %}selected{% endif %}>TCP</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">VPN-Netzwerk</label>
                            <input type="text" name="vpn_network" class="form-control"
                                   value="{{ server.vpn_network if server else '10.8.0.0' }}"
                                   placeholder="10.8.0.0">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Netzmaske</label>
                            <input type="text" name="vpn_netmask" class="form-control"
                                   value="{{ server.vpn_netmask if server else '255.255.255.0' }}"
                                   placeholder="255.255.255.0">
                        </div>
                    </div>

                    <hr>
                    <h6 class="text-muted mb-3">Sicherheit</h6>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Cipher</label>
                            <select name="cipher" class="form-select">
                                {% for c in ciphers %}
                                <option value="{{ c.value }}" {% if server and server.cipher.value == c.value %}selected{% elif not server and c.value == 'AES-256-GCM' %}selected{% endif %}>
                                    {{ c.value }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Auth</label>
                            <select name="auth" class="form-select">
                                {% for a in auth_methods %}
                                <option value="{{ a.value }}" {% if server and server.auth.value == a.value %}selected{% elif not server and a.value == 'SHA256' %}selected{% endif %}>
                                    {{ a.value }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">TLS Version min</label>
                            <select name="tls_version_min" class="form-select">
                                <option value="1.2" {% if not server or server.tls_version_min == '1.2' %}selected{% endif %}>1.2</option>
                                <option value="1.3" {% if server and server.tls_version_min == '1.3' %}selected{% endif %}>1.3</option>
                            </select>
                        </div>
                    </div>

                    <hr>
                    <h6 class="text-muted mb-3">Performance</h6>

                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Max Clients</label>
                            <input type="number" name="max_clients" class="form-control"
                                   value="{{ server.max_clients if server else 100 }}"
                                   min="1" max="1000">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Keepalive (s)</label>
                            <input type="number" name="keepalive_interval" class="form-control"
                                   value="{{ server.keepalive_interval if server else 10 }}"
                                   min="1" max="60">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Timeout (s)</label>
                            <input type="number" name="keepalive_timeout" class="form-control"
                                   value="{{ server.keepalive_timeout if server else 60 }}"
                                   min="10" max="300">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Kompression</label>
                            <select name="compression" class="form-select">
                                {% for co in compression_options %}
                                <option value="{{ co.value }}" {% if server and server.compression.value == co.value %}selected{% elif not server and co.value == 'none' %}selected{% endif %}>
                                    {{ co.value }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <hr>
                    <h6 class="text-muted mb-3">Docker</h6>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Management-Port</label>
                            <input type="number" name="management_port" class="form-control"
                                   value="{{ server.management_port if server else 7505 }}"
                                   min="1" max="65535">
                        </div>
                        <div class="col-md-6 mb-3 d-flex align-items-end">
                            <div class="form-check">
                                <input type="checkbox" name="is_primary" class="form-check-input" id="isPrimary"
                                       {% if server and server.is_primary %}checked{% endif %}>
                                <label class="form-check-label" for="isPrimary">Primärer Server</label>
                            </div>
                        </div>
                    </div>

                    {% if server %}
                    <div class="row">
                        <div class="col-md-6 mb-3 d-flex align-items-end">
                            <div class="form-check">
                                <input type="checkbox" name="is_active" class="form-check-input" id="isActive"
                                       {% if server.is_active %}checked{% endif %}>
                                <label class="form-check-label" for="isActive">Server aktiv</label>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg"></i>
                            {% if server %}Speichern{% else %}VPN-Server erstellen{% endif %}
                        </button>
                        <a href="/vpn-servers" class="btn btn-outline-secondary">Abbrechen</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}