{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Serial · Port Settings{% endblock %}
{% block content %}
    {{ page_header('Serial', tabs=tabs, active_tab='port_settings') }}

    <form method="post" action="{{ url_for('save_config') }}" id="serial-form" data-dirty-track
          x-data='portSessions({{ sessions | tojson }})'
          @submit="$store.service.restarting()">

        <div id="connections-container" class="space-y-4">
            {% for connection in connections %}
            <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
                <div class="flex flex-col sm:flex-row sm:items-start gap-3 justify-between mb-4">
                    <div class="flex items-center gap-3">
                        {% if connection.enable == 'on' and connection.port %}
                        <span class="h-2.5 w-2.5 rounded-full dot-live"
                              :class="busy({{ connection.port }}) ? 'bg-amber-500 text-amber-500' : 'bg-emerald-500 text-emerald-500'"></span>
                        {% else %}
                        <span class="h-2.5 w-2.5 rounded-full {% if connection.enable == 'on' %}bg-emerald-500 dot-live text-emerald-500{% else %}bg-slate-300{% endif %}"></span>
                        {% endif %}
                        <div>
                            <div class="text-xs text-slate-500">Name</div>
                            <input type="text" name="conn_name_{{ loop.index0 }}" value="{{ connection.display_name }}"
                                   maxlength="60" required placeholder="e.g. Core Switch 1"
                                   class="text-base bg-transparent border-0 p-0 focus:ring-0">
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if connection.enable == 'on' and connection.port %}
                            <span x-show="busy({{ connection.port }})" style="display:none"
                                  class="inline-flex items-center gap-1.5 text-xs font-mono py-1.5 px-3 rounded-md bg-amber-500/10 text-amber-600 dark:text-amber-500"
                                  :title="'In use by ' + holderText({{ connection.port }}) + ' — connect to view or take over'">
                                <span class="h-2 w-2 rounded-full bg-amber-500 dot-live text-amber-500"></span>
                                <span x-text="'in use · ' + holderText({{ connection.port }})"></span>
                            </span>
                            <a href="{{ url_for('terminal', port=connection.port, standalone=1) }}" target="_blank"
                               onclick="window.open(this.href, '_blank', 'width=900,height=600,menubar=no,toolbar=no,location=no,status=no'); return false;"
                               class="inline-flex items-center gap-1.5 btn-primary text-sm font-medium py-1.5 px-3 rounded-md"
                               :class="$store.service.state !== 'active' ? 'opacity-40 pointer-events-none' : ''"
                               :title="$store.service.state !== 'active' ? 'Console service is ' + $store.service.label + ' — wait for it to come back' : ''">
                                <i data-lucide="terminal" class="h-4 w-4"></i> Connect
                            </a>
                        {% elif not connection.port %}
                            <span class="text-xs text-red-500 py-1.5 px-3 bg-red-50 dark:bg-red-900/20 rounded-md">No port</span>
                        {% else %}
                            <span class="text-xs text-slate-400 py-1.5 px-3 bg-slate-100 dark:bg-slate-800 rounded-md">Disabled</span>
                        {% endif %}
                        <button type="button" onclick="deleteConnection(this)"
                                class="text-slate-400 hover:text-red-500 p-1.5" aria-label="Delete">
                            <i data-lucide="trash-2" class="h-4 w-4"></i>
                        </button>
                    </div>
                </div>
                {# Narrow fixed columns for the short fields, so the serial
                   params sit inline on the same row instead of wrapping. #}
                <div x-data='{ mode: {{ (connection.mode or "telnet_rfc2217")|tojson }},
                               paramsLocked: {{ client_sets_params_modes|tojson }} }'
                     class="grid grid-cols-1 md:grid-cols-4 gap-6 items-start">
                    <div>
                        <label class="block text-xs text-slate-500 mb-1">TCP Port</label>
                        <input type="number" name="conn_port_{{ loop.index0 }}" value="{{ connection.port }}"
                               class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">
                    </div>

                    <div>
                        <label class="block text-xs text-slate-500 mb-1" title="How clients reach this port over the network.">Access Mode</label>
                        <select name="conn_mode_{{ loop.index0 }}" x-model="mode"
                                class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">
                            {% for value, label in serial_modes.items() %}
                            <option value="{{ value }}" {% if (connection.mode or 'telnet_rfc2217') == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs text-slate-500 mb-1">Device</label>
                        {# Console sockets only. The enumerator also reports serial
                           interfaces that are not console ports; offering them here
                           invites wiring a console to hardware that isn't one. #}
                        {% set console_ports = port_mappings | selectattr('kind', 'equalto', 'port') | list %}
                        {% set known = console_ports | map(attribute='device') | list %}
                        <select name="conn_device_{{ loop.index0 }}"
                                class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                            {% if connection.device and connection.device not in known %}
                            {# Already configured against something this board doesn't
                               offer. Keep it selected rather than silently substituting
                               the first option on save. #}
                            <option value="{{ connection.device }}" selected>Not detected · {{ connection.device.rsplit('/', 1)[-1] }}</option>
                            {% endif %}
                            {% for m in console_ports %}
                            <option value="{{ m.device }}" {% if m.device == connection.device %}selected{% endif %}>{{ m.label }}</option>
                            {% endfor %}
                        </select>
                        {% if connection.device and connection.device not in known %}
                        <p class="mt-1 text-xs text-[color:var(--bad)]">Not present on this device — this console cannot connect.</p>
                        {% endif %}
                    </div>

                    <div>
                        {% set sp = split_params(connection.params) %}
                        {# Under RFC2217 the client sets these over the network, so
                           showing them as editable would imply the device decides. #}
                        <div class="grid grid-cols-2 gap-3" :class="paramsLocked.includes(mode) ? 'opacity-50' : ''">
                            <div class="min-w-0">
                                <label class="block text-xs text-slate-500 mb-1">Baud</label>
                                <select name="conn_baud_{{ loop.index0 }}"
                                        :disabled="paramsLocked.includes(mode)"
                                        class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                                    {% for b in serial_bauds %}
                                    <option value="{{ b }}" {% if sp.baud == b|string %}selected{% endif %}>{{ b }}</option>
                                    {% endfor %}
                                    {% if sp.baud not in serial_bauds|map('string')|list %}
                                    <option value="{{ sp.baud }}" selected>{{ sp.baud }}</option>
                                    {% endif %}
                                </select>
                            </div>
                            <div class="min-w-0">
                                <label class="block text-xs text-slate-500 mb-1">Parity</label>
                                <select name="conn_parity_{{ loop.index0 }}"
                                        :disabled="paramsLocked.includes(mode)"
                                        class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">
                                    {% for value, label in serial_parities.items() %}
                                    <option value="{{ value }}" {% if sp.parity == value %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="min-w-0">
                                <label class="block text-xs text-slate-500 mb-1">Data</label>
                                <select name="conn_databits_{{ loop.index0 }}"
                                        :disabled="paramsLocked.includes(mode)"
                                        class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                                    {% for d in serial_data_bits %}
                                    <option value="{{ d }}" {% if sp.data_bits == d|string %}selected{% endif %}>{{ d }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="min-w-0">
                                <label class="block text-xs text-slate-500 mb-1">Stop</label>
                                <select name="conn_stopbits_{{ loop.index0 }}"
                                        :disabled="paramsLocked.includes(mode)"
                                        class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                                    {% for st in serial_stop_bits %}
                                    <option value="{{ st }}" {% if sp.stop_bits == st|string %}selected{% endif %}>{{ st }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        {# A disabled select submits nothing, so carry the values
                           through and keep what is on file. #}
                        <template x-if="paramsLocked.includes(mode)">
                            <div>
                                <input type="hidden" name="conn_params_{{ loop.index0 }}" value="{{ connection.params }}">
                                <p class="mt-1 text-[11px] text-slate-400">Set by the client at connect time.</p>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-slate-200 dark:border-slate-800 flex gap-6 text-sm">
                    <label class="flex items-center gap-2" title="Listen on this TCP port. Off = console unavailable.">
                        <input type="checkbox" name="conn_enable_{{ loop.index0 }}" {% if connection.enable == 'on' %}checked{% endif %}
                               class="rounded text-indigo-600 focus:ring-indigo-500">
                        Enable
                    </label>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="mt-6 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
            <button type="button" id="add-connection-btn"
                    class="inline-flex items-center gap-2 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 px-4 py-2 rounded-md text-sm">
                <i data-lucide="plus" class="h-4 w-4"></i> Add Connection
            </button>
            <button type="submit"
                    class="inline-flex items-center gap-2 btn-primary px-4 py-2 rounded-md text-sm font-medium">
                <i data-lucide="save" class="h-4 w-4"></i> Save Configuration
            </button>
        </div>
    </form>
{% endblock %}

{% block scripts %}
<script>
    const portMappings = {{ port_mappings|tojson }};
    const serialModes = {{ serial_modes|tojson }};
    const serialBauds = {{ serial_bauds|tojson }};
    const serialParities = {{ serial_parities|tojson }};
    const serialDataBits = {{ serial_data_bits|tojson }};
    const serialStopBits = {{ serial_stop_bits|tojson }};
    const maxConsolePorts = {{ max_console_ports }};
    const paramsLockedModes = {{ client_sets_params_modes|tojson }};
    let connectionCounter = {{ connections|length }};
    const container = document.getElementById('connections-container');
    document.getElementById('add-connection-btn').addEventListener('click', () => {
        if (connectionCounter >= maxConsolePorts) {
            alert(`This unit has ${maxConsolePorts} console ports.`);
            return;
        }
        const i = connectionCounter++;
        // Console sockets only, same as the rendered rows.
        const opts = portMappings.filter(m => m.kind === 'port')
            .map(m => `<option value="${m.device}">${m.label}</option>`).join('');
        const modeOpts = Object.entries(serialModes)
            .map(([value, label]) => `<option value="${value}" ${value === 'telnet_rfc2217' ? 'selected' : ''}>${label}</option>`)
            .join('');
        const sel = (list, chosen) => list
            .map(v => `<option value="${v}" ${String(v) === String(chosen) ? 'selected' : ''}>${v}</option>`).join('');
        const parityOpts = Object.entries(serialParities)
            .map(([v, label]) => `<option value="${v}" ${v === 'n' ? 'selected' : ''}>${label}</option>`).join('');
        const html = `
          <div class="rounded-lg border-2 border-indigo-400 bg-white dark:bg-slate-900 p-5">
            <div class="flex justify-between items-start mb-4">
              <input name="conn_name_${i}" value="Port ${i + 1}" maxlength="60" required placeholder="e.g. Core Switch 1" class="text-base bg-transparent border-0 p-0 focus:ring-0">
              <button type="button" onclick="deleteConnection(this)" class="text-slate-400 hover:text-red-500 p-1.5">
                <i data-lucide="trash-2" class="h-4 w-4"></i></button>
            </div>
            <div x-data='{ mode: "telnet_rfc2217", paramsLocked: paramsLockedModes }' class="grid grid-cols-1 md:grid-cols-4 gap-6 items-start">
              <div><label class="block text-xs text-slate-500 mb-1">TCP Port</label>
                <input type="number" name="conn_port_${i}" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm"></div>
              <div><label class="block text-xs text-slate-500 mb-1" title="How clients reach this port over the network.">Access Mode</label>
                <select name="conn_mode_${i}" x-model="mode" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">${modeOpts}</select>
</div>
              <div><label class="block text-xs text-slate-500 mb-1">Device</label>
                <select name="conn_device_${i}" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">${opts}</select></div>
              <div>
                <div class="grid grid-cols-2 gap-3" :class="paramsLocked.includes(mode) ? 'opacity-50' : ''">
                  <div class="min-w-0"><label class="block text-xs text-slate-500 mb-1">Baud</label>
                    <select name="conn_baud_${i}" :disabled="paramsLocked.includes(mode)" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">${sel(serialBauds, 9600)}</select></div>
                  <div class="min-w-0"><label class="block text-xs text-slate-500 mb-1">Parity</label>
                    <select name="conn_parity_${i}" :disabled="paramsLocked.includes(mode)" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">${parityOpts}</select></div>
                  <div class="min-w-0"><label class="block text-xs text-slate-500 mb-1">Data</label>
                    <select name="conn_databits_${i}" :disabled="paramsLocked.includes(mode)" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">${sel(serialDataBits, 8)}</select></div>
                  <div class="min-w-0"><label class="block text-xs text-slate-500 mb-1">Stop</label>
                    <select name="conn_stopbits_${i}" :disabled="paramsLocked.includes(mode)" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">${sel(serialStopBits, 1)}</select></div>
                </div>
                <template x-if="paramsLocked.includes(mode)">
                  <div><input type="hidden" name="conn_params_${i}" value="9600n81">
                  <p class="mt-1 text-[11px] text-slate-400">Set by the client at connect time.</p></div>
                </template>
              </div>
            </div>
            <div class="mt-4 pt-4 border-t border-slate-200 dark:border-slate-800 flex gap-6 text-sm">
              <label class="flex items-center gap-2" title="Listen on this TCP port. Off = console unavailable."><input type="checkbox" name="conn_enable_${i}" checked class="rounded text-indigo-600">Enable</label>
            </div>
          </div>`;
        container.insertAdjacentHTML('beforeend', html);
        lucide.createIcons();
    });
    function deleteConnection(btn) { btn.closest('div.rounded-lg')?.remove(); }
</script>
{% endblock %}