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

   let error = "";
   let code = "";
   export let device = "Handy01";
   export let deviceId = "";

   export let finish;

   async function requestPush() {

      // Push Request
   }
</script>


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

   .windows8 {
      position: relative;
      width: 56px;
      height: 56px;
      margin: 2rem auto;
   }

   .windows8 .wBall {
      position: absolute;
      width: 53px;
      height: 53px;
      opacity: 0;
      transform: rotate(225deg);
      -o-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      -webkit-transform: rotate(225deg);
      -moz-transform: rotate(225deg);
      animation: orbit 5.7425s infinite;
      -o-animation: orbit 5.7425s infinite;
      -ms-animation: orbit 5.7425s infinite;
      -webkit-animation: orbit 5.7425s infinite;
      -moz-animation: orbit 5.7425s infinite;
   }

   .windows8 .wBall .wInnerBall {
      position: absolute;
      width: 7px;
      height: 7px;
      background: rgb(0, 140, 255);
      left: 0px;
      top: 0px;
      border-radius: 7px;
   }

   .windows8 #wBall_1 {
      animation-delay: 1.256s;
      -o-animation-delay: 1.256s;
      -ms-animation-delay: 1.256s;
      -webkit-animation-delay: 1.256s;
      -moz-animation-delay: 1.256s;
   }

   .windows8 #wBall_2 {
      animation-delay: 0.243s;
      -o-animation-delay: 0.243s;
      -ms-animation-delay: 0.243s;
      -webkit-animation-delay: 0.243s;
      -moz-animation-delay: 0.243s;
   }

   .windows8 #wBall_3 {
      animation-delay: 0.5065s;
      -o-animation-delay: 0.5065s;
      -ms-animation-delay: 0.5065s;
      -webkit-animation-delay: 0.5065s;
      -moz-animation-delay: 0.5065s;
   }

   .windows8 #wBall_4 {
      animation-delay: 0.7495s;
      -o-animation-delay: 0.7495s;
      -ms-animation-delay: 0.7495s;
      -webkit-animation-delay: 0.7495s;
      -moz-animation-delay: 0.7495s;
   }

   .windows8 #wBall_5 {
      animation-delay: 1.003s;
      -o-animation-delay: 1.003s;
      -ms-animation-delay: 1.003s;
      -webkit-animation-delay: 1.003s;
      -moz-animation-delay: 1.003s;
   }



   @keyframes orbit {
      0% {
         opacity: 1;
         z-index: 99;
         transform: rotate(180deg);
         animation-timing-function: ease-out;
      }

      7% {
         opacity: 1;
         transform: rotate(300deg);
         animation-timing-function: linear;
         origin: 0%;
      }

      30% {
         opacity: 1;
         transform: rotate(410deg);
         animation-timing-function: ease-in-out;
         origin: 7%;
      }

      39% {
         opacity: 1;
         transform: rotate(645deg);
         animation-timing-function: linear;
         origin: 30%;
      }

      70% {
         opacity: 1;
         transform: rotate(770deg);
         animation-timing-function: ease-out;
         origin: 39%;
      }

      75% {
         opacity: 1;
         transform: rotate(900deg);
         animation-timing-function: ease-out;
         origin: 70%;
      }

      76% {
         opacity: 0;
         transform: rotate(900deg);
      }

      100% {
         opacity: 0;
         transform: rotate(900deg);
      }
   }

   @-o-keyframes orbit {
      0% {
         opacity: 1;
         z-index: 99;
         -o-transform: rotate(180deg);
         -o-animation-timing-function: ease-out;
      }

      7% {
         opacity: 1;
         -o-transform: rotate(300deg);
         -o-animation-timing-function: linear;
         -o-origin: 0%;
      }

      30% {
         opacity: 1;
         -o-transform: rotate(410deg);
         -o-animation-timing-function: ease-in-out;
         -o-origin: 7%;
      }

      39% {
         opacity: 1;
         -o-transform: rotate(645deg);
         -o-animation-timing-function: linear;
         -o-origin: 30%;
      }

      70% {
         opacity: 1;
         -o-transform: rotate(770deg);
         -o-animation-timing-function: ease-out;
         -o-origin: 39%;
      }

      75% {
         opacity: 1;
         -o-transform: rotate(900deg);
         -o-animation-timing-function: ease-out;
         -o-origin: 70%;
      }

      76% {
         opacity: 0;
         -o-transform: rotate(900deg);
      }

      100% {
         opacity: 0;
         -o-transform: rotate(900deg);
      }
   }

   @-ms-keyframes orbit {
      0% {
         opacity: 1;
         z-index: 99;
         -ms-transform: rotate(180deg);
         -ms-animation-timing-function: ease-out;
      }

      7% {
         opacity: 1;
         -ms-transform: rotate(300deg);
         -ms-animation-timing-function: linear;
         -ms-origin: 0%;
      }

      30% {
         opacity: 1;
         -ms-transform: rotate(410deg);
         -ms-animation-timing-function: ease-in-out;
         -ms-origin: 7%;
      }

      39% {
         opacity: 1;
         -ms-transform: rotate(645deg);
         -ms-animation-timing-function: linear;
         -ms-origin: 30%;
      }

      70% {
         opacity: 1;
         -ms-transform: rotate(770deg);
         -ms-animation-timing-function: ease-out;
         -ms-origin: 39%;
      }

      75% {
         opacity: 1;
         -ms-transform: rotate(900deg);
         -ms-animation-timing-function: ease-out;
         -ms-origin: 70%;
      }

      76% {
         opacity: 0;
         -ms-transform: rotate(900deg);
      }

      100% {
         opacity: 0;
         -ms-transform: rotate(900deg);
      }
   }

   @-webkit-keyframes orbit {
      0% {
         opacity: 1;
         z-index: 99;
         -webkit-transform: rotate(180deg);
         -webkit-animation-timing-function: ease-out;
      }

      7% {
         opacity: 1;
         -webkit-transform: rotate(300deg);
         -webkit-animation-timing-function: linear;
         -webkit-origin: 0%;
      }

      30% {
         opacity: 1;
         -webkit-transform: rotate(410deg);
         -webkit-animation-timing-function: ease-in-out;
         -webkit-origin: 7%;
      }

      39% {
         opacity: 1;
         -webkit-transform: rotate(645deg);
         -webkit-animation-timing-function: linear;
         -webkit-origin: 30%;
      }

      70% {
         opacity: 1;
         -webkit-transform: rotate(770deg);
         -webkit-animation-timing-function: ease-out;
         -webkit-origin: 39%;
      }

      75% {
         opacity: 1;
         -webkit-transform: rotate(900deg);
         -webkit-animation-timing-function: ease-out;
         -webkit-origin: 70%;
      }

      76% {
         opacity: 0;
         -webkit-transform: rotate(900deg);
      }

      100% {
         opacity: 0;
         -webkit-transform: rotate(900deg);
      }
   }

   @-moz-keyframes orbit {
      0% {
         opacity: 1;
         z-index: 99;
         -moz-transform: rotate(180deg);
         -moz-animation-timing-function: ease-out;
      }

      7% {
         opacity: 1;
         -moz-transform: rotate(300deg);
         -moz-animation-timing-function: linear;
         -moz-origin: 0%;
      }

      30% {
         opacity: 1;
         -moz-transform: rotate(410deg);
         -moz-animation-timing-function: ease-in-out;
         -moz-origin: 7%;
      }

      39% {
         opacity: 1;
         -moz-transform: rotate(645deg);
         -moz-animation-timing-function: linear;
         -moz-origin: 30%;
      }

      70% {
         opacity: 1;
         -moz-transform: rotate(770deg);
         -moz-animation-timing-function: ease-out;
         -moz-origin: 39%;
      }

      75% {
         opacity: 1;
         -moz-transform: rotate(900deg);
         -moz-animation-timing-function: ease-out;
         -moz-origin: 70%;
      }

      76% {
         opacity: 0;
         -moz-transform: rotate(900deg);
      }

      100% {
         opacity: 0;
         -moz-transform: rotate(900deg);
      }
   }
</style>

<h3>SMS</h3>

<p>A code was sent to your Device <b>{device}</b></p>

<div class="windows8">
   <div class="wBall" id="wBall_1">
      <div class="wInnerBall"></div>
   </div>
   <div class="wBall" id="wBall_2">
      <div class="wInnerBall"></div>
   </div>
   <div class="wBall" id="wBall_3">
      <div class="wInnerBall"></div>
   </div>
   <div class="wBall" id="wBall_4">
      <div class="wInnerBall"></div>
   </div>
   <div class="wBall" id="wBall_5">
      <div class="wInnerBall"></div>
   </div>
</div>

<div class="error">{error}</div>
<ToList {finish} />