<script lang="ts">
  import { DEFAULT_CONFIG, loadConfig } from "../config.ts";
  import createDebug from "debug";
  import "../css/themes/catppuccin-mocha.scss";
  import "../css/style.scss";
  import { parseJwt } from "../jwt.ts";
  import HeartIcon from "../icons/HeartIcon.svelte";
  import Popup from "../components/ui/Popup.svelte";
  import Button from "../components/ui/Button.svelte";
  import TextInput from "../components/ui/TextInput.svelte";
  import PasswordInput from "../components/ui/PasswordInput.svelte";
  import tex_hearty from "../assets/hearty.svg";
  import tex_hub from "../assets/hub_off.svg";

  let config = DEFAULT_CONFIG;
  // Top-level await. Sets the default config, and overwrites it when the new config is avail. Thanks reactivity!
  (async () => {
    config = await loadConfig();
  })();

  const logger = createDebug("main");
  logger(
    `Hello, world! StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) at your service!`,
  );
  logger("Current view: ShipEditor.svelte");
</script>

<span style="position: absolute; left: 0px; top: 0px; min-width: 20px; height: 100%; width: 250px; background-color: var(--bg-secondary-2)">
  <ul style="list-style-type: none; width: 100%; padding: 0px; display: inline-block;
                text-align: center; font-size: 48px; margin-block-start: 0px; margin-block-end: 0px;">
    <li style="padding-top: 20px;">
      <img src={tex_hearty} style="width: 50%" />
    </li>
    <li style="padding-top: 20px; vertical-align: middle; text-align: center">
      <span style="position: relative; display: inline-block; height: 2em; line-height: 2em">2</span>
      <img src={tex_hub} style="width: 2em" />
    </li>
  </ul>
</span>
<span style="position: absolute; bottom: 0px; right: 0px; width: calc(100% - 250px); height: 20%; background-color: var(--bg-secondary-1)">

</span>
<canvas id="shipeditor" />

<span class="footer-left">
  StarKingdoms Client {APP_VERSION} ({COMMIT_HASH})
</span>
<span class="footer-right">
  Made with <HeartIcon class="footer-icon" /> by the StarKingdoms team
</span>