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

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 id="page-title" class="mb-0">m2000 Configuration Reset</h2>
    </div>
    <hr>
    <div id="reset-view">
        <p>Enter a base IPv6 address to reset the configuration for AMF, UPF, SMF, SGWC, MME, and PCF services on the derived hosts (ending in ':a' and ':b').</p>
        <div class="row align-items-end g-3">
            <div class="col-md-6">
                <label for="base-ip-input" class="form-label">Base IPv6 Address</label>
                <input type="text" class="form-control" id="base-ip-input" placeholder="e.g., fd14:6666::1a:0">
            </div>
            <div class="col-auto">
                <button class="btn btn-danger" id="resetConfigBtn">Reset Configuration</button>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <h4>Result</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('resetConfigBtn').addEventListener('click', async () => {
        const baseIp = document.getElementById('base-ip-input').value;
        if (!baseIp) {
            alert('Please enter a base IPv6 address.');
            return;
        }

        if (!confirm('Are you sure you want to factory reset the configuration for 6 services on 2 hosts? This action cannot be undone.')) {
            return;
        }

        const results = await apiCall('/api/m2000/reset-config', { base_ip: baseIp });
        if (results) {
            let tableHtml = `<table class="table table-dark table-sm table-compact">
                <thead>
                    <tr>
                        <th>Host</th>
                        <th>Service</th>
                        <th>Status</th>
                        <th>Message</th>
                    </tr>
                </thead>
                <tbody>`;

            results.forEach(result => {
                const statusClass = result.status === 'Success' ? 'bg-success' : 'bg-danger';
                tableHtml += `<tr>
                    <td>${result.host}</td>
                    <td>${result.service}</td>
                    <td><span class="badge ${statusClass}">${result.status}</span></td>
                    <td>${result.message}</td>
                </tr>`;
            });
            
            tableHtml += '</tbody></table>';
            resultsOutput.innerHTML = tableHtml;
        }
    });
</script>
{% endblock %}