@let isInArag = inArag | async;

<div class="app-navbar">
  <div class="navbar-scroll-container">
    @if (!inAdminApp) {
      @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">
                  {{ ((isAgenticSearchEnabled | async) ? 'navbar.sync' : 'navbar.sync-only') | 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/chat-activity' : null
                    "
                    routerLinkActive="active"
                    class="nav-link sub-item"
                    data-cy="go-to-chat-activity"
                    [class.disabled]="!(isAdminOrContrib | async) || (invalidKey | async)">
                    <pa-icon name="chat"></pa-icon>
                    <span class="nav-link-title">{{ 'navbar.metrics.chat-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>
      }
    }

    @if (showFooter) {
      <footer class="navbar-footer">
        <div class="footer-items">
          @if (version) {
            <span class="version-label">Version: {{ version }}</span>
          }
          @if (isStageOrDev) {
            <img
              src="assets/logos/stage-icon.svg"
              class="stage-icon"
              alt="Stage environment" />
          }
        </div>
      </footer>
    }
  </div>
</div>