<!-- Dashboard Link -->
<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"><span class="font-mono opacity-60">~</span> Dashboard</a></li>
    </ul>
</div>

<!-- Services Section -->
<div class="mb-4">
    <h4 class="text-xs uppercase tracking-wide text-base-content/60 px-3 py-1">
        Services <span class="text-xs opacity-50" title="Green = tracked in state file">(state)</span>
    </h4>
    <ul class="menu" hx-boost="true" hx-target="#main-content" hx-select="#main-content" hx-swap="outerHTML">
        {% for service in services %}
        <li>
            <a href="/service/{{ service }}" class="flex items-center gap-2">
                {% if service 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 %}
                {{ service }}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>
