<div>

    <!-- Toolbar -->
    <div *ngIf="this.showToolbar"
        class="list-view-toolbar d-flex justify-content-between">

        <div class="list-view-toolbar-left">
            <search-textbox *ngIf="this.showSearch"
                (onChanged)="this.onSearch($event);">
            </search-textbox>
            <ng-content select="[list-view-toolbar-left]"></ng-content>
        </div>

        <div class="list-view-toolbar-center">
            <ng-content select="[list-view-toolbar-center]"></ng-content>
        </div>

        <div class="list-view-toolbar-right">
            <ng-content select="[list-view-toolbar-right]"></ng-content>
        </div>

    </div>

    <!-- Content -->
    <div>

        <table class="table align-middle mb-0"
            [ngClass]="{
                'table-hover': this.hover,
                'table-sm': this.small
            }">

            <!-- Header Row -->
            <thead *ngIf="this.showHeaderRow">
                <tr>
                    <th *ngIf="this.isMultiSelect"
                        class="select-column">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            [checked]="this.allDisplayedRecordsAreSelected"
                            (change)="this.toggleAllDisplayedRecordsSelected();" />
                    </th>
                    <th *ngFor="let column of this.displayedColumns"
                        scope="col">
                        <i *ngIf="column.icon"
                            class="me-1"
                            [ngClass]="column.icon">
                        </i>
                        <span *ngIf="column.label">{{column.label}}</span>
                        <span *ngIf="column.isSortable !== false"
                            class="sort-icon"
                            (click)="this.onSort(column);">
                        </span>
                    </th>
                    <th *ngIf="this.actions"
                        class="text-end">
                        <span>Actions</span>
                    </th>
                </tr>
            </thead>

            <tbody>

                <tr *ngFor="let record of this.displayedRecords$ | async"
                    [ngClass]="{
                        'table-active': this.isRecordSelected(record),
                        'table-secondary': !this.isRecordSelectable(record)
                    }"
                    (click)="this.onRecordClicked.emit(record);">

                    <td *ngIf="this.isMultiSelect"
                        class="select-column">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            [checked]="this.isRecordSelected(record)"
                            [disabled]="!this.isRecordSelectable(record)"
                            (click)="this.toggleRecordSelected(record, $event);" />
                    </td>

                    <td *ngFor="let column of this.displayedColumns">
                        <span *ngIf="column.renderSimple">{{column.renderSimple(record)}}</span>
                        <ng-container *ngIf="column.renderComplex"
                            [ngTemplateOutlet]="column.renderComplex()"
                            [ngTemplateOutletContext]="{record: record}">
                        </ng-container>
                    </td>

                    <td *ngIf="this.actions"
                        class="text-end">
                        <div class="btn-group">
                            <button *ngFor="let action of this.actions"
                                class="btn btn-sm"
                                type="button"
                                [ngClass]="{
                                    'btn-primary': action.style === 'primary',
                                    'btn-danger': action.style === 'danger'
                                }"
                                (click)="action.click(record);">
                                <i *ngIf="action.icon"
                                    [ngClass]="action.icon">
                                </i>
                                <span *ngIf="action.label"
                                    class="ms-1">
                                    {{action.label}}
                                </span>
                            </button>
                        </div>
                    </td>

                </tr>

                <!-- No Records Found -->
                <tr *ngIf="this.displayedRecordCount < 1">
                    <td [attr.colspan]="this.displayedColumns.length + (this.isMultiSelect ? 1 : 0) + (this.actions ? 1 : 0)">
                        <span>No records were found.</span>
                    </td>
                </tr>

            </tbody>

        </table>

    </div>

    <!-- Status Bar -->
    <div *ngIf="this.showStatusBar"
        class="list-view-status-bar d-flex justify-content-between">

        <div class="list-view-status-bar-left">
            <p *ngIf="this.showSummary"
                class="mb-0">
                <span>Displaying {{this.displayedRecordCount}} of {{this.totalRecordCount}}</span>
            </p>
            <ng-content select="[list-view-status-bar-left]"></ng-content>
        </div>

        <div class="list-view-status-bar-center">
            <ng-content select="[list-view-status-bar-center]"></ng-content>
        </div>

        <div class="list-view-status-bar-right">
            <ng-content select="[list-view-status-bar-right]"></ng-content>
        </div>

    </div>

</div>