<script lang="ts">
  import logo from './assets/images/fc-logo.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'
    import Navbar from './Navbar.svelte';

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


</script>

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

<style>
	:root{
		font-size: 16px;
		--text-primary: #b6b6b6;
		--text-secondary: #ececec;
		--bg-primary: #23232e;
		--bg-secondary: #141418;
		background-color: var(--bg-secondary);
	}

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

  body{
	display: flex;
	flex-direction: column;
	margin-left: 5rem;
	
  }

  main{
	background-color: var(--bg-secondary);
  }
  .central{
	background-color: var(--bg-secondary);
  }



</style>
