Please describe the problem you're experiencing. We'll look into it as soon as possible.

Problem Type

UI problem

Article is not full

Suggestion

Vulnerability (XSS, etc.)

Other

Problem Description

<p class="mt-2 text-sm text-foreground-alt">
								The current opened page will be automatically attached to your report.
							</p>
						</div>
					</div>
				</div>
				<div class="self-end p-4">
					<Dialog.Footer>
						<Dialog.Close class={buttonVariants({ variant: 'outline' })}>Cancel</Dialog.Close>
						<Button type="submit">Submit</Button>
					</Dialog.Footer>
				</div>
			</Dialog.Content>
		</form>
	</Dialog.Root>
{:else}
	<Drawer.Root bind:open>
		<Drawer.Trigger class={buttonVariants({ variant: 'default' })}>
			<div class="flex items-center space-x-2 text-white">
				<span class="icon-[heroicons--exclamation-triangle-solid] size-5" />
				<span class="hidden text-sm font-medium lg:block">Report a problem</span>
			</div>
		</Drawer.Trigger>
		<form on:submit|preventDefault={handleSubmit}>
			<Drawer.Content class="max-h-[90dvh] flex flex-col">
				<div class="flex-1 mb-5 overflow-y-auto">
					<Drawer.Header class="text-left">
						<Drawer.Title class="text-lg font-semibold tracking-tight"
							>Report a Problem</Drawer.Title
						>
						<Drawer.Description class="text-foreground-alt">
							Please describe the problem you're experiencing. We'll look into it as soon as
							possible.
						</Drawer.Description>
					</Drawer.Header>
					<div class="px-4 space-y-4">
						<div class="space-y-4">
							<div class="flex flex-col items-start space-y-2">
								<Label.Root class="text-sm font-medium">Problem Type</Label.Root>
								<RadioGroup.Root bind:value={problemType} class="space-y-2">
									<div class="flex items-center space-x-2">
										<RadioGroup.Item value="ui_problem" id="ui-problem-mobile" />
										<Label.Root for="ui-problem-mobile">UI problem</Label.Root>
									</div>
									<div class="flex items-center space-x-2">
										<RadioGroup.Item value="article_not_full" id="article-not-full-mobile" />
										<Label.Root for="article-not-full-mobile">Article is not full</Label.Root>
									</div>
									<div class="flex items-center space-x-2">
										<RadioGroup.Item value="suggestion" id="suggestion-mobile" />
										<Label.Root for="suggestion-mobile">Suggestion</Label.Root>
									</div>
									<div class="flex items-center space-x-2">
										<RadioGroup.Item value="vulnerability" id="vulnerability-mobile" />
										<Label.Root for="vulnerability-mobile">Vulnerability (XSS, etc.)</Label.Root>
									</div>
									<div class="flex items-center space-x-2">
										<RadioGroup.Item value="other" id="other-mobile" />
										<Label.Root for="other-mobile">Other</Label.Root>
									</div>
								</RadioGroup.Root>
							</div>
							<div class="flex flex-col items-start space-y-2">
								<Label.Root for="problemDescription-mobile" class="text-sm font-medium"
									>Problem Description</Label.Root
								>
								<Textarea
									id="problemDescription-mobile"
									bind:value={problemDescription}
									placeholder="Describe the problem you're experiencing..."
									rows={12}
								/>
								<p class="mt-2 text-sm text-foreground-alt">
									The current opened page will be automatically attached to your report.
								</p>
							</div>
						</div>

<div class="flex justify-center gap-2">
							<Drawer.Close class={buttonVariants({ variant: 'outline' })}>Cancel</Drawer.Close>
							<Button type="submit">Submit</Button>
						</div>
					</div>
				</div>
			</Drawer.Content>
		</form>
	</Drawer.Root>
{/if}