<div class="paging-container">
    @if (showSearch) {
        <div class="form-wrapper">
            <div class="search-controls">
                <input
                        type="text"
                        [(ngModel)]="searchTerm"
                        (ngModelChange)="onSearch($event)"
                        placeholder="SBC suchen..."
                        class="search-input"
                >
                @if (searchTerm) {
                    <button class="clear-button" (click)="clearSearch()">×</button>
                }
            </div>
        </div>
    }

    <ng-content></ng-content>

    <div class="paging-controls">
        @if (currentPage > 1) {
            <button class="paging-button" (click)="goToFirstPage()"> <<</button>
            <button class="paging-button" (click)="onPageChange(-1)"> <</button>
        }
        <span class="page-info">
            Seite {{ currentPage }}
        </span>

        @if (hasNextPage()) {
            <button class="paging-button" (click)="onPageChange(1)"> ></button>
            <button class="paging-button" (click)="goToLastPage()"> >></button>
        }

        <span class="total-info">
            {{ totalItems }} Einträge
        </span>
    </div>
</div>
