<script lang="ts">
    import Button from '$lib/components/dashboard/elements/Button.svelte';
    import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
    import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
    import Back from '$lib/components/dashboard/auth/Back.svelte';
    import Panel from '$lib/components/dashboard/auth/Panel.svelte';
  
    export let data;
  </script>
  
  <svelte:head>
    <title>YourSitee</title>
  </svelte:head>
  
  <Back />
  {#if !data.code}
    <Panel
      title="Forgot your password?"
      subtitle="No problem at all! Let us send you an email with a recovery link to help you log into your account.">
      <InputGroup title="Email address"><TextInput name="email" placeholder="you@example.com" required /></InputGroup>
      <Button>Send recovery link</Button>
    </Panel>
  {:else}
    <Panel title="Create a new password" action="?/new">
      <InputGroup title="New password"><TextInput name="password" type="password" required /></InputGroup>
      <InputGroup title="Confirm new password"><TextInput name="password-confirm" type="password" required /></InputGroup>
      <Button>Set new password</Button>
    </Panel>
  {/if}
  