<div class=" content">
    <div class="row">
        <div class="col-sm-12">
            <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>
                        <input class="form-control" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="ยืมอุปกรณ์IT-tab" data-toggle="tab" href="#ยืมอุปกรณ์IT" role="tab"
                aria-controls="ยืมอุปกรณ์IT" aria-selected="true">ยืมอุปกรณ์IT</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="จองห้อง-รถ-tab" data-toggle="tab" href="#จองห้อง-รถ" role="tab"
                aria-controls="จองห้อง-รถ" aria-selected="false">จองห้อง-รถ</a>
        </li>
        <div class="col-sm-4">
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </ul>
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Catagory</th>
                                <th scope="col">Type</th>
                                <th scope="col">Detail</th>
                                <th scope="col">Name</th>
                                <th scope="col">Start-Date</th>
                                <th scope="col">End-Date</th>
                                <th scope="col">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let country of countries">
                                <th scope="row">{{ country.id }}</th>
                                <td>{{ country.catagory }}</td>
                                <td>{{ country.type }}</td>
                                <td>{{ country.detail }}</td>
                                <td>{{ country.name }}</td>
                                <td>{{ country.sdate | date:'dd-MM-yyyy' }}</td>
                                <td>{{ country.edate | date:'dd-MM-yyyy' }}</td>
                                <td>{{ country.status }}</td>
                                <div class="d-grid gap-3 d-sm-flex justify-content-end">
                                    <button class="btn btn-primary btn-sm align-end" type="button">เพิ่ม</button>
                                    <button class="btn btn-primary btn-sm " type="button">ลบ</button>
                                    <button class="btn btn-primary btn-sm " type="button">แก้ไข</button>
                                </div>
                            </tr>
                        </tbody>
                    </table>

                    <div class="d-flex justify-content-between p-2">
                        <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"
                            (pageChange)="refreshCountries()">
                        </ngb-pagination>

                        <select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
                            (ngModelChange)="refreshCountries()">
                            <option [ngValue]="10">10 items per page</option>
                            <option [ngValue]="50">50 items per page</option>
                            <option [ngValue]="100">100 items per page</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>