{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Web Terminal{% endblock %}
{% block content %}
    {{ page_header('Web Terminal') }}
    <p class="text-sm text-slate-500 mb-6">
        Pick a port to open its console. Ports grouped by USB hub.
        <span class="inline-flex items-center gap-1.5 ml-3 text-xs text-slate-400">
            <span class="h-2 w-2 rounded-full bg-emerald-500 inline-block"></span> free
            <span class="h-2 w-2 rounded-full bg-amber-500 inline-block ml-2"></span> in use
        </span>
    </p>

    {% set hubs = [('Hub 1', ports[0:4]), ('Hub 2', ports[4:8]), ('Hub 3', ports[8:12]),
                   ('Hub 4', ports[12:16]), ('Hub 5', ports[16:20]), ('Hub 6', ports[20:24])] %}
    <div class="space-y-6" x-data='portSessions({{ sessions | tojson }})'>
        {% for hub_name, hub_ports in hubs %}
        <section>
            <h3 class="font-semibold text-sm text-slate-500 mb-2">{{ hub_name }}</h3>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                {% for p in hub_ports %}
                    {% set conn = (connections | selectattr('device', 'equalto', p.device) | list | first) %}
                    {% set enabled = conn and conn.enable == 'on' %}
                    {% if enabled %}
                    <a href="{{ url_for('terminal', port=conn.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="rounded-lg border p-4 transition-colors bg-white dark:bg-slate-900 hover:shadow-md"
                       :class="busy({{ conn.port }}) ? 'border-amber-500/50 hover:border-amber-500' : 'border-rose-500/40 hover:border-rose-500'"
                       :title="busy({{ conn.port }}) ? 'In use by ' + holderText({{ conn.port }}) + ' — open to view or take over' : ''">
                        <div class="flex items-center justify-between mb-1">
                            <span class="font-semibold">{{ p.label }}</span>
                            <span class="h-2.5 w-2.5 rounded-full dot-live"
                                  :class="busy({{ conn.port }}) ? 'bg-amber-500 text-amber-500' : 'bg-emerald-500 text-emerald-500'"></span>
                        </div>
                        <div class="text-xs font-mono truncate"
                             :class="busy({{ conn.port }}) ? 'text-amber-600 dark:text-amber-500' : 'text-slate-500'"
                             x-text="busy({{ conn.port }}) ? 'in use · ' + holderText({{ conn.port }}) : 'tcp {{ conn.port }} · {{ conn.params }}'">tcp {{ conn.port }} · {{ conn.params }}</div>
                    </a>
                    {% else %}
                    <div class="rounded-lg border p-4 border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/50 text-slate-400 cursor-not-allowed">
                        <div class="flex items-center justify-between mb-1">
                            <span class="font-semibold">{{ p.label }}</span>
                            <span class="h-2.5 w-2.5 rounded-full bg-slate-300"></span>
                        </div>
                        <div class="text-xs font-mono text-slate-500">not configured</div>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </section>
        {% endfor %}
    </div>
{% endblock %}