{% extends "layout.html" %}
{% set active_page = 'vpn_status' %}
{% block title %}m2000 Status - {{ super() }}{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 id="page-title" class="mb-0">m2000 Status</h2>
    </div>
    <div class="row align-items-end">
        <div class="col-md-4" id="dashboard-select-wrapper">
            <label for="dashboard-select" class="form-label">HPE P5G Dashboard</label>
            <select class="form-select" id="dashboard-select">
                <option selected>Triton</option>
                <option>Star</option>
                <option>Bluebonnet</option>
                <option>Lonestar</option>
                <option>Production</option>
                <option>Test (future)</option>
            </select>
        </div>
    </div>
    <hr>
    <div id="vpn-view">
        <p>List the status of all network links from the selected dashboard. From the results table, you can restart the OpenVPN service on a specific device.</p>
        <p>Note that after a VPN connection is restarted it will take some time for the connection to re-establish. Click List m2000 status to refresh the list.</p>
        <button class="btn btn-primary" id="listVpnsBtn">List m2000 Status</button>
    </div>
    <div class="mt-4">
        <h4>Results</h4>
        <div id="spinner" class="d-none spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
        <div id="results-output" class="p-3"></div>
    </div>
{% endblock %}

{% block extra_scripts %}
<script defer>
    document.getElementById('listVpnsBtn').addEventListener('click', async () => {
        const dashboard = document.getElementById('dashboard-select').value;
        const devices = await apiCall('/api/m2000/list', { dashboard });
        if (devices) {
            let tableHtml = `<table class="table table-dark table-hover table-sm align-middle table-compact">
                <thead><tr><th>Serial</th><th>Name</th><th>Subnet</th><th>Status</th><th class="text-center">Action</th></tr></thead>
                <tbody>`;
            devices.forEach(d => {
                const statusClass = getStatusClass(d.status);
                let actionHtml = '';
                if (d.status === 'DEPLOYED') {
                    actionHtml = `<a href="#" class="badge bg-danger text-decoration-none restart-btn" data-serial="${d.serial}" data-subnet="${d.subnet}" data-bs-toggle="tooltip" title="Restart VPN"><i class="bi bi-arrow-clockwise"></i> Restart</a>`;
                }
                tableHtml += `<tr><td>${d.serial}</td><td>${d.name}</td><td>${d.subnet}</td><td><span class="badge ${statusClass}">${d.status}</span></td><td><div class="d-flex justify-content-center">${actionHtml}</div></td></tr>`;
            });
            tableHtml += '</tbody></table>';
            resultsOutput.innerHTML = tableHtml;
            initializeTooltips();
        }
    });

    resultsOutput.addEventListener('click', async (event) => {
        const actionLink = event.target.closest('.restart-btn');
        if (actionLink) {
            event.preventDefault();
            const serial = actionLink.dataset.serial;
            const subnet = actionLink.dataset.subnet;
            const dashboard = document.getElementById('dashboard-select').value;

            actionLink.disabled = true;
            actionLink.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Sending...`;

            const result = await apiCall('/api/m2000/restart', { dashboard, serial, subnet }, false);

            if (result) {
                alert(result.message);
            }

            actionLink.disabled = false;
            actionLink.innerHTML = `<i class="bi bi-arrow-clockwise"></i> Restart`;
        }
    });
</script>
{% endblock %}