<div style="display:flex; flex-direction: column; flex:1; min-width: 0px; min-height: 0px">
  <div style="display: flex; flex: 1; min-height: 0px" fxLayout="row" fxLayout.xs="column" fxLayout.sm="column">
    <div class="left-pane" fxFlex.xs="100" fxFlex.sm="100" [ngStyle.xs]="{'min-height.vh': 80}"
      [ngStyle.sm]="{'min-height.vh': 80}">
      <div class="left-drawer" fxFlex.xs="100" fxFlex.sm="100" [ngStyle.xs]="{'min-height.vh': 80}"
        [ngStyle.sm]="{'min-height.vh': 80}" [class.none]="treeStatus == TreeStatus.Fail || !leftPaneOpened">
        <div class="left-drawer-content" fxFlex.xs="100" fxFlex.sm="100">
          <div style="display: flex; flex-flow: column" fxFlex.xs="100" fxFlex.sm="100">
            <div style="display: flex; flex:1; justify-content: center; align-items: center;"
              *ngIf="(treeStatus == TreeStatus.Loading)">
              <div class="loading">
                <mat-spinner [strokeWidth]="4"></mat-spinner>
                <div>Tree...</div>
              </div>
            </div>
            <div style="flex:1;" [class.block]="(treeStatus == TreeStatus.Committing)"
              [class.none]="(treeStatus != TreeStatus.Committing)">
              <app-commit-progress></app-commit-progress>
            </div>
            <app-tree #tree style="flex: 1; min-height: 0px;" [repository]="repositoryDetails" [tree]="root"
              (nodeUploaded)="nodeUploaded($event)"
              [class.none]="(workspaceStatus == WorkspaceStatus.Stage) || (treeStatus != TreeStatus.Done)">
            </app-tree>
            <app-stage #stage style="flex: 1" [repository]="repositoryDetails" [tree]="root" [branch]="selectedBranch"
              [modifiedNodes]="nodesToStage"
              *ngIf="!((workspaceStatus == WorkspaceStatus.View) || (treeStatus != TreeStatus.Done))"
              (commit)="onCommit($event)" [placeholder]="placeholderForCommit">
            </app-stage>
            <mat-form-field class="branches" [class.none]="(workspaceStatus == WorkspaceStatus.Stage)"
              *ngIf="(branches != undefined) && (branches.length > 0) && (treeStatus == TreeStatus.Done)">
              <mat-label>Branches</mat-label>
              <mat-select [value]="selectedBranch" (selectionChange)="onBranchChange($event)">
                <mat-option *ngFor="let branch of branches" [value]="branch">
                  {{branch.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </div>
      <div class="left-fold" (click)="toggleSidenav()" [fxHide.xs]="true" [fxHide.sm]="true">
        <mat-icon *ngIf="leftPaneOpened">chevron_left</mat-icon>
        <mat-icon *ngIf="!leftPaneOpened">chevron_right</mat-icon>
      </div>
    </div>
    <div class="right-pane-group"
      [ngStyle.xs]="{'min-height.vh': 100, 'max-height.vh': 100, 'margin-left.em': '1', 'margin-right.em': '0.2'}"
      [ngStyle.sm]="{'min-height.vh': 100, 'max-height.vh': 100, 'margin-left.em': '1', 'margin-right.em': '0.2'}">
      <div class="content-pane">
        <div style="display: flex; flex-direction: column; flex:1; height: 100%; width: 100%;">
          <div class="toolbar" fxLayout="row" fxLayoutAlign="start center" style="position: relative">
            <div class="fileName" [class.none]="!((workspaceStatus == WorkspaceStatus.Stage) || (treeStatus != TreeStatus.Done))">
              <span>{{selectedNodePath != undefined ? selectedNodePath : ''}}</span></div>
            <app-tab fxFlex="100" [class.none]="(workspaceStatus == WorkspaceStatus.Stage) || (treeStatus != TreeStatus.Done)">
            </app-tab>
            <div class="buttons" fxLayout="row" fxLayoutAlign="center cneter"
              *ngIf="selectedNodePath != undefined && selectedFileType == FileType.Text">
              <button mat-icon-button title="info" class="button-with-toggle-style" (click)="showInfo(selectedNodePath)">
                <mat-icon aria-label="info">info</mat-icon>
              </button>
              <button mat-icon-button title="Preview" (click)="togglePreview()" *ngIf="isDesktop"
                [ngClass]="{'mat-button-toggle-checked':(editorStatusFsm.currentState == EditorType.Md)}">
                <mat-icon>visibility</mat-icon>
              </button>
              <button mat-icon-button title="Compare with original" (click)="toggleDiff()" *ngIf="isDesktop"
                [ngClass]="{'mat-button-toggle-checked':(!(editorStatusFsm.currentState == EditorType.Md) && editorStatusFsm.currentState == EditorType.Diff)}">
                <mat-icon>compare</mat-icon>
              </button>
              <a mat-icon-button *ngIf="isDesktop"
                href="https://github.com/{{userId}}/{{repositoryName}}/blob/{{selectedBranch?.name}}/{{selectedNodePath}}"
                target="_blank" style="text-decoration: none;color: unset;margin-right: 1em">
                <mat-icon>open_in_new</mat-icon>
              </a>
              <!-- <a href="{{getRawUrl(repositoryDetails.full_name, selectedBranch.commit.sha, selectedNode.syncedNode.path)}}" style="text-decoration: none;color: unset" download><button mat-stroked-button style="margin-right: 1em"><mat-icon>cloud_download</mat-icon></button></a> -->
            </div>
          </div>
          <div style="flex:1; display: block" *ngIf="contentStatus == ContentStatus.NotInitialized">
            <div style="display: flex; justify-content: center; width: 100%; height: 100%; align-items: center;">
              <div style="text-align: center;">
                <div *ngIf="treeStatus == TreeStatus.TreeEmpty">
                  <div>Your repository is <b>empty</b> now.</div>
                  <div>Please create one file at least in <a href="{{repositoryDetails?.html_url}}"
                      target="_blank">{{repositoryDetails?.html_url}}</a> and refresh here.</div>
                </div>
                <div *ngIf="treeStatus == TreeStatus.Fail">
                  <div>{{errorDescription}}</div>
                  <div>Check out <a href="{{repositoryDetails?.html_url}}" target="_blank">{{repositoryDetails?.html_url}}</a> and refresh here.</div>
                </div>

              </div>
            </div>
          </div>
          
          <ng-template editor-host></ng-template>
          <!-- <app-editor #editor1 style="flex:1; min-height: 0px;"
            [class.block]="(selectedFileType == FileType.Text) && (contentStatus == ContentStatus.Done) && (editorStatusFsm.currentState == editorType.Editor)"
            [class.none]="((selectedFileType != FileType.Text) || (contentStatus != ContentStatus.Done)) || (editorStatusFsm.currentState == editorType.Md)"
            *ngIf="isDesktop"></app-editor> -->
          <!-- <app-markdown-editor #preview [preview]="true"
            [class.block]="(editorStatusFsm.currentState == editorType.Md)"
            [class.none]="!(editorStatusFsm.currentState == editorType.Md)"
            *ngIf="isDesktop"></app-markdown-editor> -->
          <!-- <app-markdown-editor #editor2 style="margin-bottom: 2em; flex:1; min-height: 0px;"
            [class.block]="(selectedFileType == FileType.Text) && (contentStatus == ContentStatus.Done)"
            [class.none]="(selectedFileType != FileType.Text) || (contentStatus != ContentStatus.Done)"
            *ngIf="!isDesktop"></app-markdown-editor> -->
          <div style="flex:1; display: block; height: 100px "
            *ngIf="(selectedFileType == FileType.Image) && (contentStatus == ContentStatus.Done)">
            <div style="overflow-y: scroll; height: 100%;"><img [src]="selectedImagePath" /></div>
          </div>
          <div style="flex:1; display: block; "
            *ngIf="(selectedFileType == FileType.Other) && (contentStatus == ContentStatus.Done)">
            <div style="display: flex; justify-content: center; width: 100%; height: 100%;">
              <div style="display:flex; flex-direction: row; align-items: center;   height: 100%;">
                <div>This content is not readable.</div>
              </div>
            </div>
          </div>
          <div style="display: flex; flex:1; justify-content: center; align-items: center;"
            *ngIf="(contentStatus == ContentStatus.Loading)">
            <div class="loading">
              <mat-spinner [strokeWidth]="4"></mat-spinner>
              <div>{{getFileName(selectedNodePath)}}...</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-pane">
        <app-action #action (stage)="onStage()" (edit)="onEdit()" (save)="onSave()" [dirtyCount]="dirtyCount" [isBeingChanged]="isBeingChanged"
          (buildHistory)="onBuildHistory()" [repository]="repositoryDetails">
        </app-action>
      </div>
    </div>
  </div>
  <div class="bottom-status">
    <div>
      &nbsp;<mat-checkbox #autoSaveRef class="toggle" [disableRipple]="true">save (eagerly)</mat-checkbox>
    </div>
    <div style="flex:1 "></div>
    <div *ngIf="selectedCommit != undefined">
      <span><a href="{{selectedCommit?.html_url}}" target="_blank">{{selectedCommit?.sha.substring(0,6)}}</a>&nbsp;
      </span>
      <span matTooltip="{{selectedCommit?.commit.message}}">
        {{selectedCommit?.commit.message.substring(0,14)}}{{selectedCommit?.commit.message.length >= 14 ? "..." : ""}}&nbsp;</span>
      <span style="color: slategrey;">
        {{selectedCommit?.commit.committer.date | date:'yyyy-MM-dd h:mm a'}}&nbsp;</span>
    </div>
    </div>
</div>