<app-notice [svg]="'assets/media/svg/icons/Tools/Compass.svg'">
  For more info please check the components's official demos & documentation
  <a
    class="font-weight-bold"
    href="https://ng-bootstrap.github.io/#/components/timepicker/examples"
    target="_blank"
    >demos & documentation</a
  >
</app-notice>
<div class="row">
  <div class="col-xl-6">
    <app-code-preview [viewItem]="exampleTimepicker">
      <div class="example-preview">
        <div>
          <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
        </div>
      </div>
      <div class="separator separator-dashed my-6"></div>

      <div class="example-preview">
        <div>
          <pre>Selected time: {{ time | json }}</pre>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleMeridian">
      <div class="example-preview">
        <div>
          <ngb-timepicker
            [(ngModel)]="time2"
            [meridian]="meridian"
          ></ngb-timepicker>
          <button
            class="btn btn-sm btn-{{ meridian ? 'success' : 'danger' }}"
            (click)="toggleMeridian()"
          >
            Meridian - {{ meridian ? "ON" : "OFF" }}
          </button>
        </div>
      </div>
      <div class="separator separator-dashed my-6"></div>
      <div class="example-preview">
        <div>
          <pre>Selected time: {{ time2 | json }}</pre>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSeconds">
      <div class="example-preview">
        <div>
          <ngb-timepicker
            [(ngModel)]="time3"
            [seconds]="seconds"
          ></ngb-timepicker>
          <button
            class="btn btn-sm btn-{{ seconds ? 'success' : 'danger' }}"
            (click)="toggleSeconds()"
          >
            Seconds - {{ seconds ? "ON" : "OFF" }}
          </button>
        </div>
      </div>
      <div class="separator separator-dashed my-6"></div>
      <div class="example-preview">
        <div>
          <pre>Selected time: {{ time3 | json }}</pre>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSpinners">
      <div class="example-preview">
        <div>
          <ngb-timepicker
            [(ngModel)]="time7"
            [spinners]="spinners"
          ></ngb-timepicker>
        </div>
      </div>
      <div class="separator separator-dashed my-6"></div>
      <div class="example-preview">
        <div>
          <button
            class="kt-t-1 btn btn-sm btn-{{ spinners ? 'success' : 'danger' }}"
            (click)="toggleSpinners()"
          >
            Spinners - {{ spinners ? "ON" : "OFF" }}
          </button>
        </div>
      </div>
    </app-code-preview>
  </div>
  <div class="col-xl-6">
    <app-code-preview [viewItem]="exampleCustomSteps">
      <div class="example-preview">
        <div>
          <ngb-timepicker
            [(ngModel)]="time4"
            [seconds]="true"
            [hourStep]="hourStep"
            [minuteStep]="minuteStep"
            [secondStep]="secondStep"
          ></ngb-timepicker>
          <div class="row">
            <div class="col-sm-3">
              <label for="changeHourStep">Hour Step</label>
              <input
                id="changeHourStep"
                type="number"
                class="form-control form-control-sm"
                [(ngModel)]="hourStep"
              />
            </div>
            <div class="col-sm-3">
              <label for="changeMinuteStep">Minute Step</label>
              <input
                id="changeMinuteStep"
                type="number"
                class="form-control form-control-sm"
                [(ngModel)]="minuteStep"
              />
            </div>
            <div class="col-sm-3">
              <label for="changeSecondStep">Second Step</label>
              <input
                id="changeSecondStep"
                type="number"
                class="form-control form-control-sm"
                [(ngModel)]="secondStep"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="separator separator-dashed my-6"></div>
      <div class="example-preview">
        <div>
          <pre>Selected time: {{ time4 | json }}</pre>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleCustomValidation">
      <div class="example-preview">
        <span>
          Illustrates custom validation, you have to select time between 12:00
          and 13:59
        </span>
        <div>
          <div class="form-group">
            <ngb-timepicker
              [(ngModel)]="time5"
              [formControl]="ctrl"
              required
            ></ngb-timepicker>
            <div *ngIf="ctrl.valid" class="small form-text text-success">
              Great choice
            </div>
            <div class="small form-text text-danger" *ngIf="!ctrl.valid">
              <div *ngIf="ctrl.errors['required']">
                Select some time during lunchtime
              </div>
              <div *ngIf="ctrl.errors['tooLate']">Oh no, it's way too late</div>
              <div *ngIf="ctrl.errors['tooEarly']">It's a bit too early</div>
            </div>
          </div>
        </div>
      </div>
      <div class="separator separator-dashed my-6"></div>
      <div class="example-preview">
        <div>
          <pre>Selected time: {{ time5 | json }}</pre>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleGlobalConfigurationOfTimepickers">
      <div class="example-preview">
        <span>
          This timepicker uses customized default values.
        </span>
        <div>
          <ngb-timepicker
            [(ngModel)]="time6"
            [seconds]="'true'"
            [spinners]="'false'"
          ></ngb-timepicker>
        </div>
      </div>
    </app-code-preview>
  </div>
</div>
