{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Networking · Hotspot{% endblock %}
{% block content %}
    {{ page_header('Networking', tabs=tabs, active_tab='hotspot') }}

    {% if hotspot.legacy_iface %}
    {# Set up before the access point moved to its own interface. It still
       broadcasts, but it holds the radio's only station slot, so the unit
       cannot join a Wi-Fi network while it runs. #}
    <div class="mb-4 p-4 rounded-lg border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-900/20 flex flex-wrap justify-between items-center gap-3">
        <div>
            <div class="text-sm font-semibold">This hotspot uses the shared Wi-Fi interface</div>
            <div class="text-xs text-slate-600 dark:text-slate-300 mt-0.5">
                It works, but while it runs this device can't also join a Wi-Fi network,
                and clients get an address outside {{ hotspot.subnet }}. Moving it keeps
                the network name and password.
            </div>
        </div>
        <form method="post" action="{{ url_for('networking_hotspot') }}">
            <input type="hidden" name="action" value="migrate_iface">
            <button class="btn-primary text-sm px-3 py-1.5 rounded-md">Move to its own interface</button>
        </form>
    </div>
    {% endif %}

    {% if not hotspot.wifi_present %}
    <div class="mb-4 p-4 rounded-lg border-l-4 border-slate-400 bg-slate-50 dark:bg-slate-800/50 text-sm">No Wi-Fi radio was detected on this device.</div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
            <h3 class="font-semibold mb-3">Hotspot</h3>
            {% if hotspot.configured %}
            <div class="flex items-center gap-2 mb-3">
                <span class="h-2 w-2 rounded-full {% if hotspot.enabled %}bg-emerald-500 dot-live text-emerald-500{% else %}bg-slate-300{% endif %}"></span>
                <span class="text-sm">{{ 'Broadcasting' if hotspot.enabled else 'Off' }}</span>
            </div>
            <dl class="text-sm space-y-2">
                <div class="flex justify-between"><dt class="text-slate-500">SSID</dt><dd class="font-mono">{{ hotspot.ssid }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Radio</dt><dd class="font-mono text-xs">{{ hotspot.band }} · ch {{ hotspot.channel }} · {{ hotspot.security }}</dd></div>
                {% if hotspot.enabled %}
                <div class="flex justify-between"><dt class="text-slate-500">Clients</dt><dd>{{ hotspot.clients }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Device IP</dt><dd class="font-mono">{{ hotspot.ip or '—' }}</dd></div>
                {% endif %}
                <div class="flex justify-between"><dt class="text-slate-500">Subnet</dt><dd class="font-mono text-xs">{{ hotspot.subnet }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Sharing</dt><dd class="text-xs">{{ 'uplink shared' if hotspot.share_internet else 'local only' }}</dd></div>
            </dl>
            <div class="flex gap-2 mt-4 pt-4 border-t border-slate-200 dark:border-slate-800">
                <form method="post" action="{{ url_for('networking_hotspot') }}"><input type="hidden" name="action" value="{{ 'disable' if hotspot.enabled else 'enable' }}"><button class="text-sm px-3 py-1 rounded border border-slate-200 dark:border-slate-700">{{ 'Stop' if hotspot.enabled else 'Start' }}</button></form>
                <form method="post" action="{{ url_for('networking_hotspot') }}" onsubmit="return confirm('Remove the hotspot profile?')"><input type="hidden" name="action" value="remove"><button class="text-sm px-3 py-1 rounded text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20">Remove</button></form>
            </div>
            {% else %}
            <p class="text-sm text-slate-500">Not configured. A hotspot lets a technician reach this device over Wi-Fi without knowing its LAN address.</p>
            {% endif %}
        </div>

        <form method="post" action="{{ url_for('networking_hotspot') }}" data-dirty-track
              class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 lg:col-span-2 space-y-4"
              x-data="{ band: '{{ hotspot.band }}' }">
            <input type="hidden" name="action" value="configure">
            <h3 class="font-semibold">Hotspot settings</h3>
            <p class="text-xs text-slate-500">
                The hotspot has its own network interface, so this device can be a Wi-Fi
                client at the same time. There is one radio, though, so both share a channel:
                {% if hotspot.sta_connected %}
                Wi-Fi is connected on {{ hotspot.sta_band }} channel {{ hotspot.sta_channel }},
                so the hotspot follows it and band/channel can't be set here.
                {% else %}
                while Wi-Fi is disconnected the channel is yours to pick; it will follow
                the client link once one is established.
                {% endif %}
            </p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div><label class="block text-xs text-slate-500 mb-1">SSID</label><input name="ssid" value="{{ hotspot.ssid }}" required maxlength="32" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono"></div>
                <div><label class="block text-xs text-slate-500 mb-1">Password (8–63 chars)</label><input type="password" name="password" required minlength="8" maxlength="63" placeholder="{{ '••••••••' if hotspot.configured else '' }}" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono"></div>
            </div>
            <div class="grid grid-cols-3 gap-3">
                <div><label class="block text-xs text-slate-500 mb-1">Band</label>
                    {# Only what this radio can do — offering a band it lacks produces a
                       hotspot that silently never comes up. #}
                    <select name="band" x-model="band" {% if hotspot.sta_connected %}disabled{% endif %}
                            class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm disabled:opacity-50">
                        {% for b in hotspot.supported_bands %}<option>{{ b }}</option>{% endfor %}
                    </select>
                    {% if hotspot.sta_connected %}<input type="hidden" name="band" value="{{ hotspot.sta_band }}">{% endif %}</div>
                <div><label class="block text-xs text-slate-500 mb-1">Channel</label>
                    <select name="channel" {% if hotspot.sta_connected %}disabled{% endif %}
                            class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm disabled:opacity-50">
                        <template x-if="band === '2.4 GHz'"><optgroup label="2.4 GHz">{% for c in range(1, 14) %}<option value="{{ c }}" {% if hotspot.channel == c %}selected{% endif %}>{{ c }}</option>{% endfor %}</optgroup></template>
                        <template x-if="band === '5 GHz'"><optgroup label="5 GHz">{% for c in (36, 40, 44, 48, 149, 153, 157, 161, 165) %}<option value="{{ c }}" {% if hotspot.channel == c %}selected{% endif %}>{{ c }}</option>{% endfor %}</optgroup></template>
                    </select>
                    {% if hotspot.sta_connected %}<input type="hidden" name="channel" value="{{ hotspot.sta_channel }}">{% endif %}</div>
                <div><label class="block text-xs text-slate-500 mb-1">Security</label>
                    <select name="security" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm"><option {% if hotspot.security == 'WPA2' %}selected{% endif %}>WPA2</option><option {% if hotspot.security == 'WPA3' %}selected{% endif %}>WPA3</option></select></div>
            </div>
            <label class="flex items-start gap-2 text-sm pt-1"
                   title="Off still gives clients DHCP and access to this device — it only stops them routing onward.">
                <input type="checkbox" name="share_internet" {% if hotspot.share_internet %}checked{% endif %}
                       class="mt-0.5 rounded border-slate-300 dark:border-slate-600">
                <span>
                    Share the uplink
                    <span class="block text-xs text-slate-500">
                        Clients reach the internet through this device. Off keeps them on
                        {{ hotspot.subnet }} with access to the unit but no route onward.
                    </span>
                </span>
            </label>
            <div class="flex justify-end"><button class="inline-flex items-center gap-2 btn-primary px-3 py-1.5 rounded-md text-sm"><i data-lucide="save" class="h-4 w-4"></i>Save</button></div>
        </form>
    </div>
    {% if hotspot.enabled %}
    <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 mt-4">
        <h3 class="font-semibold mb-3">Connected clients <span class="text-slate-400 font-normal text-sm font-mono">{{ hotspot.clients }}</span></h3>
        {% if hotspot.client_list %}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="text-xs text-slate-500 border-b border-slate-200 dark:border-slate-800">
                    <tr><th class="text-left py-2">IP address</th><th class="text-left py-2">MAC</th><th class="text-left py-2">Signal</th>
                        <th class="text-left py-2">Idle</th><th class="text-left py-2">Rx</th>
                        <th class="text-left py-2">Tx</th></tr>
                </thead>
                <tbody>
                {% for c in hotspot.client_list %}
                    <tr class="border-b border-slate-100 dark:border-slate-800">
                        <td class="py-2 font-mono text-xs">{{ c.ip or '—' }}{% if c.hostname %}<span class="block text-slate-500">{{ c.hostname }}</span>{% endif %}</td>
                        <td class="py-2 font-mono text-xs">{{ c.mac }}</td>
                        <td class="py-2 font-mono text-xs">{{ (c.signal_dbm ~ ' dBm') if c.signal_dbm is not none else '—' }}</td>
                        <td class="py-2 font-mono text-xs">{{ ((c.inactive_ms / 1000) | round(1) ~ ' s') if c.inactive_ms is not none else '—' }}</td>
                        <td class="py-2 font-mono text-xs">{{ c.rx_bytes if c.rx_bytes is not none else '—' }}</td>
                        <td class="py-2 font-mono text-xs">{{ c.tx_bytes if c.tx_bytes is not none else '—' }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-sm text-slate-500">No clients connected.</p>
        {% endif %}
    </div>
    {% endif %}
{% endblock %}