<div class="row">
    <div class="col-12">
        <div class="card card-body">
            <h4 class="card-title">Datasorce Table</h4>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Company ID
                </div>
                <div class="col-8 col-lg-3">
                    <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.companyId">
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Company Name
                </div>
                <div class="col-8 col-lg-3">
                    <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.companyName">
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Database Name
                </div>
                <div class="col-8 col-lg-3">
                    <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.databaseName">
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Database Type
                </div>
                <div class="col-8 col-lg-3">
                    <select class="custom-select" [(ngModel)]="datasourceTable.select.dbType">
                        <option style="color: red" [class.d-none]="datasourceTable.select.dbType==''" [value]="''">
                            {{datasourceTable.select.dbType!=''?'ยกเลิก':''}}</option>
                        <option value="MSSQL">MSSQL</option>
                        <option value="PGSQL">PGSQL</option>
                    </select>
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Port Number
                </div>
                <div class="col-8 col-lg-3">
                    <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.portNumber">
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Server Name
                </div>
                <div class="col-8 col-lg-3">
                    <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.serverName">
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    User Name
                </div>
                <div class="col-8 col-lg-3">
                    <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.userName">
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Password
                </div>
                <div class="col-8 col-lg-3">
                    <input type="text" class="form-control" [class.secure-input]="!showPassword"
                        [(ngModel)]="datasourceTable.select.password">
                </div>
                <i class="fa fa-eye cursor-pointer" *ngIf="showPassword" (click)="showPassword=false"></i>
                <i class="fa fa-eye-slash cursor-pointer" *ngIf="!showPassword" (click)="showPassword=true"></i>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Status
                </div>
                <div class="col-8 col-lg-3">
                    <select class="custom-select" [(ngModel)]="datasourceTable.select.status">
                        <option style="color: red" [class.d-none]="datasourceTable.select.status==''" [value]="''">
                            {{datasourceTable.select.status!=''?'ยกเลิก':''}}</option>
                        <option value="online">online</option>
                        <option value="offline">offline</option>
                    </select>
                    <input type="text" class="form-control" [(ngModel)]="datasourceTable.select.status">
                </div>
            </div>
            <div class="row justify-content-center align-items-center mb-2">
                <button type="button" class="btn btn-info" (click)="postData()">บันทึก</button>
                &nbsp;
                <button type="button" class="btn btn-danger" (click)="deleteData()">ลบ</button>
            </div>
            <div class="row justify-content-end mr-0 mb-2">
                <input type="text" class="col-5 form-control" [(ngModel)]="datasourceTable.search">
            </div>
            <div class="table-responsive">
                <table class="table mb-0 no-wrap v-middle ">
                    <thead class="bg-info text-white">
                        <tr>
                            <th class="text-center" scope="col">Company ID</th>
                            <th class="text-center" scope="col">Company Name</th>
                            <th class="text-center" scope="col">Database Type</th>
                            <th class="text-center" scope="col">Port Number</th>
                            <th class="text-center" scope="col">Database Name</th>
                            <th class="text-center" scope="col">Server Name</th>
                            <th class="text-center" scope="col">Status</th>
                            <th class="text-center" scope="col">User Name</th>
                            <th class="text-center" scope="col">Password</th>
                        </tr>
                    </thead>
                    <tbody *ngIf="!datasourceTableFilter().length">
                        <tr style="background-color:#ebf2f6">
                            <td colspan="7" class="text-center">ไม่พบข้อมูล</td>
                        </tr>
                    </tbody>
                    <tbody *ngIf="datasourceTableFilter().length">
                        <ng-container
                            *ngFor="let item of datasourceTableFilter() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                            <tr (mouseenter)="tableHover.set(item.userName,!tableHover.get(item.userName))"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background-color':tableHover.get(item.userName)?'rgb(201 223 235)':'#ebf2f6'}">
                                <td (click)="selectData(item)" class="cursor-pointer text-center"
                                    style="white-space: normal !important;word-break: break-word;">
                                    {{item.companyId}}
                                </td>
                                <td (click)="selectData(item)" class="cursor-pointer text-center"
                                    style="white-space: normal !important;word-break: break-word;">
                                    {{item.companyName}}
                                </td>
                                <td (click)="selectData(item)" class="cursor-pointer text-center"
                                    style="white-space: normal !important;word-break: break-word;">
                                    {{item.databaseName}}
                                </td>
                                <td (click)="selectData(item)" class="cursor-pointer text-center"
                                    style="white-space: normal !important;word-break: break-word;">
                                    {{item.dbType}}
                                </td>
                                <td (click)="selectData(item)" class="cursor-pointer text-center"
                                    style="white-space: normal !important;word-break: break-word;">
                                    {{item.portNumber}}
                                </td>
                                <td (click)="selectData(item)" class="cursor-pointer text-center"
                                    style="white-space: normal !important;word-break: break-word;">
                                    {{item.serverName}}
                                </td>
                                <td (click)="selectData(item)" class="cursor-pointer text-center"
                                    style="white-space: normal !important;word-break: break-word;">
                                    {{item.status}}
                                </td>
                                <td (click)="selectData(item)" class="cursor-pointer text-center"
                                    style="white-space: normal !important;word-break: break-word;">
                                    {{item.userName}}
                                </td>
                                <td class="text-center" style="white-space: normal !important;word-break: break-word;">
                                    <span class="cursor-pointer" (click)="selectData(item)">
                                        {{tableShowPassword.get(item.userName)?item.password :
                                        '*'.repeat(item.password?.length || 0) }}
                                    </span>
                                    &nbsp;
                                    <i class="cursor-pointer fa fa-eye" *ngIf="tableShowPassword.get(item.userName)"
                                        (click)="tableShowPassword.set(item.userName,false)"></i>
                                    <i class="cursor-pointer fa fa-eye-slash"
                                        *ngIf="!tableShowPassword.get(item.userName)"
                                        (click)="tableShowPassword.set(item.userName,true)"></i>
                                </td>
                            </tr>
                        </ng-container>
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end py-2">
                <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page">
                    <option [ngValue]="10">รายการต่อหน้า: 10</option>
                    <option [ngValue]="50">รายการต่อหน้า: 50</option>
                    <option [ngValue]="100">รายการต่อหน้า: 100</option>
                </select>
                <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="datasourceTableFilter().length"
                    [maxSize]="3" [rotate]="true">
                    <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
                    <ng-template ngbPaginationNext>ถัดไป</ng-template>
                </ngb-pagination>
            </div>
        </div>
    </div>
</div>