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

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

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