<script>
  import Modal from "$/client/components/Modal.svelte";
  let modal_open = false;
</script>

<style>
  test-panel {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--color-bg);
    border-radius: var(--border-radius);
    opacity: 100%;
    width: 400px;
  }
</style>

{#if modal_open}
  <Modal on:close={ () => modal_open = false }>
    <test-panel>
      <h1>Modal Open</h1>
      <p>
        You can put anything inside the modal, and it also handles ESC for closing the
        modal by sending an <b>on:close</b> event.
      </p>
      <button on:click={ () => modal_open = false }>CLOSE ME (ESC)</button>
    </test-panel>
  </Modal>
{:else}
<button on:click={ () => modal_open = true }>OPEN MODAL</button>
{/if}

