<script lang="ts">
  import logo from './assets/images/logo-universal.png'
  import Instances from './Instances.svelte'
	import Loading from './Loading.svelte'
  import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
	import { onMount } from 'svelte'
	import { loading } from './global.ts'
	import { slide } from 'svelte/transition'

	let width: int = 10
	 	
		onMount(() => {
			CheckPrerequisites().then(() => $loading = false)
		})


</script>

<main>
  <img alt="Wails logo" id="logo" src="{logo}">
	{#if $loading}
		<div transition:slide="{{duration:100}}">
			<Loading />
		</div>
	{:else}
		<div transition:slide="{{duration:100}}">
  		<Instances />
		</div>
	{/if}
</main>

<style>

  #logo {
    display: block;
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 10% 0 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
  }

</style>
