{% load nav %}
{% load waffle_tags %}
<!-- Console Navigation Items for Mobile Menu -->
<div class="py-1">
  <div class="space-y-1">
    <a href="{% url 'console-home' %}" 
       class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'console-home' %}bg-blue-50 text-blue-600{% else %}text-slate-700 hover:bg-gray-100 hover:text-blue-600{% endif %}">
      <i data-lucide="bar-chart-2" class="flex-shrink-0 w-5 h-5"></i>
      Analytics
    </a>

    <a href="{% url 'api_keys' %}"
       class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'api_keys' or request.resolver_match.url_name == 'api_key_detail' %}bg-blue-50 text-blue-600{% else %}text-slate-700 hover:bg-gray-100 hover:text-blue-600{% endif %}">
      <i data-lucide="key-round" class="flex-shrink-0 w-5 h-5"></i>
      API Keys
    </a>

    <a href="{% url 'console-secrets' %}"
       class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'console-secrets' %}bg-blue-50 text-blue-600{% else %}text-slate-700 hover:bg-gray-100 hover:text-blue-600{% endif %}">
      <i data-lucide="lock-keyhole" class="flex-shrink-0 w-5 h-5"></i>
      Secrets
    </a>

    <a href="{% url 'console-mcp-servers' %}"
       class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'console-mcp-servers' %}bg-blue-50 text-blue-600{% else %}text-slate-700 hover:bg-gray-100 hover:text-blue-600{% endif %}">
      <i data-lucide="cog" class="flex-shrink-0 w-5 h-5"></i>
      Advanced
    </a>

    {% flag "organizations" %}
    <a href="{% url 'organizations' %}"
       class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'organizations' or request.resolver_match.url_name == 'organization_detail' %}bg-blue-50 text-blue-600{% else %}text-slate-700 hover:bg-gray-100 hover:text-blue-600{% endif %}">
      <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      Organizations
    </a>
    {% endflag %}
    
    <!-- Add other console-specific links here -->
  </div>
</div>