<mat-sidenav-container [hasBackdrop]="false">
  <mat-sidenav #sidenav class="sidenav">
    <div *ngIf="nodeDetails">
      <div class="node-header"
        [ngStyle]="{'background-color': nodeDetails.color, 'border-radius':'0.5rem', 'height': '94%', 'margin': '10px'}">
        {{ nodeDetails.label }}
        <button mat-icon-button class="close" (click)="close()">
          &#x2715;
        </button>
      </div>
      <div style="padding: 0.4rem">
        <p class="bold">
          {{ nodeDetails.properties.name }}
        </p>
        <p>
          <ng-container *ngFor="let attribute of nodeDetails.attributes">
            <ng-container *ngFor="let attr of attribute | keyvalue">
              {{ attr.key }} : {{ attr.value}} <br />
            </ng-container>
            <br />
          </ng-container>
        </p>
      </div>
    </div>
  </mat-sidenav>

  <mat-sidenav-content>
    <div class="wrapper">
      <div class="graph">
        <ngx-graph [view]="viewSize" [showMiniMap]="true" [miniMapMaxHeight]="viewSize[1]" [miniMapMaxWidth]="200"
          [miniMapPosition]="'UpperLeft'" [links]="edges" [nodes]="nodes" [draggingEnabled]="false" [enableZoom]="true"
          [autoZoom]="false" [layoutSettings]="layoutSettings" [panToNode$]="panToNodeObservable" [center$]="center$"
          [zoomToFit$]="zoomToFit$" [autoCenter]="true">

          <ng-template #defsTemplate>
            <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4"
              orient="auto">
              <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
            </svg:marker>
          </ng-template>

          <ng-template #nodeTemplate let-node>
            <ng-container *ngIf="node.node_type === 'node'">
              <svg:g class="node" (click)="getDetails(node); sidenav.open()" [matTooltip]="'Click to see details'">
                <svg:foreignObject width="350" height="60" class="node-container"
                  [ngStyle]="{'border': node.color ? node.color + ' 2px solid' : '#000864 2px solid' }">
                  <div class="node-header" [ngStyle]="{'background-color': node.color}">
                    {{ node.label }}
                  </div>
                  <div style="padding: 0.4rem;">
                    <p class="node-text">
                      {{ node.properties.name }}
                    </p>
                  </div>
                </svg:foreignObject>
              </svg:g>
            </ng-container>
            <ng-container *ngIf="node.node_type === 'group_node'">
              <svg:g class="group-node" (click)="expand(node.id)" [matTooltip]="'Click to expand'">
                <svg:foreignObject width="350" height="120" class="group-node-container">
                  <div>
                    <a class="group-node-label">{{ node.label }}</a>
                    <button mat-icon-button class="expand-button">
                      <img src="./../../assets/008a-plus-solid.svg">
                    </button>
                  </div>
                </svg:foreignObject>
              </svg:g>
            </ng-container>
          </ng-template>

          <ng-template #linkTemplate let-link>
            <svg:g class="edge">
              <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
              <svg:text class="edge-label" text-anchor="middle">
                <textPath class="text-path" [attr.href]="'#' + link.id"
                  [style.dominant-baseline]="link.dominantBaseline" startOffset="50%">
                  {{link.label}}
                </textPath>
              </svg:text>
            </svg:g>
          </ng-template>
        </ngx-graph>
      </div>
      <div class="graph-buttons">
        <button (click)="zoomToFit()">Zoom out</button>
        <button (click)="center()">Center</button>
      </div>
      <div class="nodes-table-container" *ngIf="expandedNodesArray.length">
        <table class="nodes-table">
          <td class="header">Expanded groups</td>
          <td></td>
          <tr *ngFor="let group of expandedNodesArray">
            <td>{{ group.replace('node_group_','') }}</td>
            <td (click)="expand(group)" class="pointer" matTooltip="Collapse this group">&#x2715;</td>
          </tr>
        </table>
      </div>
    </div>
    <mat-spinner class="spinner" *ngIf="showSpinner" [diameter]="50"></mat-spinner>
  </mat-sidenav-content>
</mat-sidenav-container>