<script>
   import ToList from "./toList.svelte";

   const states = {
      approve: 1,
      enter: 2
   }
   let state = states.approve;

   let error = "";
   let code = "";
   export let number = "+4915...320";
   //export let finish;

   function validateCode() {

   }

   function sendCode() {
      // Send request to Server
      state = states.enter;
      //finish()
   }
</script>


<style>
   :root {
      --error: red;
   }

   .error {
      color: var(--error);
   }
</style>

<h3>SMS</h3>
{#if state === states.approve}
   <p>Send SMS to {number}</p>
   <button class="btn" on:click={sendCode}>Send</button>
{:else}
   <p>A code was sent to you. Please enter</p>
   <input type="number" placeholder="Code" bind:value={code}  />
   <button on:click={validateCode}>Send</button><br>
   <a href="# " on:click|preventDefault={() => state = states.approve}>Not received?</a>
{/if}
<div class="error">{error}</div>

<ToList {finish}/>