<section class="WindowContent BackgroundColor" id="WindowScrollBar">
  <section class="TopTools">

    <!--Top panel-->
    <div class="TopMenu">
      <!--Top tools options-->
      <div class="ToolOptions">
<!--        <div (click)="clickFile()">{{topTxtView.file}}</div>-->
<!--        <div (click)="clickEdit()">{{topTxtView.edit}}</div>-->
<!--        <div (click)="clickView()">{{topTxtView.view}}</div>-->
<!--        <div (click)="clickGo()">{{topTxtView.go}}</div>-->
      </div>

      <!--Creat file name bar - select mode-->
      <ng-container *ngIf="selectedMode">
        <section class="FileNameContainer">
            <span>{{GetNameText}}: </span>
            <input [(ngModel)]="fileNameInput" [ngClass]="{'NapicuOSSimpleInput-Red-Border': fileNameError}" (ngModelChange)="checkSelectedModeInputFileNameValue()" type="text" name="DocumentNameInput" class="NapicuOSSimpleInput">
        </section>
      </ng-container>

      <!--Bottom tools options-->
      <section class="FileManagerOptions">

        <div class="ToolOptionsFiles NapicuSimpleIcon">
          <!--Back button-->
          <div>
            <img [ngClass]="{cantClick: !canBack()}" (click)="clickBack()" [src]="GetBackImage"
                 alt="Back icon">

          </div>
          <!--Next button-->
          <div>
            <img [ngClass]="{cantClick: !canNext()}" (click)="clickNext()" [src]="GetNextImage"
                 alt="Next icon">
          </div>
          <!--Home button-->
          <div>
            <img (click)="clickHome()" [src]="GetHomeImage" alt="Home icon">
          </div>
        </div>
        <!--Path line-->
        <div class="pathSearchBar">
          <img class="iconFolder" [src]="GetFileIcon" alt="Path icon">
          <div
            (keydown.enter)="onEnter($event)"
            accept="txt"
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            contenteditable="true"
            id="inputLineID"
            spellcheck="false"
            class="input"
          >
            {{GetDirectoryPath}}
          </div>
        </div>
      </section>
    </div>
    <section class="BarOptions">
      <!--Left bar-->
      <div class="LeftBox">
        <!--Home folders-->
        <h1>{{GetPlacesText}}</h1>
        <ul>
          <li (click)="clickSideFile(i)" *ngFor="let i of GetFoldersView">
            <img [src]="i.icon" alt="Directory icon">
            {{i.name}}
          </li>
        </ul>
        <!--Devices folders-->
        <h1>{{GetDevicesText}}</h1>
        <ul>
          <li *ngFor="let i of GetDrivesView">
            <img [src]="i.icon" alt="Directory icon">
            {{i.name}}
          </li>
        </ul>

      </div>
      <!--Right bar-->
      <section class="RightBox" (contextmenu)="clickShowFileManagerContextMenu($event)">

        <div class="RightObjectView">
          <div clickable="true" *ngFor="let i of displayedFiles" class="Object">
            <div clickable="true" (click)="onClickDirAndFileView(i)"
                 (contextmenu)="clickFileAndDirProperty($event, i)"
                 class="ObjectContent" [ngClass]="{selectedFileDir: this.selectedFileDir?.name === i.name && (this.selectedFileDir?.isDir == !(i.fileType))}">
              <img clickable="true" [src]="i.icon" alt="icon">
              <p clickable="true">{{i.name}}</p>
            </div>
          </div>
        </div>
      </section>
    </section>
    <!--Bottom bar - select mode-->
    <ng-container *ngIf="selectedMode">
      <section class="BottomBoxContainer">
          <div class="BottomBoxButtonClass NapicuOSSimpleButton NapicuSimpleButtonVariables">
            <button (click)="exitProgram()">{{GetCancelText}}</button>
            <button (click)="clickSave()" [disabled]="fileNameError">{{GetSaveText}}</button>
          </div>
      </section>
    </ng-container>
  </section>
</section>

<!--FileManager properties context menu-->
<section>
  <div *ngIf="boxMenuPosition && showFileManagerContextMenu"
       class="NapicuSimpleBoxMenu" [ngStyle]="{'left.px':
  boxMenuPosition.x, 'top.px':
  boxMenuPosition.y}" clickable="true">
    <ul>

      <li (click)="clickCreatDirectory()">
        <img [src]="GetAddFolderImage" alt="Add File icon">
        {{GetCreatNewDirectoryText}}
      </li>
      <li (click)="clickCreatFile()">
        <img [src]="GetAddFileImage" alt="Add Document icon">
        {{GetCreatNewDocumentText}}
      </li>
    </ul>
  </div>
</section>

<!--Directory properties context menu-->
<section>
  <div *ngIf="boxMenuPosition && showDirPropertyContextMenu"
       class="NapicuSimpleBoxMenu" [ngStyle]="{'left.px':
  boxMenuPosition.x, 'top.px':
  boxMenuPosition.y}" clickable="true">
    <ul>
      <li>
        {{GetOpenText}}
      </li>
      <li (click)="clickDeleteItem()">
        {{GetDeleteText}}
      </li>
      <li (click)="clickRenameItem()">
        {{GetRenameText}}
      </li>
    </ul>
  </div>
</section>

<!--File properties context menu-->
<section>
  <div *ngIf="boxMenuPosition && showFilePropertyContextMenu"
       class="NapicuSimpleBoxMenu" [ngStyle]="{'left.px':
  boxMenuPosition.x, 'top.px':
  boxMenuPosition.y}" clickable="true">
    <ul>
      <li>
        {{GetOpenText}}
      </li>
      <li (click)="clickDeleteItem()">
        {{GetDeleteText}}
      </li>
      <li (click)="clickRenameItem()">
        {{GetRenameText}}
      </li>
    </ul>
  </div>
</section>

