<div class=" content">
    <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">Detail</th>
                                <th scope="col">Name</th>
                                <th scope="col">Start-Date</th>
                                <th scope="col">End-Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let country of countries">
                                <th scope="row">{{ country.id }}</th>
                                <td>{{ country.name }}</td>
                                <td>{{ country.sdate | date:'dd-mm-yyyy' }}</td>
                                <td>{{ country.edate | date:'dd-mm-yyyy' }}</td>
                            </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>