<!-- MainSystem GetActivityDisplay -->
<div id="SystemFont" class="NapicuGlobalVariables"
     [ngClass]="[GetActivityDisplay ? 'NapicuThemeFeraDarkBackgroundDarker' : 'NapicuThemeFeraDarkBackgroundDak',
     GetUserDarkTheme === true ?  'NapicuThemeFeraDark': 'NapicuThemeFeraWhite']">
  <!-- Resizers -->
  <div class="snappingEdge">
    <div class="resizer snapping left" style="cursor: unset"></div>
    <div class="resizer snapping right" style="cursor: unset"></div>

    <div class="resizer snapping top-left" style="cursor: unset; width: 20px; height: 20px"></div>
    <div class="resizer snapping top-right" style="cursor: unset; width: 20px; height: 20px"></div>
  </div>
  <div id="SystemBackground">
    <!--Main System-->
    <section @NapicuOSfeoreStartUp id="System">
      <section style="width: 100%; height: 100%; display: flex; flex-direction: column">
        <!-- Top panel -->
        <section *ngIf="GetActiveDesktop" class="TopPanel">
          <div class="top-panel-item" (click)="onClickActivities()">{{GetActivitiesText}}</div>
          <div (click)="onClickDate()" class="top-panel-item">{{ systemTime }}</div>
          <!-- Date panel-->
          <div @NapicuOSfeoreNotification *ngIf="GetDateDisplay"
               class="DateContextMenu NapicuOSSimpleBoxNoNBorder NapicuOSSimpleBoxDarkerColor"
               clickable="false"
               style="position: absolute">
            <section class="DateContextMenu-MainContainer">
              <!--Notifications-->
              <div class="DateContextMenu-box" style="overflow: hidden">
                <div class="MenuNotificationText">
                  <div>{{GetNotificationText}}</div>
                  <div *ngIf="GetNotificationsMenu.length" class="NotCloseButtonScheme"
                       (click)="clearNotifications()">X
                  </div>
                </div>

                <div style="overflow-y: auto; height: 81%; padding: 0 10px; margin: 10px 0;" id="WindowScrollBar">
                  <section *ngFor="let i of GetNotificationsMenu"
                           @NapicuOSfeoreNotification
                           class="NotificationContextMenu NapicuOSSimpleBoxBorder"
                           id="NotificationContextMenu-DateBox"
                           clickable="false"
                           style="position: relative; top: 0">
                    <div class="ntf-con">
                      <div>
                        <img class="ntf-icon" [src]="i.icon" alt="NotificationIcon">
                      </div>
                      <div class="ntf-mainDes">
                        <div class="ntf-title-box">
                          <div class="ntf-title">{{i.title}}</div>
                          <div class="ntf-title-time">{{i.time}}</div>
                        </div>
                        <div class="ntf-des">
                          {{i.msg}}
                        </div>
                      </div>
                    </div>
                  </section>
                  <section *ngIf="!GetNotificationsMenu.length" class="NoNotification">
                    {{GetNoNotificationText}}
                  </section>

                </div>
                <div class="ntfdnD">
                  <div class="ntfdnDT">{{GetDoNoDisturbText}}</div>
                    <section class="SwitchNot">
                      <label class="switch" clickable="false">
                        <input type="checkbox" [checked]="!GetUserNotificationA"
                               (change)="changeUserNotificationReceive()">
                        <span class="slider"></span>
                      </label>
                    </section>
                  </div>
              </div>
              <!--Calendar-->
              <div class="DateContextMenu-box">
                <div class="NapicuCalendar">
                  <div class="TopCPanel">
                    <!--Calendar Day name & full date-->
                    <div class="dayName">{{GetDayName}}</div>
                    <div class="fullDate">{{GetFullDate}}</div>
                  </div>
                  <section class="NapicuOSSimpleBoxBorder">
                    <!--Calendar Header-->
                    <div class="header">
                      <div class="Arrow" (click)="arrowLeft()">◄</div>
                      <div class="title"><span>{{GetSelectedMonthName}}</span></div>
                      <div class="Arrow" (click)="arrowRight()">►</div>
                    </div>
                    <!--Calendar short days name-->
                    <div class="daysInWeek">
                      <span *ngFor="let i of GetShortDays">{{i}}</span>
                    </div>
                    <!--Calendar Days & weeks-->
                    <div class="days">
                      <div *ngFor="let i of GetNotificationCalendar" class="week">
                        <!--Calendar days-->


                        <div *ngFor="let d of i; let index = index" class="day"
                             [ngClass]="{selectedMonth: d.day == GetDate && !d.outOfMonth && !GetOutOfMonth, outDate:
                              d.outOfMonth }">
                          <!--                          <div *ngIf="d.day === selectedDayContext && !d.outOfMonth"-->
                          <!--                               class="ContextMenu ContextMenuBox napicu-os-clickable" style="right: auto; left: auto;-->
                          <!--                                padding: 10px">-->
                          <!--                            <div>Přidat upomínku</div>-->
                          <!--                          </div>-->
                          {{d.day}}
                        </div>


                      </div>
                    </div>
                  </section>
                </div>
              </div>
            </section>
          </div>
          <!--Top menu icons-->
          <div id="TopPanelIcons" >
            <div class="top-panel-item" (click)="onClickToolsContextMenuDisplay()">
<!--              <img src="/assets/systems/NapicuOS/audio.svg"/>-->
              <img src="/assets/systems/NapicuOS/on-off.svg"/>
            </div>
            <!--Tools Context Menu-->
            <div *ngIf="GetToolsContextMenuDisplay"  class="NapicuSimpleBoxMenu NapicuOSSimpleBoxBorder NapicuOSSimpleContextMenuPositionLeft TopPanelLeftContentMenu"
                 clickable="false" style="min-width: 130px !important; top: 50px">
              <ul>
                <li (click)="onClickSettings()">
                  <img [src]="GetSettingsImage" alt="Settings Icon">
                  {{GetSettingsText}}
                </li>
                <li (click)="onClickLock()">
                  <img [src]="GetLockImage" alt="Lock Icon">
                  {{GetLockText}}
                </li>
                <li (click)="onClickOff()">
                  <img [src]="GetShutdownImage" alt="Shutdown Icon">
                  {{GetPowerOffText}}
                </li>
              </ul>

            </div>
          </div>
        </section>
        <!--Notification panel-->
        <ng-container *ngIf="GetNotification && !GetDateDisplay">
          <section @NapicuOSfeoreNotification (click)="onNotificationClick()"
                   class="Notification NotificationContextMenu NapicuOSSimpleBoxNoNBorder NapicuOSSimpleBoxDarkerColor"
                   style="padding: 0; position: absolute">
            <div class="ntf-main">
              <div class="ntf-con">
                <div>
                  <img class="ntf-icon" [src]="GetNotification.icon" alt="NotificationIcon">
                </div>
                <div class="ntf-mainDes">
                  <div class="ntf-exit NotCloseButtonScheme" (click)="onCloseNotification()">X</div>
                  <div class="ntf-title-box">
                    <div class="ntf-title">{{GetNotification.title}}</div>
                    <div class="ntf-title-time">{{GetNotification.time}}</div>
                  </div>
                  <div class="ntf-des">
                    {{GetNotification.msg}}
                  </div>
                </div>
              </div>
            </div>
          </section>

        </ng-container>
        <!-- Main Panel -->
        <section style="display: contents; background-color: white">
          <div [@NapicuOSfeoreActivityMenu]="GetActivityDisplay" (click)="onClickDesktop()"
               [style.background-image]="'url(' + wallpaper + ')'"
               id="wallpaper" [ngClass]="{'overflowH': GetActivityDisplay, 'blank': !GetActiveDesktop }">
            <!-- Apps -->
            <section>
              <app-window></app-window>
            </section>
          </div>
        </section>

        <!-- Bottom AppPanel -->
        <section *ngIf="BottomDockDisplay && GetActiveDesktop" class="BottomPanel" id="Dock"
                 style="z-index: 1000">
          <div style="display: flex; align-items: center; justify-content: space-between">
            <section style="display: flex;"
                     cdkDropList
                     #todoList="cdkDropList"
                     [cdkDropListData]="GetBottomDockProcess"
                     (cdkDropListDropped)="drop($event)"
                     cdkDropListOrientation="horizontal">

              <!-- Applications -->
              <div *ngFor="let i of GetBottomDockProcess; let index = index" class="DockIcon" clickable="false" cdkDrag>
                <!--                <div *ngIf="index === selectedAppContext"-->
                <!--                     class="NapicuOSSimpleContextMenu NapicuOSSimpleBoxBorder-->
                <!--                                     NapicuOSSimpleContextMenuPositionTop NapicuOSSimpleContextMenuPositionRight"-->
                <!--                     clickable="false">-->
                <!--                  <div (click)="openFile(i.file)">Open</div>-->
                <!--                  <div-->
                <!--                    (click)="pinFunFileInContextMenu(i.file, index, i.alreadyPinned)">{{i.alreadyPinned ?-->
                <!--                    'Unpin' : 'Pin'}}</div>-->
                <!--                </div>-->


                <!-- Application context menu-->
                <div *ngIf="index === selectedAppContext"
                     class="NapicuSimpleBoxMenu NapicuOSSimpleContextMenuPositionTop NapicuOSSimpleContextMenuPositionRight"
                     clickable="false">
                  <ul>
                    <li (click)="openFile(i.file)">Open</li>
                    <li
                      (click)="pinFunFileInContextMenu(i.file, index, i.alreadyPinned)">{{i.alreadyPinned ?
                      'Unpin' : 'Pin'}}
                    </li>
                  </ul>
                </div>

                <!-- Application preview menu-->
<!--                <div *ngIf="index === selectedAppPreview?.index"-->
<!--                     class="NapicuSimpleBoxMenu NapicuOSSimpleContextMenuPositionTop NapicuOSSimpleContextMenuPositionRight"-->
<!--                     clickable="false">-->
<!--                  <ul>-->
<!--                    <ng-container *ngIf="GetPreviewProcess">-->
<!--                      <div *ngFor="let p of GetPreviewProcess">-->

<!--                        <ng-container *ngComponentOutlet="p.Window.windowComponent"></ng-container>-->

<!--                      </div>-->
<!--                    </ng-container>-->
<!--                  </ul>-->
<!--                </div>-->

                <!-- Application icon (mouseenter)="onMouseEnter(index, $event)" (mouseleave)="onMouseLeave($event)"-->
                <img  (click)="dockRunner(i.file, i.running)" (contextmenu)="onRightClick(index, $event)"
                     [src]="i.file.iconPath"
                     alt="Application icon"/>
                <!-- Application line-->
                <div *ngIf="i.running || i.selected" [ngClass]="{'widthLine': i.selected, 'smallLine':
                i.running}" class="line"></div>
              </div>
            </section>
              <div class="BottomMenuIcon">
                <img [src]="GetMenuImage" alt="Menu Icon" (click)="onClickActivities()">
              </div>
          </div>
        </section>
      </section>

      <!-- Apps menu list -->
      <section *ngIf="GetActivityDisplay" class="NapicuAppsMenu">
        <div *ngFor="let i of GetActivityMenuApps; let index = index" class="app">
          <!-- Application properties menu-->
          <div *ngIf="index === selectedAppProperties"
               class="NapicuSimpleBoxMenu NapicuOSSimpleBoxBorder NapicuOSSimpleContextMenuPositionRight"
               clickable="false">
            <li (click)="openFile(i)">New window</li>
            <!--<li>Show details</li>-->
          </div>

          <div class="MainContent" (click)="openFile(i)" (contextmenu)="openAppProperties(index, $event)">
            <!-- App icon -->
            <div>
              <img [src]="i.iconPath" alt="App icon"/>
            </div>
            <!-- App name -->
            <div class="appName">{{i.fileName}}</div>
          </div>
        </div>
      </section>
    </section>
  </div>
</div>

