<div
	class="dropdown-content card card-compact p-2 shadow bg-neutral text-neutral-content z-10 cursor-auto border-2 border-base-300 max-w-[90vw] sm:max-w-[80vw] lg:max-w-[70vw] 2xl:max-w-[60vw]">
	<div class="card-body">
		<div class="flex flex-row-reverse justify-between menu-title p-0 whitespace-nowrap text-neutral-content">
			<div>
				<button class="btn btn-secondary btn-xs flex-nowrap uppercase" (click)="reportModal.showModal()">
					<i class="bi bi-exclamation-triangle text-sm text-secondary-content"></i> Report issue
				</button>
				<dialog #reportModal class="modal">
					@if (reportState === 'sent') {
						<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
							<form method="dialog">
								<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
									<i class="bi bi-x-lg text-lg"></i>
								</button>
							</form>
							<span class="text-xl text-center">{{ reportMessage }}</span>
						</div>
					} @else if (reportState === 'sending') {
						<div class="modal-box flex flex-col gap-2 bg-base-100 text-base-content">
							<span class="loading loading-spinner loading-sm self-center"></span>
						</div>
					} @else {
						<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
							<form method="dialog">
								<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
									<i class="bi bi-x-lg text-lg"></i>
								</button>
							</form>
							<h3 class="font-bold text-lg">Report Issue</h3>
							<form [formGroup]="reportForm">
								<div
									[class.border-error]="reportOption.invalid && reportOption.touched"
									[class.border]="reportOption.invalid && reportOption.touched">
									<div class="form-control">
										<label class="label cursor-pointer justify-normal gap-2">
											<input type="radio" class="radio checked:bg-red-500" value="Doesn't follow Chorus guidelines" formControlName="reportOption" />
											<span>
												Doesn't follow <a class="link link-primary" (click)="openUrl('https://guidelines.enchor.us/')">Chorus guidelines</a>
											</span>
										</label>
									</div>
									@for (option of reportOptions; track $index) {
										<div class="form-control">
											<label class="label cursor-pointer justify-normal gap-2">
												<input type="radio" class="radio checked:bg-red-500" [value]="option" formControlName="reportOption" />
												<span>{{ option }}</span>
											</label>
										</div>
									}
								</div>
								<span *ngIf="reportOption.invalid && reportOption.touched" class="text-error">Please select an option.</span>
								<div *ngIf="!isFalseReportOption()" class="form-control">
									<div class="label">
										<span class="label-text">More details <span class="text-error">*</span></span>
									</div>
									<textarea
										required
										class="textarea textarea-bordered h-24"
										[class.border-error]="reportExtraInfo.invalid && reportExtraInfo.touched"
										placeholder="Please be specific. Vague reports may be ignored if the problem is not obvious."
										formControlName="reportExtraInfo">
									</textarea>
									<span *ngIf="reportExtraInfo.invalid && reportExtraInfo.touched" class="text-error">
										@if (reportExtraInfo.value.length === 0) {
											Please provide more details.
										} @else {
											Reports without a specific explanation will be ignored.
										}
									</span>
								</div>
							</form>
							<span *ngIf="isFalseReportOption()" class="text-lg text-warning text-wrap">
								@if (reportOption.value === 'No notes / chart ends immediately') {
									This is not a problem with the chart! To fix this, please update Clone Hero to the latest version. You can get the latest version at
									<a class="link" (click)="openUrl('https://clonehero.net')">clonehero.net</a>. (If that's not the problem, double check that the
									chart actually has the instrument that you're trying to play)
								} @else if (reportOption.value === "Download doesn't work") {
									Please click the progress bar in the lower-right of the program to see the error message. If you need help getting it to work,
									please ask in the <a class="link" (click)="openUrl('https://discord.gg/cqaUXGm')">Chorus Encore Discord server</a>.
								} @else if (reportOption.value === "Doesn't appear in Clone Hero") {
									This is not a problem with the chart! Here are the most common reasons for this:
									<ul class="list-disc pl-5">
										<li>.sng files will not work with the latest CH version. They only work on the test build for the next version.</li>
										<li>Your chart library directory is not set as a song path in CH.</li>
										<li>You need to rescan songs in CH's settings menu.</li>
									</ul>
									If you're still having issues, please ask in the
									<a class="link" (click)="openUrl('https://discord.gg/cqaUXGm')">Chorus Encore Discord server</a>.
								}
							</span>
							<div *ngIf="!isFalseReportOption()" class="form-control flex-row justify-end">
								<button class="btn btn-primary" (click)="report()">Submit</button>
							</div>
						</div>
					}
					<form method="dialog" class="modal-backdrop">
						<button>close</button>
					</form>
				</dialog>
			</div>
			@if (displayVersions.length > 1) {
				<span class="uppercase">Select Version</span>
			}
		</div>
		<div
			class="overflow-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-neutral scrollbar-thumb-neutral-content scrollbar-thumb-rounded-full">
			<table class="table table-xs">
				<thead>
					<tr>
						@if (displayVersions.length > 1) {
							<th></th>
						}
						<th></th>
						<th class="text-neutral-content">Uploaded</th>
						<th>
							<span
								class="label-text cursor-help underline decoration-dotted text-neutral-content"
								title="The MD5 hash of the chart folder or .sng file.">
								Hash
							</span>
						</th>
						<th>
							<span
								class="label-text cursor-help underline decoration-dotted text-neutral-content"
								title="The MD5 hash of just the .chart or .mid file.">
								Chart Hash
							</span>
						</th>
						<th class="text-neutral-content">Google Drive Location</th>
					</tr>
				</thead>
				<tbody>
					@for (version of displayVersions; track version.chartId) {
						<tr>
							@if (displayVersions.length > 1) {
								<td>
									<input
										type="radio"
										name="selectedVersion{{ version.chartId }}"
										class="radio radio-secondary"
										[value]="version"
										[formControl]="selectedVersion" />
								</td>
							}
							<td class="px-0">
								<div class="tooltip tooltip-accent tooltip-right" data-tip="Copy chart link">
									<button class="btn btn-circle btn-ghost btn-xs" (click)="copyLink(version.md5)">
										<i class="bi bi-link-45deg text-lg -mt-0.5"></i>
									</button>
								</div>
							</td>
							<td>{{ version.modifiedTime | date: 'y/MM/dd' }}</td>
							<td>
								<div class="flex flex-nowrap items-center whitespace-nowrap">
									{{ version.md5.substring(0, 7) }}
									<div class="tooltip tooltip-accent" data-tip="Copy full hash">
										<button class="btn btn-circle btn-ghost btn-xs" (click)="copyHash(version.md5)">
											<i class="bi bi-copy text-xs"></i>
										</button>
									</div>
								</div>
							</td>
							<td>
								<div class="flex flex-nowrap items-center whitespace-nowrap">
									{{ version.chartHash.substring(0, 7) }}
									<div class="tooltip tooltip-accent" data-tip="Copy full hash">
										<button class="btn btn-circle btn-ghost btn-xs" (click)="copyHash(version.chartHash)">
											<i class="bi bi-copy text-xs"></i>
										</button>
									</div>
								</div>
							</td>
							<td>
								<div class="breadcrumbs overflow-visible">
									<ul>
										@for (breadcrumb of getVersionBreadcrumbs(version); track $index) {
											<li>
												@if (breadcrumb.link) {
													<a (click)="openUrl(breadcrumb.link)" class="link link-hover">{{ breadcrumb.name }}</a>
												} @else {
													{{ breadcrumb.name }}
												}
											</li>
										}
									</ul>
								</div>
							</td>
						</tr>
					}
				</tbody>
			</table>
		</div>
	</div>
</div>
