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

    {% if lan.pending %}
    <div class="mb-4 p-4 rounded-lg border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-900/20"
         x-data="{ left: {{ lan.pending.seconds_left }} }"
         x-init="setInterval(() => { if (left > 0) left--; else location.reload(); }, 1000)">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <div class="text-sm font-semibold">New settings are live: {{ lan.pending.summary }}</div>
                <div class="text-xs text-slate-600 dark:text-slate-300 mt-0.5">
                    Keep them? If you don't within <span class="font-mono" x-text="left"></span>s, the previous settings are restored automatically.
                    If the IP changed, open the new address and press Keep there.
                </div>
            </div>
            <div class="flex gap-2">
                <form method="post" action="{{ url_for('networking_lan_dhcp') }}"><input type="hidden" name="action" value="revert"><button class="text-sm px-3 py-1.5 rounded-md border border-slate-300 dark:border-slate-700">Revert now</button></form>
                <form method="post" action="{{ url_for('networking_lan_dhcp') }}"><input type="hidden" name="action" value="confirm"><button class="btn-primary text-sm px-3 py-1.5 rounded-md">Keep settings</button></form>
            </div>
        </div>
    </div>
    {% elif lan.auto_reverted %}
    <div class="mb-4 p-4 rounded-lg border-l-4 border-red-500 bg-red-50 dark:bg-red-900/20 text-sm">
        The change to <span class="font-mono">{{ lan.auto_reverted }}</span> wasn't confirmed in time, so the previous settings were restored.
    </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">{{ lan.iface | iface_label }} interface</h3>
            <dl class="text-sm space-y-2">
                <div class="flex justify-between"><dt class="text-slate-500">Link</dt>
                    <dd class="flex items-center gap-2">
                        {% if lan.link_up %}<span class="h-2 w-2 rounded-full bg-emerald-500 dot-live text-emerald-500"></span>Up{% if lan.speed_mbps %} · {{ lan.speed_mbps }} Mbps{% endif %}
                        {% else %}<span class="h-2 w-2 rounded-full bg-slate-300"></span>Down{% endif %}
                    </dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Mode</dt><dd>{{ 'Static' if lan.method == 'static' else 'DHCP' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">IP</dt><dd class="font-mono">{{ lan.ip or '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Gateway</dt><dd class="font-mono">{{ lan.gateway or '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">DNS</dt><dd class="font-mono text-right">{{ lan.dns | join(', ') if lan.dns else '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">MAC</dt><dd class="font-mono">{{ lan.mac or '—' }}</dd></div>
                {# Profile hidden for pre-production: an implementation detail. #}
            </dl>
        </div>

        <form method="post" action="{{ url_for('networking_lan_dhcp') }}"
              class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 lg:col-span-2"
              data-dirty-track x-data="{ method: '{{ lan.config.method }}' }">
            <input type="hidden" name="action" value="apply">
            <h3 class="font-semibold mb-1">Address settings</h3>
            <p class="text-xs text-slate-500 mb-4">Changes go live immediately and must be kept within {{ lan.checkpoint_timeout }}s, so a mistake can't lock you out.</p>

            <div class="flex gap-6 text-sm mb-4">
                <label class="flex items-center gap-2"><input type="radio" name="method" value="dhcp" x-model="method" class="text-indigo-600">Automatic (DHCP)</label>
                <label class="flex items-center gap-2"><input type="radio" name="method" value="static" x-model="method" class="text-indigo-600">Static</label>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                <div x-show="method === 'static'">
                    <label class="block text-xs text-slate-500 mb-1">Address / prefix</label>
                    <input name="address" value="{{ lan.config.address }}" placeholder="10.0.180.21/22"
                           class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                </div>
                <div x-show="method === 'static'">
                    <label class="block text-xs text-slate-500 mb-1">Gateway</label>
                    <input name="gateway" value="{{ lan.config.gateway }}" placeholder="10.0.180.1"
                           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">DNS servers <span x-show="method === 'dhcp'">(optional override)</span></label>
                    <input name="dns" value="{{ lan.config.dns | join(', ') }}" placeholder="10.0.180.1, 1.1.1.1"
                           class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                </div>
            </div>

            <div class="mt-4 flex justify-end">
                <button class="inline-flex items-center gap-2 btn-primary px-3 py-1.5 rounded-md text-sm" {% if lan.pending %}disabled title="Keep or revert the pending change first"{% endif %}>
                    <i data-lucide="save" class="h-4 w-4"></i>Apply
                </button>
            </div>
        </form>
    </div>
{% endblock %}