---
import SingleLayout from '@shared/layouts/SingleLayout.astro';
import Button from '@shared/components/Button.astro';
import flags from '@data/flags.json';

// Liquid: {% if country.code == 'US' %} selected{% endif %} — flags.json entries
// have no `code` property, so the reference renders value="" and never `selected`.
// We mirror that output exactly.
---

<SingleLayout title="2-Step Verification">
	<form
		class="card card-md"
		action="./2-step-verification-code.html"
		method="get"
		autocomplete="off"
		novalidate
	>
		<div class="card-body">
			<h2 class="card-title text-center mb-4">2-Step Verification</h2>

			<div class="mb-3">
				<label class="form-label">Country</label>
				<select class="form-select">
					{flags.map((country) => <option value="">{country.name}</option>)}
				</select>
			</div>

			<div class="mb-4">
				<label class="form-label">Your Phone Number</label>
				<div class="input-group">
					<span class="input-group-text">+1</span>
					<input type="text" class="form-control" placeholder="Enter phone number" />
				</div>
			</div>

			<div class="text-secondary">
				Security is critical in Tabler. to help keep your account safe, we'll
				text you a verification code when you sign in on a new device
			</div>

			<div class="form-footer">
				<Button element="button" type="submit" text="Send code" block color="primary" />
			</div>
		</div>
	</form>
</SingleLayout>