<div class=" content">
    <div class="row">
        <div class="col-sm-8">
            <div class="card">
                <div class="card-body">
                    <form class="form-inline">
                        <div class="form-group hidden">
                            <div class="input-group">
                                <input name="datepicker" class="form-control" ngbDatepicker #datepicker="ngbDatepicker"
                                    [autoClose]="'outside'" (dateSelect)="onDateSelection($event)" [displayMonths]="2"
                                    [dayTemplate]="t" outsideDays="hidden" [startDate]="fromDate!" tabindex="-1">
                                <ng-template #t let-date let-focused="focused">
                                    <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)"
                                        [class.faded]="isHovered(date) || isInside(date)"
                                        (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null">
                                        {{ date.day }}
                                    </span>
                                </ng-template>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <input #dpFromDate class="form-control" placeholder="yyyy-mm-dd" name="dpFromDate"
                                    [value]="formatter.format(fromDate)"
                                    (input)="fromDate = validateInput(fromDate, dpFromDate.value)">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()"
                                        type="button"></button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group ml-2">
                            <div class="input-group">
                                <input #dpToDate class="form-control" placeholder="yyyy-mm-dd" name="dpToDate"
                                    [value]="formatter.format(toDate)"
                                    (input)="toDate = validateInput(toDate, dpToDate.value)">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()"
                                        type="button"></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <div ngbDropdown class="d-inline-block">
                        <button class="btn btn-sm btn-outline-primary" id="dropdownBasic1"
                            ngbDropdownToggle>ประเภทการค้นหา</button>
                        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                            <button ngbDropdownItem>รอดำเนินการ</button>
                            <button ngbDropdownItem>อนุมัติ</button>
                            <button ngbDropdownItem>ยกเลิก</button>
                            <button ngbDropdownItem>สำเร็จแล้ว</button>
                        </div>
                        <button class="btn btn-sm btn-outline-success" type="submit">Search</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <ul ngbNav #nav="ngbNav" [(activeId)]="active" (navChange)="onNavChange($event)" class="nav-tabs">
                        <li [ngbNavItem]="1">
                            <a ngbNavLink>ปฏิทินการจองห้อง</a>
                            <ng-template ngbNavContent>
                                <full-calendar #calendarBook [options]="calendarOptions"></full-calendar>
                            </ng-template>
                        </li>
                        <li [ngbNavItem]="2">
                            <a ngbNavLink>ปฏิทินการยืมรถ</a>
                            <ng-template ngbNavContent>
                                <full-calendar #calendar [options]="calendarOptions"></full-calendar>
                            </ng-template>
                        </li>
                    </ul>
                    <div [ngbNavOutlet]="nav"></div>
                </div>
            </div>
        </div>
    </div>

</div>