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

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

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

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

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