---
// flags.json entries have no `code` property — value="" and never `selected`.

import FormFooter from '@ui/FormFooter.astro'
import SingleLayout from '@shared/layouts/SingleLayout.astro'
import Button from '@ui/Button.astro'
import FormGroup from '@ui/FormGroup.astro'
import flags from '@data/flags.json'
import CardTitle from '@ui/CardTitle.astro'
---

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

      <FormGroup label="Country" for="verify-country">
        <select class="form-select" id="verify-country" autocomplete="country-name">
          {flags.map((country) => <option value={country.name}>{country.name}</option>)}
        </select>
      </FormGroup>

      <FormGroup label="Your Phone Number" for="verify-phone" class="mb-4">
        <div class="input-group">
          <span class="input-group-text">+1</span>
          <input type="tel" class="form-control" id="verify-phone" placeholder="Enter phone number" autocomplete="tel-national" />
        </div>
      </FormGroup>

      <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>

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