@let isInAccount = inAccount | async;
@let isInArag = inArag | async;

<div class="app-navbar">
  <div class="navbar-scroll-container">
    @if (!isInAccount) {
      @if (standalone || (inDashboard && !isInArag)) {
        <div class="navbar-content">
          <div class="nav-group">
            <div class="group-items">
              <a
                [routerLink]="kbUrl"
                class="nav-link"
                routerLinkActive="active"
                data-cy="go-to-home"
                [routerLinkActiveOptions]="{ exact: true }">
                <pa-icon name="home"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.home' | translate }}</span>
              </a>
            </div>
          </div>
          <div class="nav-group">
            <div class="group-items">
              <a
                [routerLink]="(isAdminOrContrib | async) && !(invalidKey | async) ? kbUrl + '/upload' : null"
                class="nav-link"
                routerLinkActive="active"
                data-cy="go-to-upload"
                [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                <pa-icon name="upload"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.upload-data' | translate }}</span>
              </a>
              <a
                [routerLink]="!(invalidKey | async) ? kbUrl + '/resources' : null"
                routerLinkActive="active"
                class="nav-link"
                data-cy="go-to-resources"
                [class.disabled]="invalidKey | async">
                <pa-icon name="list"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.list' | translate }}</span>
              </a>
              <a
                [routerLink]="(isAdminOrContrib | async) && !(invalidKey | async) ? kbUrl + '/sync' : null"
                routerLinkActive="active"
                class="nav-link"
                data-cy="go-to-sync"
                [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                <pa-icon name="connectors"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.sync' | translate }}</span>
              </a>
              <a
                class="nav-link"
                data-cy="go-to-search"
                routerLinkActive="active"
                [routerLink]="!(invalidKey | async) ? kbUrl + '/search' : null"
                [class.disabled]="invalidKey | async">
                <pa-icon name="search"></pa-icon>
                <span class="nav-link-title">{{ 'search.title' | translate }}</span>
              </a>
              <a
                [routerLink]="(isKbAdmin | async) && !(invalidKey | async) ? kbUrl + '/widgets' : null"
                routerLinkActive="active"
                class="nav-link"
                data-cy="go-to-widget"
                [class.disabled]="!(isKbAdmin | async) || (invalidKey | async)">
                <pa-icon name="widget"></pa-icon>
                <span class="nav-link-title">{{ 'search.widgets.title' | translate }}</span>
              </a>
            </div>
          </div>
          <div class="nav-group">
            <div class="group-items">
              <a
                (click)="toggleSettings()"
                (keyup.enter)="toggleSettings()"
                class="nav-link"
                data-cy="go-to-advanced"
                paFocusable
                [paFocusDisabled]="(isAdminOrContrib | async) === false || (invalidKey | async) === true"
                [class.disabled]="(isAdminOrContrib | async) === false || (invalidKey | async) === true">
                <pa-icon
                  name="chevron-right"
                  [class.expanded]="showSettings"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.advanced' | translate }}</span>
              </a>
            </div>
          </div>
          @if (showSettings) {
            <div class="nav-group">
              <div class="group-items">
                <a
                  [routerLink]="(isKbAdmin | async) && !(invalidKey | async) ? kbUrl + '/manage' : null"
                  routerLinkActive="active"
                  class="nav-link sub-item"
                  data-cy="go-to-settings"
                  [class.disabled]="!(isKbAdmin | async) || (invalidKey | async)">
                  <pa-icon name="gear"></pa-icon>
                  <span class="nav-link-title">{{ 'navbar.settings' | translate }}</span>
                </a>
                <a
                  [routerLink]="(isKbAdmin | async) && !(invalidKey | async) ? kbUrl + '/ai-models' : null"
                  routerLinkActive="active"
                  class="nav-link sub-item"
                  data-cy="go-to-ai-models"
                  [class.disabled]="!(isKbAdmin | async) || (invalidKey | async)">
                  <pa-icon name="settings"></pa-icon>
                  <span class="nav-link-title">{{ 'navbar.ai-models' | translate }}</span>
                </a>
                @if (!standalone) {
                  <a
                    [routerLink]="(isAdminOrContrib | async) ? kbUrl + '/tasks' : null"
                    routerLinkActive="active"
                    data-cy="go-to-tasks"
                    class="nav-link sub-item"
                    [class.disabled]="!(isAdminOrContrib | async)">
                    <pa-icon name="submenu"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.da-agents' | translate }}</span>
                  </a>
                  @if (isKbAdmin | async) {
                    <a
                      [routerLink]="kbUrl + '/keys'"
                      routerLinkActive="active"
                      data-cy="go-to-api-keys"
                      class="nav-link sub-item">
                      <pa-icon name="lock-off"></pa-icon>
                      <span class="nav-link-title">{{ 'navbar.api_keys' | translate }}</span>
                    </a>
                  }
                }

                <a
                  [routerLink]="!(invalidKey | async) ? kbUrl + '/label-sets' : null"
                  routerLinkActive="active"
                  class="nav-link sub-item"
                  data-cy="go-to-classification"
                  [class.disabled]="invalidKey | async">
                  <pa-icon name="label"></pa-icon>
                  <span class="nav-link-title">{{ 'navbar.classification' | translate }}</span>
                </a>
                <a
                  [routerLink]="!(invalidKey | async) ? kbUrl + '/entities' : null"
                  routerLinkActive="active"
                  class="nav-link sub-item"
                  data-cy="go-to-ner"
                  [class.disabled]="invalidKey | async">
                  <pa-icon name="form"></pa-icon>
                  <span class="nav-link-title">{{ 'generic.named-entities' | translate }}</span>
                </a>

                @if (!standalone) {
                  @if (isKbAdmin | async) {
                    <a
                      [routerLink]="(isPromptLabAuthorized | async) ? kbUrl + '/rag-lab' : null"
                      routerLinkActive="active"
                      data-cy="go-to-prompt-lab"
                      class="nav-link sub-item"
                      [stfUnauthorizedFeature]="(isPromptLabAuthorized | async) === false">
                      <pa-icon name="lab"></pa-icon>
                      <span class="nav-link-title">{{ 'navbar.rag-lab' | translate }}</span>
                    </a>
                    <a
                      [routerLink]="kbUrl + '/users'"
                      routerLinkActive="active"
                      data-cy="go-to-users"
                      class="nav-link sub-item">
                      <pa-icon name="users"></pa-icon>
                      <span class="nav-link-title">{{ 'navbar.users' | translate }}</span>
                    </a>
                  }
                }
              </div>
            </div>
          }
          @if (!standalone) {
            <div class="nav-group">
              <div class="group-items">
                <a
                  (click)="toggleMetrics()"
                  (keyup.enter)="toggleMetrics()"
                  class="nav-link"
                  data-cy="go-to-metrics-section"
                  paFocusable
                  [paFocusDisabled]="(isAdminOrContrib | async) === false || (invalidKey | async) === true"
                  [class.disabled]="(isAdminOrContrib | async) === false || (invalidKey | async) === true">
                  <pa-icon
                    name="chevron-right"
                    [class.expanded]="showMetrics"></pa-icon>
                  <span class="nav-link-title">{{ 'navbar.metrics.metrics' | translate }}</span>
                </a>
              </div>
            </div>
            @if (showMetrics) {
              <div class="nav-group">
                <div class="group-items">
                  @if (isRemiMetricsEnabled | async) {
                    <a
                      [routerLink]="
                        (isAdminOrContrib | async) && !(invalidKey | async) ? kbUrl + '/metrics/remi-analytics' : null
                      "
                      routerLinkActive="active"
                      class="nav-link sub-item"
                      data-cy="go-to-remi-analytics"
                      [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                      <pa-icon name="image"></pa-icon>
                      <span class="nav-link-title">{{ 'navbar.metrics.remi-analytics' | translate }}</span>
                    </a>
                    <a
                      [routerLink]="
                        (isAdminOrContrib | async) && !(invalidKey | async) ? kbUrl + '/metrics/usage-analytics' : null
                      "
                      routerLinkActive="active"
                      class="nav-link sub-item"
                      data-cy="go-to-usage-analytics"
                      [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                      <pa-icon name="chart"></pa-icon>
                      <span class="nav-link-title">{{ 'navbar.metrics.usage-analytics' | translate }}</span>
                    </a>
                  }
                  <a
                    [routerLink]="
                      (isAdminOrContrib | async) && !(invalidKey | async)
                        ? kbUrl + '/metrics/tokens-and-time-usage'
                        : null
                    "
                    routerLinkActive="active"
                    class="nav-link sub-item"
                    data-cy="go-to-cost-token"
                    [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                    <pa-icon name="payment-details"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.metrics.cost-token-usage' | translate }}</span>
                  </a>
                  <a
                    [routerLink]="
                      (isAdminOrContrib | async) && !(invalidKey | async) ? kbUrl + '/metrics/user-feedback' : null
                    "
                    routerLinkActive="active"
                    class="nav-link sub-item"
                    data-cy="go-to-user-feedback"
                    [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                    <pa-icon name="thumb-up"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.metrics.user-feedback' | translate }}</span>
                  </a>
                  <a
                    [routerLink]="
                      (isAdminOrContrib | async) && !(invalidKey | async) ? kbUrl + '/metrics/resource-activity' : null
                    "
                    routerLinkActive="active"
                    class="nav-link sub-item"
                    data-cy="go-to-resource-activity"
                    [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                    <pa-icon name="activity-log"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.metrics.resource-activity' | translate }}</span>
                  </a>
                  <a
                    [routerLink]="
                      (isAdminOrContrib | async) && !(invalidKey | async) ? kbUrl + '/metrics/search-activity' : null
                    "
                    routerLinkActive="active"
                    class="nav-link sub-item"
                    data-cy="go-to-search-activity"
                    [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                    <pa-icon name="payment-history"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.metrics.search-activity' | translate }}</span>
                  </a>
                  <a
                    [routerLink]="
                      (isAdminOrContrib | async) && !(invalidKey | async) ? kbUrl + '/metrics/detailed' : null
                    "
                    routerLinkActive="active"
                    class="nav-link sub-item"
                    data-cy="go-to-detailed-logs"
                    [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                    <pa-icon name="activity-log"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.metrics.detailed-logs' | translate }}</span>
                  </a>
                </div>
              </div>
            }
          }
        </div>
      } @else if (isInArag) {
        <div class="navbar-content">
          <div class="nav-group">
            <div class="group-items">
              <a
                [routerLink]="(isAragAdmin | async) ? aragUrl + '/workflows' : null"
                class="nav-link"
                routerLinkActive="active"
                data-cy="go-to-agent-workflow"
                [class.disabled]="!(isAragAdmin | async)">
                <pa-icon name="workflows"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.agent.workflows' | translate }}</span>
              </a>
              @if (isAragWithMemory | async) {
                <a
                  [routerLink]="aragUrl + '/sessions'"
                  routerLinkActive="active"
                  class="nav-link"
                  data-cy="go-to-sessions">
                  <pa-icon name="list"></pa-icon>
                  <span class="nav-link-title">{{ 'navbar.agent.sessions-list' | translate }}</span>
                </a>
              }
              <a
                [routerLink]="(isAragAdmin | async) ? aragUrl + '/sources' : null"
                class="nav-link"
                routerLinkActive="active"
                data-cy="go-to-drivers-page"
                [routerLinkActiveOptions]="{ exact: true }"
                [class.disabled]="!(isAragAdmin | async)">
                <pa-icon name="puzzle"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.agent.drivers' | translate }}</span>
              </a>
              @if (isAragWithMemory | async) {
                <a
                  class="nav-link"
                  data-cy="go-to-search"
                  routerLinkActive="active"
                  [routerLink]="!(invalidKey | async) ? aragUrl + '/search' : null"
                  [class.disabled]="invalidKey | async">
                  <pa-icon name="search"></pa-icon>
                  <span class="nav-link-title">{{ 'search.title' | translate }}</span>
                </a>
              }
              @if (isRaoWidgetEnabled | async) {
                <a
                  [routerLink]="(isAragAdmin | async) && !(invalidKey | async) ? aragUrl + '/widgets' : null"
                  routerLinkActive="active"
                  class="nav-link"
                  data-cy="go-to-widget"
                  [class.disabled]="!(isAragAdmin | async) || (invalidKey | async)">
                  <pa-icon name="widget"></pa-icon>
                  <span class="nav-link-title">{{ 'search.widgets.title' | translate }}</span>
                </a>
              }
            </div>
          </div>
          <div class="nav-group">
            <div class="group-items">
              <a
                (click)="toggleSettings()"
                (keyup.enter)="toggleSettings()"
                class="nav-link"
                data-cy="go-to-advanced"
                paFocusable
                [paFocusDisabled]="(isAdminOrContrib | async) === false || (invalidKey | async) === true"
                [class.disabled]="(isAdminOrContrib | async) === false || (invalidKey | async) === true">
                <pa-icon
                  name="chevron-right"
                  [class.expanded]="showSettings"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.advanced' | translate }}</span>
              </a>
            </div>
          </div>
          @if (showSettings) {
            <div class="nav-group">
              <div class="group-items">
                <a
                  [routerLink]="(isAragAdmin | async) && !(invalidKey | async) ? aragUrl + '/manage' : null"
                  routerLinkActive="active"
                  class="nav-link sub-item"
                  data-cy="go-to-settings"
                  [class.disabled]="!(isAragAdmin | async) || (invalidKey | async)">
                  <pa-icon name="gear"></pa-icon>
                  <span class="nav-link-title">{{ 'navbar.settings' | translate }}</span>
                </a>

                @if (isAragAdmin | async) {
                  <a
                    [routerLink]="aragUrl + '/activity'"
                    routerLinkActive="active"
                    class="nav-link sub-item"
                    data-cy="go-to-activity-log">
                    <pa-icon name="activity-log"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.activity' | translate }}</span>
                  </a>

                  <a
                    [routerLink]="aragUrl + '/keys'"
                    routerLinkActive="active"
                    data-cy="go-to-api-keys"
                    class="nav-link sub-item">
                    <pa-icon name="lock-off"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.api_keys' | translate }}</span>
                  </a>

                  <a
                    [routerLink]="aragUrl + '/users'"
                    routerLinkActive="active"
                    data-cy="go-to-users"
                    class="nav-link sub-item">
                    <pa-icon name="users"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.users' | translate }}</span>
                  </a>
                }
              </div>
            </div>
          }
        </div>
      } @else if (inPlatformApp) {
        <div class="navbar-content">
          <div class="nav-group">
            <div class="group-items">
              <a
                [routerLink]="platformUrl"
                class="nav-link"
                routerLinkActive="active"
                data-cy="go-to-home"
                [routerLinkActiveOptions]="{ exact: true }">
                <pa-icon name="home"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.home' | translate }}</span>
              </a>
            </div>
            <div class="group-items">
              <a
                [routerLink]="platformUrl + '/random'"
                class="nav-link"
                routerLinkActive="active"
                data-cy="go-to-home"
                [routerLinkActiveOptions]="{ exact: true }">
                <pa-icon name="gear"></pa-icon>
                <span class="nav-link-title">Random</span>
              </a>
            </div>
          </div>
        </div>
      }
    }
    @if (!standalone && isInAccount && (showAccountNav | async)) {
      <div class="navbar-content dark">
        <div class="nav-group">
          <div class="group-items">
            <a
              [routerLink]="(accountUrl | async) + '/home'"
              routerLinkActive="active"
              data-cy="go-to-account-home"
              class="nav-link">
              <pa-icon name="home"></pa-icon>
              <span class="nav-link-title">{{ 'navbar.account-home' | translate }}</span>
            </a>
          </div>
          <div class="group-items">
            <a
              [routerLink]="(accountUrl | async) + '/settings'"
              routerLinkActive="active"
              data-cy="go-to-account-settings"
              class="nav-link">
              <pa-icon name="gear"></pa-icon>
              <span class="nav-link-title">{{ 'navbar.account-settings' | translate }}</span>
            </a>
          </div>
          @if (inDashboard) {
            <div class="group-items">
              <a
                [routerLink]="(accountUrl | async) + '/kbs'"
                routerLinkActive="active"
                data-cy="go-to-account-kbs"
                class="nav-link">
                <pa-icon name="knowledge-box"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.manage-kbs' | translate }}</span>
              </a>
            </div>
          }
          <div class="group-items">
            <a
              [routerLink]="(accountUrl | async) + '/users'"
              routerLinkActive="active"
              data-cy="go-to-account-users"
              class="nav-link">
              <pa-icon name="users"></pa-icon>
              <span class="nav-link-title">{{ 'navbar.users' | translate }}</span>
            </a>
          </div>
          @if (!(simpleMode | async)) {
            <div class="group-items">
              <a
                [routerLink]="(accountUrl | async) + '/nua'"
                routerLinkActive="active"
                data-cy="go-to-nua-keys"
                class="nav-link">
                <pa-icon name="key"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.nua-keys' | translate }}</span>
              </a>
            </div>
          }
          @if ((isRetrievalAgentsEnabled | async) && (inDashboard || inRaoApp) && !(simpleMode | async)) {
            <div class="group-items">
              <a
                [routerLink]="(accountUrl | async) + '/arag'"
                routerLinkActive="active"
                data-cy="go-to-retrieval-agents"
                class="nav-link">
                <pa-icon name="workflows"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.account-retrieval-agents' | translate }}</span>
              </a>
            </div>
          }
          @if ((isModelManagementEnabled | async) && !(simpleMode | async)) {
            <div class="group-items">
              <a
                [routerLink]="(accountUrl | async) + '/models'"
                routerLinkActive="active"
                data-cy="go-to-models"
                class="nav-link">
                <pa-icon name="settings"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.models' | translate }}</span>
              </a>
            </div>
          }
          @if ((isBillingEnabled | async) && !noStripe) {
            <div class="group-items">
              <a
                [routerLink]="(accountUrl | async) + '/billing/subscriptions'"
                routerLinkActive="active"
                data-cy="go-to-billing"
                class="nav-link"
                [class.sub-item]="inBilling | async">
                <pa-icon name="payment"></pa-icon>
                <span class="nav-link-title">{{ 'navbar.subscription' | translate }}</span>
              </a>
            </div>
          }
          @if ((isSubscribed | async) && (inBilling | async)) {
            <div class="nav-group">
              <div class="group-items">
                <a
                  [routerLink]="(accountUrl | async) + '/billing/checkout'"
                  routerLinkActive="active"
                  data-cy="go-to-checkout"
                  class="nav-link sub-item">
                  <pa-icon name="payment-details"></pa-icon>
                  <span class="nav-link-title">{{ 'billing.payment_details' | translate }}</span>
                </a>
                <a
                  [routerLink]="(accountUrl | async) + '/billing/my-subscription'"
                  routerLinkActive="active"
                  data-cy="go-to-my-subscription"
                  class="nav-link sub-item">
                  <pa-icon name="info"></pa-icon>
                  <span class="nav-link-title">{{ 'billing.my-subscription' | translate }}</span>
                </a>
                <a
                  [routerLink]="(accountUrl | async) + '/billing/usage'"
                  routerLinkActive="active"
                  data-cy="go-to-usage"
                  class="nav-link sub-item">
                  <pa-icon name="chart"></pa-icon>
                  <span class="nav-link-title">{{ 'billing.usage.consumption' | translate }}</span>
                </a>
                <a
                  [routerLink]="(accountUrl | async) + '/billing/history'"
                  routerLinkActive="active"
                  data-cy="go-to-history"
                  class="nav-link sub-item">
                  <pa-icon name="history"></pa-icon>
                  <span class="nav-link-title">{{ 'billing.history.link' | translate }}</span>
                </a>
              </div>
            </div>
          }
        </div>
        @if ((kb | async) || (inAccount | async)) {
          <div class="nav-group">
            <div class="group-items">
              <a
                [routerLink]="kbUrl"
                data-cy="go-to-home-from-account"
                class="nav-link">
                <pa-icon name="chevron-left"></pa-icon>
                <span class="nav-link-title">{{ 'generic.back' | translate }}</span>
              </a>
            </div>
          </div>
        }
      </div>
    }
  </div>
</div>