<div class="collapse navbar grid bg-base-100 overflow-visible rounded-none border-t-base-200 border-t">
	<input
		type="text"
		placeholder="Search..."
		class="input input-bordered pr-14 ng-pristine ng-valid ng-touched"
		[(ngModel)]="searchTerm"
		(keyup)="filterSongs()" />
</div>
<div
	*ngIf="songs.length > 0"
	(scroll)="onScroll($event)"
	class="basis-2/3 flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full h-[calc(100vh-164px)]">
	<table id="resultTable" class="table table-zebra table-pin-rows" [class.table-xs]="settingsService.isCompactTable">
		<thead>
			<tr>
				<th class="collapsing" id="checkboxColumn">
					<button type="button" class="btn btn-sm min-w-[108px] hover:btn-primary" (click)="toggleSelectAll()">
						{{ allRowsSelected ? 'Deselect All' : 'Select All' }}
					</button>
				</th>
				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
					Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
				</th>
				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
					Artist
					<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
				</th>
				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
					Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
				</th>
				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
					Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
				</th>
				<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
					Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
				</th>
			</tr>
		</thead>
		<tbody>
			<tr *ngFor="let song of songs; trackBy: trackByFn">
				<td>
					<input type="checkbox" class="checkbox" #inputBox (change)="onCheckboxChange(song, $event.target!)" [checked]="rowIsSelected(song)" />
				</td>
				<td>{{ song.name }}</td>
				<td>{{ song.artist }}</td>
				<td>{{ song.album || 'Various' }}</td>
				<td>{{ song.genre || 'Various' }}</td>
				<td>{{ song.year || 'Various' }}</td>
			</tr>
		</tbody>
	</table>
	<div *ngIf="isLoading" class="text-center py-4">Loading...</div>
</div>

<div class="flex align-center justify-center items-center h-[calc(100vh-169.5px)]" *ngIf="songs.length < 1 && !hasSearched">
	<p class="text-center" style="font-size: 1.5rem">No songs added!</p>
</div>

<div
	class="align-center h-[calc(100vh-169.5px)]"
	*ngIf="songs.length < 1 && hasSearched"
	style="display: flex; justify-content: center; align-items: center">
	<p class="text-center" style="font-size: 1.5rem">No songs found!</p>
</div>
