<div class="agent-dashboard">
  <div class="agent-dashboard-toolbar">
    <div class="button-group">
      <pa-button
        icon="menu"
        aspect="basic"
        size="small"
        (click)="toggleMainNav()">
        {{ 'retrieval-agents.workflow.toolbar-buttons.toggle-navbar' | translate }}
      </pa-button>
      <div>
        <nsi-dropdown-button
          aspect="basic"
          size="small"
          [popupRef]="workflowDropdown">
          {{ (currentWorkflow | async)?.name || '' }}
        </nsi-dropdown-button>
        <pa-dropdown #workflowDropdown>
          @for (workflow of workflows | async; track workflow) {
            <pa-option
              [value]="workflow.id"
              (selectOption)="goToWorkflow(workflow.id)">
              {{ workflow.name }}
            </pa-option>
          }
        </pa-dropdown>
      </div>
      <pa-button
        aspect="basic"
        size="small"
        [active]="activeSideBar() === 'rules'"
        (click)="openRules()">
        {{ 'retrieval-agents.workflow.toolbar-buttons.rules' | translate }}
      </pa-button>
      <pa-button
        aspect="basic"
        size="small"
        icon="circle-plus"
        iconAndText=""
        iconSize="medium"
        [active]="activeSideBar() === 'add'"
        (click)="addNode()">
        {{ 'retrieval-agents.workflow.toolbar-buttons.add-node' | translate }}
      </pa-button>
      @if (isAragAdmin | async) {
        <pa-button
          aspect="basic"
          size="small"
          icon="download"
          iconAndText=""
          iconSize="medium"
          [active]="activeSideBar() === 'import'"
          (click)="import()">
          {{ 'retrieval-agents.workflow.toolbar-buttons.import' | translate }}
        </pa-button>
        <pa-button
          aspect="basic"
          size="small"
          icon="upload"
          iconAndText=""
          iconSize="medium"
          [active]="activeSideBar() === 'export'"
          (click)="export()">
          {{ 'retrieval-agents.workflow.toolbar-buttons.export' | translate }}
        </pa-button>
      }
    </div>
    <div class="button-group">
      <pa-button
        size="small"
        icon="play"
        iconSize="medium"
        iconAndText=""
        [active]="activeSideBar() === 'test'"
        (click)="openTest()">
        {{ 'retrieval-agents.workflow.toolbar-buttons.test-agent' | translate }}
      </pa-button>
      @if (isAragWithMemory | async) {
        <pa-button
          size="small"
          kind="primary"
          [routerLink]="aragUrl() + '/sessions'">
          {{ 'retrieval-agents.workflow.toolbar-buttons.manage-sessions' | translate }}
        </pa-button>
      }
    </div>
  </div>

  <div
    #workflowContainer
    class="workflow-container"
    [class.sidebar-open]="sideBarOpen()">
    <div #linkContainer></div>
    <div class="workflow-col first-col">
      <!-- category is required from NodeDirective for all other nodes. It's not used by workflow-root but we had to set one for the compiler -->
      <app-workflow-root
        category="preprocess"
        (rootInitialized)="setRoot($event)"
        (addNode)="addNodeFromEntry($event)"></app-workflow-root>
    </div>
  </div>

  <div
    #sidebar
    class="sidebar"
    [class.large]="sideBarLarge()"
    [class.open]="sideBarOpen()"
    [class.closing]="sideBarClosing()">
    <header #sidebarHeader>
      <div class="title-m">
        {{ sideBarTitle() }}
        @if (sideBarBadge(); as badge) {
          <nsi-badge kind="tertiary">{{ badge | translate }}</nsi-badge>
        }
        <pa-button
          aspect="basic"
          icon="cross"
          (click)="closeSidebar()">
          {{ 'retrieval-agents.workflow.sidebar.close-button' | translate }}
        </pa-button>
      </div>
      @if (sideBarDescription(); as description) {
        <div class="description">{{ description }}</div>
      }
    </header>
    <div
      #sidebarContentWrapper
      class="sidebar-content"></div>
  </div>
</div>
