<template>
    <div style="position: relative;">
        <!--Eyes-->
        <div class="spinner-border text-success" style="position:absolute; margin-top:10%; margin-left:-15%; width: 5rem; height: 5rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-border text-success" style="position:absolute; margin-top:10%; margin-left:12%; width: 5rem; height: 5rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:10%; margin-left:-12%; width: 1rem; height: 5rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:10%; margin-left:15%; width: 1rem; height: 5rem;">
            <span class="sr-only">Loading...</span>
        </div>



        <!--Mouth-->
        <div class="spinner-grow text-success" style="position:absolute; margin-top:25%; margin-left:-30%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:25%; margin-left:30%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:28%; margin-left:-28%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:28%; margin-left:28%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:30%; margin-left:-26%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:30%; margin-left:26%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:32%; margin-left:-23%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:32%; margin-left:23%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:33%; margin-left:-20%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:33%; margin-left:20%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:34%; margin-left:-17%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:34%; margin-left:17%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:35%; margin-left:-14%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:35%; margin-left:14%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:35%; margin-left:-11%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:35%; margin-left:11%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:35%; margin-left:-8%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:35%; margin-left:8%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:35%; margin-left:-5%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:35%; margin-left:5%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:34%; margin-left:-2%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:34%; margin-left:2%;">
            <span class="sr-only">Loading...</span>
        </div>



        <!--Nose-->
        <div class="spinner-grow text-success" style="position:absolute; margin-top:32%; margin-left:0%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:29%; margin-left:0%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:23%; margin-left:-30px; width: 6rem; height: 5rem;">
            <span class="sr-only">Loading...</span>
        </div>



        <!--Whiskers-->
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-3%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:5%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:24%; margin-left:-4%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:24%; margin-left:6%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:23%; margin-left:-5%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:23%; margin-left:7%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:22%; margin-left:-6%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:22%; margin-left:8%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:21%; margin-left:-7%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:21%; margin-left:9%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:20%; margin-left:-8%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:20%; margin-left:10%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:19%; margin-left:-9%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:19%; margin-left:11%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>


        <!--Whiskers2-->
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-5%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:7%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-7%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:9%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-9%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:11%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-11%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:13%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-13%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:15%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-15%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:17%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-17%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:19%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-19%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:21%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-21%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:23%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-23%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:25%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-25%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:27%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-27%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:29%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-29%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:31%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-31%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:33%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-33%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:35%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:-35%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:25%; margin-left:37%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>



        <!--Whiskers3-->
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:26%; margin-left:-4%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:26%; margin-left:6%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:27%; margin-left:-5%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:27%; margin-left:7%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:28%; margin-left:-6%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:28%; margin-left:8%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:29%; margin-left:-7%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:29%; margin-left:9%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:30%; margin-left:-8%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:30%; margin-left:10%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:31%; margin-left:-9%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:31%; margin-left:11%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:32%; margin-left:-10%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:32%; margin-left:12%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:33%; margin-left:-11%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:33%; margin-left:13%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:34%; margin-left:-12%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:34%; margin-left:14%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:35%; margin-left:-13%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:35%; margin-left:15%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:36%; margin-left:-14%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:36%; margin-left:16%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:37%; margin-left:-15%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:37%; margin-left:17%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:38%; margin-left:-16%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:38%; margin-left:18%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:39%; margin-left:-17%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:39%; margin-left:19%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:40%; margin-left:-18%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:40%; margin-left:20%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-dark" style="position:absolute; margin-top:41%; margin-left:-19%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" style="position:absolute; margin-top:41%; margin-left:21%; width: 1rem; height: 1rem;">
            <span class="sr-only">Loading...</span>
        </div>


        <!--Ears-->
        <div class="spinner-grow text-success" style="position:absolute; margin-top:-2%; margin-left:-26%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:-2%; margin-left:26%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:0%; margin-left:-24%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:0%; margin-left:24%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:2%; margin-left:-22%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:2%; margin-left:22%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:4%; margin-left:-20%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:4%; margin-left:20%;">
            <span class="sr-only">Loading...</span>
        </div>

        <!--Ears2-->
        <div class="spinner-grow text-success" style="position:absolute; margin-top:0%; margin-left:-26%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:0%; margin-left:26%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:2%; margin-left:-26%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:2%; margin-left:26%;">
            <span class="sr-only">Loading...</span>
        </div>

        <div class="spinner-grow text-success" style="position:absolute; margin-top:4%; margin-left:-26%;">
            <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-success" style="position:absolute; margin-top:4%; margin-left:26%;">
            <span class="sr-only">Loading...</span>
        </div>


        <!--Just A Message-->
        <div style="position:absolute; margin-bottom:20%; margin-left:5%;">
            <h2>Loading...</h2>
            <h4>Please wait.</h4>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import Request from '../components/request/request.js';

    export default {
        name: "loading",
        props: ['formData'],
        data: function () {
            return {
                token:this.$route.params.token,
                data:null
            }
        },
        beforeMount() {
            this.data = this.formData;
        },
        mounted(){
            Request.getAxios().post(
                this.$hostname + "/discovery/" + this.token,
                this.data
            ).then((response) => {
                if(response.status == 200)
                    this.$router.push({name: "model", params: {token: this.token}});
                else{
                    alert("Error processing the log. You will be redirected at settings page.");
                    this.$router.push({name: "discovery-settings", params: {token: this.token}});
                }
            })
        }
    }
</script>