<section class="MainContent" style="position: relative" [ngClass]="{MainContentEventDisable: setTimeSettingMenuDisplayed}" clickable="true">
  <!--Settings -->
  <div class="BasicTableSizes BasicTableSettings-Medium">
    <div class="NapicuOSSimpleGTable NapicuOSSimpleGTableHover NapicuOSSimpleGTablePointer table" >
      <ul>
        <div>{{GetDateAndTimeAutomaticText}}</div>
        <section class="SwitchNot">
          <label clickable="true" class="switch UseAuthSwitch">
            <input type="checkbox" [checked]="GetAutoTimeSwitchA"
                   (change)="onChangeAutoTimeSwitch()">
            <span class="slider UseAuthSwitchSlider"></span>
          </label>
        </section>
      </ul>
      <ul (click)="openSetTimeSettingsMenu()" [ngClass]="{'NapicuOSSimpleGTable-Disabled': GetAutoTimeSwitchA }" >
        <div>{{GetDateAndTimeText}}</div>
        <div>{{GetTimeDateSettingsTemplateTime}}</div>
      </ul>
    </div>

    <div class="NapicuOSSimpleGTable table">
      <ul style="position: relative"  clickable="true">
        <div>{{GetDateAndTimeFormatText}}</div>
          <div >
            <napicu-drop-down-menu clickable="true" [onSet]="onChangeTimeFormat" [arrow]="false" [selectedOption]="GetSelectedTimeFormat"
                                   style="text-align: center; position: absolute; right: 10px; top: 0%; width: 70px;"
                                 [options]="GetTimeFormatOptions" ></napicu-drop-down-menu>
          </div>
      </ul>
    </div>

  </div>
    <ng-container *ngIf="setTimeSettingMenuDisplayed">
      <div id="TimeSettingMenu" clickable="true">
        <in-app-window appTitle="Window" [onClose]="closeSetTimeSettingsMenu">
          <div class="WindowContent TimeSettingMenuContent">
            <!--Time settings box -->
            <section class="TimeSettingsBox">
              <div>
                <div class="arrow">
                  <div (click)="addHour()">˄</div>
                  <div (click)="addMinute()">˄</div>
                </div>
                <div class="NapicuOSSimpleBoxBorder time">
                    {{GetTimeSettingsTimeTemplate}}
                </div>
                <div class="arrow">
                  <div (click)="removeHour()">˅</div>
                  <div (click)="removeMinute()">˅</div>
                </div>
              </div>
              <div *ngIf="GetUserTimeFormat12h" class="NapicuOSSimpleButton">
                <button (click)="changeTimeFormat()">{{GetUserTimeFormatText}}</button>
              </div>
            </section>
            <section>
            </section>
            <!--Date settings box -->
            <section class="NapicuOSSimpleBoxBorder BoxRow">
              <div>
                <div>{{GetDayText}}</div>
                <div>
                  <app-counter-input [min]="1" [max]="GetMaxDate" [(ngModel)]="selectedDay" (ngModelChange)="updateDay()"></app-counter-input>
                </div>
              </div>
              <div>
                <div>{{GetMonthText}}</div>
                <div>
                  <app-counter-input [min]="1" [max]="12" [(ngModel)]="selectedMonth" (ngModelChange)="updateMonth()"></app-counter-input>
                </div>
              </div>
              <div>
                <div>{{GetYearText}}</div>
                <div>
                  <app-counter-input [min]="min_year" [max]="max_year" [(ngModel)]="selectedYear" (ngModelChange)="updateYear()"></app-counter-input>
                </div>
              </div>
            </section>
          </div>
        </in-app-window>
      </div>
    </ng-container>


<!--  <ng-container *ngIf="showInputMenu && inputMenuData">-->
<!--    <section>-->
<!--      <app-input clickable="true" [data]="inputMenuData"  class="Input" ></app-input>-->
<!--    </section>-->
<!--  </ng-container>-->

</section>
