<div class="border-t border-t-neutral p-2 flex gap-2 items-center max-w-full justify-between">
	<div class="flex items-center gap-[8px]">
		<ng-container *ngIf="libraryService.selectedSongs$ | async as selectedSongs">
			<ng-container *ngIf="libraryService.tracks$ | async as tracks">
				{{ selectedSongs.length ? selectedSongs.length + '/' : '' }}{{ tracks.length }} Songs
			</ng-container>
		</ng-container>

		<button class="btn btn-sm btn-primary" (click)="fileInput.click()">Import Setlist</button>
		@if ((this.libraryService.selectedSongs$ | async)!.length > 0) {
			<button class="btn btn-sm btn-primary" (click)="exportSelected()">Export Selected Setlist</button>
		} @else {
			<button class="btn btn-sm btn-primary" (click)="exportLibrary()">Export Setlist</button>
		}

		<input type="file" #fileInput accept=".library" class="hidden" (change)="onFileSelected($event)" />

		@if ((this.libraryService.selectedSongs$ | async)!.length === 0) {
			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="deleteAllModal.showModal()">
				<i class="bi bi-trash"></i>
				Delete all
			</button>
		} @else {
			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="deleteSelectedModal.showModal()">
				<i class="bi bi-trash"></i>
				Delete selected
			</button>
		}
	</div>
	<div class="flex">
		<div *ngIf="downloadService.downloadCount > 0" class="max-w-100 text-ellipsis text-nowrap overflow-hidden whitespace-nowrap flex items-center">
			{{ downloadService.currentDownloadText }}
		</div>
		<div *ngIf="downloadService.downloadCount > 0" class="flex gap-2 items-center">
			<button (click)="downloadsModal.showModal()" class="btn btn-sm btn-ghost w-[30vw] flex gap-2">
				<div class="flex-1">
					<progress
						[attr.value]="downloadService.totalDownloadingPercent"
						max="100"
						class="progress h-3 rounded-md"
						[class.progress-error]="downloadService.anyErrorsExist"></progress>
				</div>
				<div>
					<i class="bi bi-info-circle text-xs"></i>
				</div>
			</button>
		</div>
	</div>
</div>

<dialog #deleteAllModal class="modal whitespace-normal modal-backdrop">
	<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2 w-9/12 max-w-7xl min-h-0 overflow-y-clip">
		You are about to delete all songs from your library. This action cannot be undone. Are you sure you want to proceed?
		<form method="dialog">
			<button class="btn btn-sm btn-primary m-5" (click)="libraryService.clearLibrary()">Delete</button>
			<button>close</button>
		</form>
	</div>
</dialog>

<dialog #deleteSelectedModal class="modal whitespace-normal modal-backdrop">
	<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2 w-9/12 max-w-7xl min-h-0 overflow-y-clip">
		You are about to delete selected songs from your library. This action cannot be undone. Are you sure you want to proceed?

		<form method="dialog">
			<button type="button" class="btn btn-sm btn-primary m-5" (click)="libraryService.removeFromLibrary()">Delete</button>
			<button>close</button>
		</form>
	</div>
</dialog>

<dialog #downloadsModal class="modal whitespace-normal">
	<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2 w-9/12 max-w-7xl min-h-0 overflow-y-clip">
		<app-downloads-modal />
	</div>
	<form method="dialog" class="modal-backdrop">
		<button>close</button>
	</form>
</dialog>
