<template>
 <HeroRow
  size="md-6"
  text-alignment="center"
  margin="y-3"
 >
  <b-h level="1">
   Welcome back
  </b-h>
  <b-p>Login to manage your account.</b-p>
 </HeroRow>

 <HeroRow size="md-6">
  <BForm
   novalidate
  >
   <b-div margin="b-4">
    <BFormLabel
     for="signupSimpleLoginEmail"
    >
     Your email
    </BFormLabel>

    <BFormInput
     id="signupSimpleLoginEmail"
     display="HeroRow"
     relative-width="100"
     size="lg"
     type="email"
     name="email"
     placeholder="email@site.com"
     aria-label="email@site.com"
     required
    />
    <BValidFeedback>
     Please enter a valid email address.
    </BValidFeedback>
   </b-div>
   <b-div margin="b-4">
    <b-div
     display="flex"
     justify-content="between"
     align-items="center"
    >
     <BFormLabel
      class="form-label"
      for="signupSimpleLoginPassword"
     >
      Password
     </BFormLabel>
     <Anchor
      href="/"
     >
      Forgot Password?
     </Anchor>
    </b-div>

    <b-div
     position="relative"
     display="flex"
     align-items="stretch"
    >
     <BInputGroup>
      <BFormInput
       id="signupSimpleLoginPassword"
       display="HeroRow"
       type="password"
       name="password"
       placeholder="8+ characters required"
       aria-label="8+ characters required"
       required
       minlength="8"
      />
     </BInputGroup>
    </b-div>
    <BValidFeedback>
     Please enter a valid password.
    </BValidFeedback>
   </b-div>

   <b-div
    display="grid"
    margin="b-3"
   >
    <b-button
     color="primary"
     size="lg"
     type="submit"
    >
     Log in
    </b-button>
   </b-div>

   <b-div text-alignment="center">
    <b-p>
     Don't have an account yet?<Anchor href="/">
      Sign up here
     </Anchor>
    </b-p>
   </b-div>
  </BForm>
 </HeroRow>
</template>

<template>
 <HeroRow
  text-alignment="center"
  size="md-8"
  margin="y-3"
 >
  <b-h level="2">
   Welcome to Our Service
  </b-h>
  <b-p>Fill out the form to create your account.</b-p>
 </HeroRow>
 <HeroRow size="md-6">
  <BForm
   novalidate
  >
   <BFormLabel
    for="signupSimpleeSignupEmail"
   >
    Email Address
   </BFormLabel>
   <BFormInput
    id="signUpSimpleSignupEmail"
    type="email"
    display="HeroRow"
    relative-width="100"
    size="lg"
    name="email"
    placeholder="email@site.com"
    aria-label="email@site.com"
    required
   />
   <BValidFeedback>
    Please enter a valid email address.
   </BValidFeedback>

   <BFormLabel
    id="signupSimpleSignupPassword"
   >
    Password
   </BFormLabel>
   <BInputGroup>
    <BFormInput
     id="signupSimpleSignupPassword"
     type="password"
     size="lg"
     name="password"
     placeholder="8+ characters required"
     aria-label="8+ characters required"
     required
    />
   </BInputGroup>

   <BFormLabel
    for="signupSimpleSignupConfirmPassword"
   >
    Confirm Password
   </BFormLabel>
   <BInputGroup>
    <BFormInput
     id="signupSimpleSignupConfirmPassword"
     type="password"
     size="lg"
     placeholder="8+ characters required"
     aria-label="8+ characters required"
     required
    />
   </BInputGroup>
   <BValidFeedback>
    Password does not match the confirm password.
   </BValidFeedback>
   <BFormCheck margin="b-5">
    <BFormCheckInput
     true-value="ok"
     false-value="ng"
    />
    <BFormCheckLabel><small>By submitting this form, I agree to the <Anchor href="/">Privacy Policy</Anchor>.</small></BFormCheckLabel>
   </BFormCheck>

   <b-div
    display="grid"
    margin="b-3"
   >
    <b-button
     color="primary"
     size="lg"
     type="submit"
    >
     Sign Up
    </b-button>
   </b-div>

   <b-div text-alignment="center">
    <b-p>
     Already have an account? <Anchor href="/">
      Log in here
     </Anchor>
    </b-p>
   </b-div>
  </BForm>
 </HeroRow>
</template>

<template>
 <HeroRow
  size="md-6"
  text-alignment="center"
  margin="y-3"
 >
  <b-h level="2">
   Reset Your Password
  </b-h>
  <b-p>Provide your email address below to reset your password.</b-p>
 </HeroRow>

 <HeroRow size="md-6">
  <BForm
   novalidate
  >
   <b-div margin="b-5">
    <b-div
     display="flex"
     justify-content="between"
    >
     <BFormLabel
      for="signupSimpleResetPasswordEmail"
      tabindex="0"
     >
      Email Address
     </BFormLabel>
     <Anchor href="/">
      Return to Login
     </Anchor>
    </b-div>
    <BFormInput
     id="signupSimpleResetPasswordEmail"
     type="email"
     name="email"
     tabindex="1"
     placeholder="Enter your email address"
     aria-label="Enter your email address"
     required
    />
    <BValidFeedback>
     Please enter a valid email address.
    </BValidFeedback>
   </b-div>

   <b-div
    display="grid"
    margin="b-3"
   >
    <b-button
     color="primary"
     type="submit"
     size="lg"
    >
     Send Reset Link
    </b-button>
   </b-div>
  </BForm>
 </HeroRow>
</template>