<script lang="ts">
    import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
    import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
    import Panel from '$lib/components/dashboard/auth/Panel.svelte';
    import Checkbox from '$lib/components/dashboard/elements/Checkbox.svelte';
    import constraints from '$lib/constraints.js';
  
    export let data;
  </script>
  
  <svelte:head>
    <title>YourSitee</title>
  </svelte:head>
  
  <Panel
    title="Join thousands of people already using YourSitee"
    links={[
      { url: 'login', text: 'Login' },
      // { url: 'login/recovery', text: 'Forgot password?' },
    ]}
    button="Register">
    <InputGroup title="Username" required={true}>
      <TextInput
        name="username"
        required
        placeholder="Pick a cool username"
        minlength={constraints.username.min}
        maxlength={constraints.username.max}
        value={data.username ?? ''} />
    </InputGroup>
    <InputGroup title="Email address" required={true}>
      <TextInput
        name="email"
        required
        type="email"
        placeholder="Provide your email"
        minlength={constraints.email.min}
        maxlength={constraints.email.max}
        value={data.email ?? ''} />
    </InputGroup>
    <InputGroup title="Password" required={true}>
      <TextInput
        name="password"
        required
        placeholder="Password"
        type="password"
        minlength={constraints.password.min}
        maxlength={constraints.password.max} />
      <TextInput
        name="password-confirm"
        required
        placeholder="Password again"
        type="password"
        minlength={constraints.password.min}
        maxlength={constraints.password.max} />
    </InputGroup>
    <Checkbox name="accept" required>
      By checking this box, I acknowledge that I have read and agree to abide by the <a href="/terms" target="_blank"
        >Terms of Service</a>
      and the <a href="/privacy" target="_blank">Privacy Policy</a>.</Checkbox>
  </Panel>
  