<script>
  import Island from '$lib/islands/island.svelte';
  import { ql } from '$lib/stores/quick-links.js';
  export let variables = {
    title: 'Quick Links'
  };
</script>

<Island {variables}>
  {#if $ql.length === 0}
    <p>Go to <a href="/more/settings">settings</a> to add your Quick Links</p>
  {/if}
  <div class="buttons">
    {#each $ql as link}
      {#if link.length === 3}
        <a class="link" href="/ldb?station={link}">
          {link.toUpperCase()}
        </a>
      {:else if link.length === 4}
        <a class="link" href="/train?headcode={link}">
          {link.toUpperCase()}
        </a>
      {/if}
    {/each}
  </div>
</Island>

<style>
  .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: auto;
    padding-top: 5px;
  }
  .link {
    flex: 1;
    width: 20%;
    min-width: 50px;
    margin: 5px;
    border: none;
    border-radius: 20px;
    padding: 5px;
    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    background-color: var(--main-bg-color);
    color: var(--link-color);
  }
</style>
