<script>
   import Cleave from "../../cleave"
   import {
      onMount
   } from 'svelte';

   export let error;
   export let label;
   export let value;
   export let length = 6;

   let input;
   onMount(() => {
      const cleaveCustom = new Cleave(input, {
         blocks: [length / 2, length / 2],
         delimiter: ' ',
         numericOnly: true
      });
   })
</script>

<style>
   .error {
      color: var(--error);
      margin-top: 4px;
   }
</style>

<div class="floating group">
   <input bind:this={input} autofocus bind:value={value}>
   <span class="highlight"></span>
   <span class="bar"></span>
   <label>Code</label>
   <div class="error" style={!error ? "display: none;" : "" }>{error}</div>
</div>