{% load nav %}
{% load waffle_tags %}

<!-- Console Sub-Navigation Panel - Visible on medium and large screens -->
<aside class="gobii-card-base hidden md:block {% if pin_console_nav %}md:sticky md:top-20{% else %}md:relative{% endif %} self-start min-w-64 w-64 flex-shrink-0 p-4 mx-4 my-4 {% if pin_console_nav %}md:max-h-[calc(100vh-5rem)] overflow-y-auto{% else %}overflow-y-auto{% endif %}">
  <!-- Context Switcher -->
  {% flag "organizations" %}
  <div class="mb-4">
    {% include "console/includes/_context_switcher.html" %}
  </div>
  {% endflag %}

  <h3 class="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-3">Console Menu</h3>
  <nav id="console-submenu" class="space-y-1" x-data="navigationMenu()">
    <a href="{% url 'agents' %}"
       class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'agents' %}bg-blue-50/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
      <i aria-hidden="true" data-lucide="zap" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'agents' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
      Agents
    </a>
    <a href="{% url 'console-home' %}" 
       class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'console-home' %}bg-blue-50/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
      <i aria-hidden="true" data-lucide="bar-chart-2" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'console-home' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
      Analytics
    </a>
    <a href="{% url 'tasks' %}"
       class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'tasks' %}bg-blue-50/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
      <i aria-hidden="true" data-lucide="clipboard" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'tasks' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
      Tasks
    </a>
    <a href="{% url 'api_keys' %}"
       class="flex items-center 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/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
      <i aria-hidden="true" data-lucide="key-round" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'api_keys' or request.resolver_match.url_name == 'api_key_detail' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
      API Keys
    </a>
    <a href="{% url 'console-secrets' %}"
       class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'console-secrets' %}bg-blue-50/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
      <i aria-hidden="true" data-lucide="lock-keyhole" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'console-secrets' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
      Secrets
    </a>
    {% if current_context.type == 'organization' and current_context.id %}
      <a href="{% url 'organization_detail' org_id=current_context.id %}"
         class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'organization_detail' %}bg-blue-50/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
        <i aria-hidden="true" data-lucide="building-2" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'organization_detail' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
        Organization
      </a>
    {% else %}
      <a href="{% url 'profile' %}"
         class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'profile' %}bg-blue-50/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
        <i aria-hidden="true" data-lucide="user-round" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'profile' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
        Profile
      </a>
    {% endif %}
    {% if stripe_enabled %}
      <a href="{% url 'billing' %}"
         x-show="showBilling"
         class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'billing' %}bg-blue-50/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
        <i aria-hidden="true" data-lucide="credit-card" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'billing' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
        Billing
      </a>
    {% endif %}
    <a href="{% url 'usage' %}"
       class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors {% if request.resolver_match.url_name == 'usage' %}bg-blue-50/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
      <i aria-hidden="true" data-lucide="chart-bar" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'usage' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
      Usage
    </a>
    <a href="{% url 'console-mcp-servers' %}"
       class="flex items-center 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/70 text-blue-600{% else %}text-slate-700 hover:bg-white/80 hover:text-blue-600{% endif %}">
      <i aria-hidden="true" data-lucide="cog" class="flex-shrink-0 size-5 me-2 {% if request.resolver_match.url_name == 'console-mcp-servers' %}text-blue-600{% else %}text-gray-500{% endif %}"></i>
      Advanced
    </a>
    <!-- Add other console-specific links here -->
  </nav>
</aside>

<script>
function navigationMenu() {
  return {
    showBilling: {{ stripe_enabled|yesno:'true,false' }},
    hasStripe: {{ stripe_enabled|yesno:'true,false' }},
    solutionsPartnerBillingAccess: {{ solutions_partner_billing_access|yesno:'true,false' }},
    userRole: null,
    
    init() {
      if (!this.hasStripe) {
        this.showBilling = false;
        return;
      }
      // Get current context from localStorage
      const contextType = localStorage.getItem('contextType') || 'personal';
      const contextId = localStorage.getItem('contextId') || '{{ user.id }}';
      
      // Set billing visibility based on context and role
      if (contextType === 'personal') {
        // Personal account always shows billing
        this.showBilling = true;
      } else {
        // For organizations, check user role
        this.checkOrganizationRole(contextId);
      }
    },
    
    checkOrganizationRole(orgId) {
      // Get user's role in the organization from backend data
      {% for membership in user_organizations %}
      if ('{{ membership.org.id }}' === orgId) {
        this.userRole = '{{ membership.role }}';
        // Show billing only for owners, admins, and billing admins
        const billingRoles = this.solutionsPartnerBillingAccess
          ? ['owner', 'admin', 'billing_admin', 'solutions_partner']
          : ['owner', 'admin', 'billing_admin'];
        this.showBilling = billingRoles.includes(this.userRole);
      }
      {% endfor %}
    }
  }
}
</script>