---
import FormFooter from '@ui/FormFooter.astro'
import InputGroup from '@ui/InputGroup.astro'
import FormGroup from '@ui/FormGroup.astro'
import Strength from '@ui/Strength.astro'
import CardTitle from '@ui/CardTitle.astro'
---

<form class="card card-md" action="./" method="get" novalidate>
  <div class="card-body">
    <CardTitle as="h1" class="text-center mb-4">Create new account</CardTitle>

    <FormGroup label="Name" for="signup-name">
      <input type="text" class="form-control" placeholder="Enter name" id="signup-name" autocomplete="name" required />
    </FormGroup>
    <FormGroup label="Email address" for="signup-email">
      <input type="email" class="form-control" placeholder="Enter email" id="signup-email" autocomplete="email" required />
    </FormGroup>
    <FormGroup label="Password" for="signup-password">
      <InputGroup type="password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat placeholder="Password" id="signup-password" autocomplete="new-password" required />
      <Strength />
    </FormGroup>
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="signup-terms" required />
      <label class="form-check-label d-inline" for="signup-terms">Agree the</label>
      <a href="./terms-of-service.html">terms and policy</a>.
    </div>

    <FormFooter>
      <button type="submit" class="btn btn-primary w-100">Create new account</button>
    </FormFooter>
  </div>
</form>

<div class="text-center text-secondary mt-3">
  Already have account? <a href="./sign-in.html">Sign in</a>
</div>