<aside class="w-64 bg-white border-r border-gray-100 min-h-screen shadow-sm">
    <!-- Logo/Brand Section -->
    <div class="px-4 py-5 border-b border-gray-100">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-200">
                <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
                </svg>
            </div>
            <div>
                <h1 class="text-sm font-bold text-gray-900">AWS Inventory</h1>
                <span class="text-xs font-medium text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full">Local</span>
            </div>
        </div>
    </div>

    <nav class="mt-4 px-3 space-y-1">
        <a href="/"
           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if request.url.path == '/' %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
            <div class="mr-3 p-1.5 rounded-lg {% if request.url.path == '/' %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                </svg>
            </div>
            Dashboard
        </a>

        <a href="/snapshots"
           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/snapshots' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
            <div class="mr-3 p-1.5 rounded-lg {% if '/snapshots' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
            Snapshots
        </a>

        <a href="/resources"
           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/resources' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
            <div class="mr-3 p-1.5 rounded-lg {% if '/resources' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                </svg>
            </div>
            Resources
        </a>

        <a href="/groups"
           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/groups' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
            <div class="mr-3 p-1.5 rounded-lg {% if '/groups' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            Groups
        </a>

        <a href="/diff"
           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/diff' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
            <div class="mr-3 p-1.5 rounded-lg {% if '/diff' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
            </div>
            Compare
        </a>

        <a href="/queries"
           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/queries' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
            <div class="mr-3 p-1.5 rounded-lg {% if '/queries' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
            </div>
            SQL Queries
        </a>

        <!-- Operations Section -->
        <div class="mt-6 pt-4 border-t border-gray-100">
            <p class="px-3 text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Operations</p>
        </div>

        <a href="/cleanup"
           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/cleanup' in request.url.path %}bg-gradient-to-r from-rose-50 to-orange-50 text-rose-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
            <div class="mr-3 p-1.5 rounded-lg {% if '/cleanup' in request.url.path %}bg-gradient-to-br from-rose-500 to-orange-500 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
            </div>
            Cleanup
        </a>

        <a href="/audit"
           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/audit' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
            <div class="mr-3 p-1.5 rounded-lg {% if '/audit' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            Audit Logs
        </a>
    </nav>
</aside>
