{% from "partials/icons.html" import home, search, terminal, box, x %}
<!-- Navigation Links -->
<div class="mb-4">
    <ul class="menu" hx-boost="true" hx-target="#main-content" hx-select="#main-content" hx-swap="outerHTML">
        <li><a href="/" class="font-semibold">{{ home() }} Dashboard</a></li>
        <li><a href="/live-stats" class="font-semibold">{{ box() }} Live Stats</a></li>
        <li><a href="/console" class="font-semibold">{{ terminal() }} Console</a></li>
    </ul>
</div>

<!-- Stacks Section -->
<div class="mb-4">
    <h4 class="text-xs uppercase tracking-wide text-base-content/60 px-3 py-1">Stacks <span class="opacity-50" id="sidebar-count">({{ stacks | length }})</span></h4>
    <div class="px-2 mb-2 flex flex-col gap-1">
        <label class="input input-xs flex items-center gap-2 bg-base-200">
            {{ search(14) }}<input type="text" id="sidebar-filter" placeholder="Filter..." oninput="sidebarFilter()" /><button type="button" id="sidebar-filter-clear" class="hidden opacity-50 hover:opacity-100 cursor-pointer" onclick="clearSidebarFilter()">{{ x(12) }}</button>
        </label>
        <select id="sidebar-host-select" class="select select-xs bg-base-200 w-full" onchange="sidebarFilter()">
            <option value="">All hosts</option>
            {% for h in hosts %}<option value="{{ h }}">{{ h }}{% if h == local_host %} (local){% endif %}</option>{% endfor %}
        </select>
    </div>
    <ul class="menu menu-sm" id="sidebar-stacks" hx-boost="true" hx-target="#main-content" hx-select="#main-content" hx-swap="outerHTML">
        {% for stack in stacks %}
        <li data-stack="{{ stack | lower }}" data-h="{{ stack_hosts.get(stack, '') }}">
            <a href="/stack/{{ stack }}" class="flex items-center gap-2">
                {% if stack in state %}<span class="status status-success" title="In state file"></span>
                {% else %}<span class="status status-neutral" title="Not in state file"></span>{% endif %}
                {{ stack }}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>