{% extends "layout.html" %}
{% set active_page = 'network_clients' %}
{% block title %}Network Clients - {{ super() }}{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 id="page-title" class="mb-0">Network Clients (SUPI)</h2>
    </div>
    <div class="row align-items-end">
        <div class="col-md-5" id="host-ip-wrapper">
            <label for="host" class="form-label">5GC Host IP</label>
            <input type="text" class="form-control" id="host" placeholder="IPv4 or IPv6 Address">
        </div>
        <div class="col-auto">
             <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-placement="right" title="Enter the IPv4 or IPv6 address. IPv6 addresses are automatically enclosed in [ ] if needed."></i>
        </div>
    </div>
    <hr>
    <div id="subscriber-view">
        <p>Retrieve a list of all Network Clients (SUPIs) from the specified 5GC Host.</p>
        <button class="btn btn-primary" id="listSupiBtn">List Network Clients</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('listSupiBtn').addEventListener('click', async () => {
         const rawHost = document.getElementById('host').value;
        if (!rawHost) {
            alert('Please enter a 5GC Host IP address.');
            return;
        }
        const host = formatHostIp(rawHost);
        const supiData = await apiCall('/api/supis/list', { host }); 
        if (supiData) {
            resultsOutput.textContent = JSON.stringify(supiData, null, 2);
        }
    });
</script>
{% endblock %}