<script>
  import IoMdClipboard from 'svelte-icons/io/IoMdClipboard.svelte'
  import IoMdLink from 'svelte-icons/io/IoMdLink.svelte'
  import IoMdAlert from 'svelte-icons/io/IoMdAlert.svelte'
  import { writeText } from 'clipboard-polyfill';
  import { Button, TextField, Loading } from 'attractions';

  let isLoaded = false;
  let error = null;
</script>

<style>
  #clipboard {
    width: 450px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  #theeverything {
    text-align: center;
		max-width: 680px;
		margin: 0 auto;
  }
  .center {
    width: 100%;
    display: flex;
    justify-content: center
  }
</style>

<div id="theeverything">
  <div class="center">
    <div id="clipboard">
      <div style="flex-grow: 1">
        <TextField outline withItem value={window.location.toString()} disabled>
          <div style="width: 16px; height: 16px; display: inline-block" class="item"><IoMdLink/></div>
        </TextField>
      </div>
      <Button outline on:click={() => {writeText(window.location.toString())}}><div style="width: 19px; height: 19px; display: inline-block"><IoMdClipboard/></div></Button>
    </div>
  </div>

  {#if error}
    <div class="center">
      <div id="error">
        <div style="width: 16px; height: 16px; display: inline-block;"><IoMdAlert/></div>
        {error}
      </div>
    </div>
  {/if}

  {#if !isLoaded}
    <br><br><br>
    <Loading/>
  {/if}
</div>