<mat-list class="sidebar">
  <div class="mat-tree-item sidebar-top-item" routerLink="{{routes.PROFILE}}" routerLinkActive="active">
    <div>
      <mat-icon>account_circle</mat-icon>
      <p>Profile</p>
    </div>
  </div>

  <div class="mat-tree-item sidebar-top-item" routerLink="{{routes.DASHBOARD}}" routerLinkActive="active">
    <div>
      <mat-icon>home</mat-icon>
      <p>Dashboard</p>
    </div>
  </div>

  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">

    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding routerLink="{{node.route}}" routerLinkActive="{{node.active}}">
      <div class="mat-tree-second-item">
        <div class="circle"></div>
        <p>{{node.name}}</p>
      </div>
    </mat-tree-node>

    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" class="mat-node">
      @if (node.name === 'E-commerce') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>shopping_cart</mat-icon>
            <p
              class="nodejs-sup"
              matBadge="NodeJS/.NET"
              matBadgeColor="success"
            >{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

      @if (node.name === 'User') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>person</mat-icon>
            <p
              matBadge="New"
              matBadgeColor="warn"
            >{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }
    </mat-tree-node>

  </mat-tree>

  <div class="mat-tree-item sidebar-top-item" routerLink="{{routes.OVERVIEW}}" routerLinkActive="active">
    <div>
      <mat-icon>description</mat-icon>
      <p>Documentation</p>
    </div>
  </div>
</mat-list>

<mat-list>
  <p class="sidebar-title">Templates</p>

  <mat-tree [dataSource]="templateDataSource" [treeControl]="treeControl">

    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding routerLink="{{node.route}}" routerLinkActive="{{node.active}}">
      <div class="mat-tree-second-item">
        <div class="circle"></div>
        <p>{{node.name}}</p>
      </div>
    </mat-tree-node>

    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" class="mat-node">
      @if (node.name === 'Core') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>apps</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

      @if (node.name === 'Tables') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>border_all</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

      @if (node.name === 'UI Elements') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>filter_none</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

      @if (node.name === 'Forms') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>description</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

      @if (node.name === 'Charts') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>equalizer</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

      @if (node.name === 'Maps') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>map</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

      @if (node.name === 'Extra') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>star_border</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }


      @if (node.name === 'Menu Levels') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>folder_open</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

      @if (node.name === 'Level 1.2' || node.name === 'Level 2.2') {
        <div class="mat-tree-item" matTreeNodeToggle>
          <div>
            <mat-icon>inbox</mat-icon>
            <p>{{node.name}}</p>
          </div>
          <mat-icon
            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
            >keyboard_arrow_down
          </mat-icon>
        </div>
      }

    </mat-tree-node>

  </mat-tree>
</mat-list>

<mat-list class="sidebar">
  <p class="sidebar-title">Help</p>
  <a class="mat-tree-item sidebar-top-item help-link" href="https://flatlogic.com/templates" target="_blank" rel="noopener noreferrer">
    <div>
      <mat-icon>library_books</mat-icon>
      <p>Library</p>
    </div>
  </a>
  <a class="mat-tree-item sidebar-top-item help-link" href="https://flatlogic.com/forum/" target="_blank" rel="noopener noreferrer">
    <div>
      <mat-icon>question_answer</mat-icon>
      <p>Support</p>
    </div>
  </a>
  <a class="mat-tree-item sidebar-top-item help-link" href="https://flatlogic.com/forum" target="_blank" rel="noopener noreferrer">
    <div>
      <mat-icon>help_outline</mat-icon>
      <p>FAQ</p>
    </div>
  </a>
</mat-list>

<mat-list class="sidebar">
  <p class="sidebar-title">Projects</p>

  <div class="mat-tree-item sidebar-top-item project-item">
    <div>
      <div class="project-circle project-circle_yellow"></div>
      <p>My resend</p>
    </div>
  </div>
  <div class="mat-tree-item sidebar-top-item project-item">
    <div>
      <div class="project-circle project-circle_blue"></div>
      <p>Starred</p>
    </div>
  </div>
  <div class="mat-tree-item sidebar-top-item project-item">
    <div>
      <div class="project-circle project-circle_pink"></div>
      <p>Background</p>
    </div>
  </div>
</mat-list>

<mat-list class="sidebar">
  <div class="add-section-wrapper" [matMenuTriggerFor]="newSection">
    <div class="add-icon-wrapper">
      <mat-icon class="add-icon">add</mat-icon>
    </div>
    <p class="add-section-title">Add section</p>
  </div>

  <mat-menu #newSection="matMenu" [hasBackdrop]="false" class="add-section-menu-panel">
    <div class="add-section-menu">
      <h3 class="menu-title">Add section</h3>

      <mat-form-field (click)="stopPropagation($event)" class="form-field">
        <input matInput placeholder="Section name">
      </mat-form-field>

      <div class="menu-buttons-wrapper">
        <button mat-flat-button color="warn" class="menu-button">Add</button>
        <button mat-flat-button color="primary" class="menu-cancel-button">Cancel</button>
      </div>
    </div>
  </mat-menu>
</mat-list>

<div class="space"></div>

<mat-list class="sidebar">
  <mat-list-item>
    <div class="chat-section-wrapper" (click)="openChat()">
      <div class="chat-icon-wrapper">
        <mat-icon class="chat-icon">chat</mat-icon>
      </div>

      <p class="chat-section-title">Chat</p>
    </div>
  </mat-list-item>
</mat-list>
