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

    {% if not modem.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">
        <span class="font-semibold">No modem detected.</span> No cellular module can be seen right now — check that it's seated and powered. Settings saved here apply as soon as one appears.
    </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 lg:col-span-1">
            <h3 class="font-semibold mb-4">Modem status</h3>
            <div class="flex items-center gap-3 mb-3">
                <div class="flex items-end gap-0.5 h-10">
                    {% for i in range(5) %}
                        <div class="w-1.5 {% if i < (modem.signal // 20) %}bg-emerald-500{% else %}bg-slate-200 dark:bg-slate-700{% endif %}" style="height: {{ (i+1)*20 }}%"></div>
                    {% endfor %}
                </div>
                <div class="text-2xl font-semibold font-mono">{{ modem.signal }}%</div>
            </div>
            <dl class="text-sm space-y-2">
                <div class="flex justify-between"><dt class="text-slate-500">State</dt><dd class="font-mono text-xs">{{ modem.state }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Carrier</dt><dd>{{ modem.carrier or '—' }}{% if modem.tech %} <span class="text-xs text-slate-500 uppercase">{{ modem.tech }}</span>{% endif %}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Modem</dt><dd class="text-xs">{{ modem.model or '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">APN</dt><dd class="font-mono">{{ modem.apn or '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">IP</dt><dd class="font-mono">{{ modem.ip or '—' }}</dd></div>
                {% if modem.active_slot %}
                <div class="flex justify-between"><dt class="text-slate-500">Active SIM</dt><dd class="font-mono">slot {{ modem.active_slot }}</dd></div>
                {% endif %}
            </dl>
        </div>

        <div class="lg:col-span-2 space-y-4">
        {% if modem.slots %}
            {# Per-SIM panels. Each slot is its own form: they write separate
               settings, and saving one must not silently rewrite the other. #}
            {% for slot in modem.slots %}
            <div class="rounded-lg border {% if slot.active %}border-emerald-500/50{% else %}border-slate-200 dark:border-slate-800{% endif %} bg-white dark:bg-slate-900 p-5">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-semibold flex items-center gap-2">
                        SIM {{ slot.slot }}
                        {% if slot.active %}
                        <span class="text-[11px] font-mono px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">active</span>
                        {% elif not slot.present %}
                        <span class="text-[11px] font-mono px-2 py-0.5 rounded bg-slate-500/10 text-slate-500">empty</span>
                        {% else %}
                        <span class="text-[11px] font-mono px-2 py-0.5 rounded bg-slate-500/10 text-slate-500">standby</span>
                        {% endif %}
                    </h3>
                    {% if slot.operator_name %}<span class="text-xs text-slate-500">{{ slot.operator_name }}</span>{% endif %}
                </div>

                <dl class="text-xs space-y-1 mb-4 font-mono">
                    <div class="flex justify-between"><dt class="text-slate-500">IMSI</dt><dd>{{ slot.imsi or '—' }}</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-500">ICCID</dt><dd>{{ slot.iccid or '—' }}</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-500">Operator</dt><dd>{{ slot.operator_id or '—' }}</dd></div>
                </dl>
                {% if not slot.active %}
                <p class="text-[11px] text-slate-500 mb-3">
                    Only the active SIM can be read — the other is powered down — so
                    identifiers stay blank until this slot is in use. Its APN can still
                    be set now, which is what makes a failover to it work.
                </p>
                {% endif %}

                <form method="post" action="{{ url_for('networking_mobile') }}" class="space-y-3" data-dirty-track>
                    <input type="hidden" name="slot" value="{{ slot.slot }}">
                    <label class="flex items-center gap-3">
                        <input type="checkbox" name="enabled" {% if slot.enabled %}checked{% endif %} class="rounded text-indigo-600">
                        <span class="text-sm">Use this SIM for cellular</span>
                    </label>
                    <div>
                        <label class="block text-xs text-slate-500 mb-1">APN</label>
                        <input name="apn" value="{{ slot.apn }}" list="apn-options-{{ slot.slot }}"
                               placeholder="{{ slot.apn_help.suggested.apn if slot.apn_help and slot.apn_help.suggested else 'internet' }}"
                               class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                        {% if slot.apn_help and slot.apn_help.suggested %}
                        <datalist id="apn-options-{{ slot.slot }}">
                            <option value="{{ slot.apn_help.suggested.apn }}"></option>
                            {% for alt in slot.apn_help.alternatives %}<option value="{{ alt.apn }}"></option>{% endfor %}
                        </datalist>
                        <p class="mt-1 text-[11px] text-slate-500">
                            {{ slot.apn_help.suggested.name }} uses
                            <button type="button" class="font-mono underline"
                                    onclick="this.closest('form').querySelector('[name=apn]').value='{{ slot.apn_help.suggested.apn }}'">{{ slot.apn_help.suggested.apn }}</button>
                            — from the carrier database. Type your own to override.
                        </p>
                        {% elif slot.apn_help and not slot.apn_help.db_available %}
                        <p class="mt-1 text-[11px] text-slate-500">
                            Carrier database not installed, so no APN suggestion —
                            enter the one your provider gave you.
                        </p>
                        {% endif %}
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div>
                            <label class="block text-xs text-slate-500 mb-1">SIM PIN</label>
                            <input name="sim_pin" type="password" value="{{ slot.sim_pin }}" placeholder="••••"
                                   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">Username</label>
                            <input name="username" value="{{ slot.username }}"
                                   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</label>
                            <input name="password" type="password" value="{{ slot.password }}"
                                   class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                        </div>
                    </div>
                    <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 SIM {{ slot.slot }}</button>
                    </div>
                </form>
            </div>
            {% endfor %}

            {% if modem.dual_sim %}
            <p class="text-xs text-slate-500 px-1">
                Switching between SIMs is handled by SIM failover — turn it on under
                Admin &rarr; System — rather than from this page. The switch has to
                re-initialise the modem in a particular order, and doing it by hand is
                how a modem ends up needing a power cycle.
            </p>
            {% endif %}
        {% else %}
            {# No modem, or one that reports no slots: the original single-APN form. #}
            <form method="post" action="{{ url_for('networking_mobile') }}"
                  class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 space-y-4" data-dirty-track>
                <h3 class="font-semibold">Modem configuration</h3>
                <label class="flex items-center gap-3"><input type="checkbox" name="enabled" {% if modem.enabled %}checked{% endif %} class="rounded text-indigo-600"><span class="text-sm">Enable cellular backup</span></label>
                <div><label class="block text-xs text-slate-500 mb-1">APN</label><input name="apn" value="{{ modem.apn }}" placeholder="internet" 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">SIM PIN (if the SIM has one)</label><input name="sim_pin" type="password" value="{{ modem.sim_pin }}" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono" placeholder="••••"></div>
                <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>
        {% endif %}
        </div>
    </div>
{% endblock %}