{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Networking · Wireless{% endblock %}
{% block content %}
    {{ page_header('Networking', tabs=tabs, active_tab='wireless') }}
    <div x-data="{ selected: null }">
        {% if ap_client.connected_to %}
        <div class="mb-4 p-4 rounded-lg border-l-4 border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20 flex justify-between items-center">
            <div><div class="text-sm font-semibold">Connected to {{ ap_client.connected_to }}</div><div class="text-xs text-slate-500 font-mono">{{ ap_client.ip or '' }}{% if ap_client.band %} · {{ ap_client.band }}{% endif %}{% if ap_client.channel %} · ch {{ ap_client.channel }}{% endif %}{% if ap_client.only_uplink %} · this is the device's only route out{% endif %}</div></div>
            <form method="post" action="{{ url_for('networking_wireless') }}"><input type="hidden" name="action" value="disconnect"><button class="text-sm px-3 py-1 rounded border border-emerald-500 text-emerald-700 dark:text-emerald-300 disabled:opacity-50" {% if ap_client.only_uplink %}disabled title="Disconnecting would cut off remote access"{% endif %}>Disconnect</button></form>
        </div>
        {% endif %}
        {% if not ap_client.radio_enabled %}
        {# Distinguish "switched off" from "nothing in range": with the radio
           off a scan returns nothing, which read as the latter. #}
        <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">Wi-Fi is turned off</div>
                <div class="text-xs text-slate-500">No networks can be found until it is switched on.</div>
            </div>
            <form method="post" action="{{ url_for('networking_wireless') }}">
                <input type="hidden" name="action" value="radio_on">
                <button class="btn-primary text-sm px-3 py-1.5 rounded-md">Turn Wi-Fi on</button>
            </form>
        </div>
        {% endif %}

        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Available networks</h3>
            {% if ap_client.radio_enabled %}
            <form method="post" action="{{ url_for('networking_wireless') }}"
                  onsubmit="return confirm('Turn Wi-Fi off?\n\nAny connection over it will drop.')">
                <input type="hidden" name="action" value="radio_off">
                <button class="text-xs px-2.5 py-1 rounded-md border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800">Turn Wi-Fi off</button>
            </form>
            {% endif %}
        </div>
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 divide-y divide-slate-100 dark:divide-slate-800">
            {% for a in ap_client.available %}
            <button type="button" @click="selected = {{ loop.index0 }}" class="w-full flex items-center gap-4 px-5 py-3 text-left hover:bg-slate-50 dark:hover:bg-slate-800/50">
                <div class="flex items-end gap-0.5 h-6 w-6">{% for i in range(4) %}<div class="w-1 {% if i < (a.signal // 25) %}bg-sky-500{% else %}bg-slate-200 dark:bg-slate-700{% endif %}" style="height: {{ (i+1)*25 }}%"></div>{% endfor %}</div>
                <div class="flex-1"><div class="text-sm font-medium">{{ a.ssid }}</div><div class="text-xs text-slate-500">{{ a.security }} · {{ a.signal }}%{% if a.band %} · {{ a.band }}{% endif %}{% if a.channel %} · ch {{ a.channel }}{% endif %}</div></div>
                <i data-lucide="chevron-right" class="h-4 w-4 text-slate-300"></i>
            </button>
            {% else %}
            <div class="px-5 py-6 text-sm text-slate-400">
                {% if ap_client.radio_enabled %}No networks found. The scan runs each time this page loads.
                {% else %}Wi-Fi is off — switch it on to scan.{% endif %}
            </div>
            {% endfor %}
        </div>

        {% for a in ap_client.available %}
        <div x-show="selected === {{ loop.index0 }}" x-transition.opacity class="fixed inset-0 z-40 bg-black/50 flex items-center justify-center p-4" style="display:none" @click.self="selected = null">
            <form method="post" action="{{ url_for('networking_wireless') }}" class="bg-white dark:bg-slate-900 rounded-lg shadow-xl max-w-md w-full p-6 space-y-4">
                <input type="hidden" name="action" value="connect"><input type="hidden" name="ssid" value="{{ a.ssid }}">
                <h3 class="font-semibold">Connect to {{ a.ssid }}</h3>
                <p class="text-xs text-slate-500 font-mono">{{ a.security }} · signal {{ a.signal }}%</p>
                {% if a.security != 'Open' %}
                <div><label class="block text-xs text-slate-500 mb-1">Password</label>
                    {# A saved network joins with the password it already has; typing
                       one replaces it. Demanding it every time is how a working
                       network became unjoinable. #}
                    <input type="password" name="password" {% if not a.saved %}required{% endif %}
                           placeholder="{{ 'Saved — leave blank to use it' if a.saved else '' }}"
                           class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                    {% if a.saved %}<p class="text-xs text-slate-500 mt-1">This device has a password saved for {{ a.ssid }}. Enter a new one only if it has changed.</p>{% endif %}
                </div>
                {% endif %}
                <div class="flex justify-end gap-2"><button type="button" @click="selected = null" class="px-3 py-1.5 text-sm">Cancel</button><button class="btn-primary px-3 py-1.5 rounded-md text-sm">Connect</button></div>
            </form>
        </div>
        {% endfor %}
    </div>
{% endblock %}