{% extends "base.html" %}

{% block title %}{{ gateway.name }} - mGuard VPN Manager{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/gateways">Gateways</a></li>
        <li class="breadcrumb-item active">{{ gateway.name }}</li>
    </ol>
</nav>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>
            <span class="status-indicator {{ 'online' if gateway.is_online else 'offline' }}"></span>
            {{ gateway.name }}
        </h1>
        <p class="text-muted mb-0">
            {{ gateway.router_type }} |
            {{ gateway.location or 'Kein Standort' }} |
            {% if gateway.last_seen %}
                Zuletzt gesehen: <span data-relative-time="{{ gateway.last_seen }}">{{ gateway.last_seen }}</span>
            {% else %}
                Nie verbunden
            {% endif %}
        </p>
    </div>
    <div>
        <a href="/gateways/{{ gateway.id }}/provision" class="btn btn-success">
            <i class="bi bi-download"></i> Provisioning
        </a>
        <a href="/gateways/{{ gateway.id }}/edit" class="btn btn-outline-primary">
            <i class="bi bi-pencil"></i> Bearbeiten
        </a>
        <button class="btn btn-outline-danger" onclick="confirmDelete('Gateway wirklich löschen?', 'delete-form')">
            <i class="bi bi-trash"></i> Löschen
        </button>
        <form id="delete-form" action="/gateways/{{ gateway.id }}/delete" method="post" style="display:none;">
        </form>
    </div>
</div>

<div class="row">
    <!-- Gateway Info -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Gateway Details</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tr>
                        <th>Status</th>
                        <td>
                            {% if gateway.is_online %}
                                <span class="badge bg-success">Online</span>
                            {% else %}
                                <span class="badge bg-secondary">Offline</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>Typ</th>
                        <td>{{ gateway.router_type }}</td>
                    </tr>
                    <tr>
                        <th>Firmware</th>
                        <td>{{ gateway.firmware_version or '-' }}</td>
                    </tr>
                    <tr>
                        <th>Seriennummer</th>
                        <td>{{ gateway.serial_number or '-' }}</td>
                    </tr>
                    <tr>
                        <th>VPN IP</th>
                        <td>{{ gateway.vpn_ip or 'Nicht zugewiesen' }}</td>
                    </tr>
                    <tr>
                        <th>VPN Subnetz</th>
                        <td>{{ gateway.vpn_subnet or '-' }}</td>
                    </tr>
                    <tr>
                        <th>Provisioniert</th>
                        <td>
                            {% if gateway.is_provisioned %}
                                <span class="badge bg-success">Ja</span>
                            {% else %}
                                <span class="badge bg-warning">Nein</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>Standort</th>
                        <td>{{ gateway.location or '-' }}</td>
                    </tr>
                </table>

                {% if gateway.description %}
                <hr>
                <p class="mb-0 text-muted">{{ gateway.description }}</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Endpoints -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-hdd-network"></i> Endpunkte</h5>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addEndpointModal">
                    <i class="bi bi-plus"></i> Endpunkt hinzufügen
                </button>
            </div>
            <div class="card-body" id="endpoints-list"
                 hx-get="/htmx/gateways/{{ gateway.id }}/endpoints"
                 hx-trigger="load"
                 hx-swap="innerHTML">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Laden...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- VPN Connection Log -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-shield-check"></i> VPN-Verbindungslog</h5>
            </div>
            <div class="card-body" id="vpn-log"
                 hx-get="/htmx/gateways/{{ gateway.id }}/vpn-log"
                 hx-trigger="load, every 30s"
                 hx-swap="innerHTML">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Laden...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Access -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-person-check"></i> Benutzerzugriff</h5>
                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAccessModal">
                    <i class="bi bi-plus"></i> Zugriff gewähren
                </button>
            </div>
            <div class="card-body" id="access-list"
                 hx-get="/htmx/gateways/{{ gateway.id }}/access"
                 hx-trigger="load"
                 hx-swap="innerHTML">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Laden...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Endpoint Modal -->
<div class="modal fade" id="addEndpointModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form hx-post="/htmx/gateways/{{ gateway.id }}/endpoints"
                  hx-target="#endpoints-list"
                  hx-swap="innerHTML"
                  hx-on::after-request="bootstrap.Modal.getInstance(document.getElementById('addEndpointModal')).hide(); this.reset()">
                <div class="modal-header">
                    <h5 class="modal-title">Endpunkt hinzufügen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" name="name" required placeholder="z.B. HMI Türsteuerung">
                    </div>
                    <div class="row">
                        <div class="col-8 mb-3">
                            <label class="form-label">IP-Adresse</label>
                            <input type="text" class="form-control" name="internal_ip" required placeholder="10.0.0.3">
                        </div>
                        <div class="col-4 mb-3">
                            <label class="form-label">Port</label>
                            <input type="number" class="form-control" name="port" required placeholder="11740">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Protokoll</label>
                            <select class="form-select" name="protocol">
                                <option value="tcp">TCP</option>
                                <option value="udp">UDP</option>
                            </select>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Anwendung</label>
                            <select class="form-select" name="application_template_id" id="application-select"
                                    onchange="applyApplicationTemplate()">
                                <option value="" data-port="" data-protocol="">Benutzerdefiniert</option>
                                {% for template in templates %}
                                <option value="{{ template.id }}"
                                        data-port="{{ template.default_port }}"
                                        data-protocol="{{ template.protocol }}">
                                    {{ template.name }} (:{{ template.default_port }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Beschreibung (optional)</label>
                        <textarea class="form-control" name="description" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary">Hinzufügen</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function applyApplicationTemplate() {
    const select = document.getElementById('application-select');
    const option = select.options[select.selectedIndex];
    const port = option.dataset.port;
    const protocol = option.dataset.protocol;

    if (port) {
        document.querySelector('#addEndpointModal input[name="port"]').value = port;
    }
    if (protocol) {
        document.querySelector('#addEndpointModal select[name="protocol"]').value = protocol;
    }
}

function confirmDelete(message, formId) {
    if (confirm(message)) {
        document.getElementById(formId).submit();
    }
}
</script>
{% endblock %}