<script lang="javascript">
  import { marked } from "marked";

  let value = $state(`# **H**eading 1
This is a paragraph that I need to put in *here is some italics*
1. This is a list
2. This is a second list
3. 

## Heading 2
---
**Bold**

Regular; hmm double enter gets a new 

> This is a quote
> This is starting to work
> It will only line over on width basis I guess that makes sense
`);

  // $inspect("n", value);
</script>

<svelte:head>
  <title></title>
  <meta name="description" content="" />
</svelte:head>

<section>
  <div>
    <h1>Editor</h1>
    <form method="POST">
      <div>
        <label>
          <p>Title</p>
          <input required type="text" name="title" />
        </label>
        <label>
          <p>URI</p>
          <input required type="text" name="uri" />
        </label>
      </div>
      <textarea name="body" bind:value></textarea>
      <button>Post</button>
    </form>
  </div>
  <div id="preview">
    <h1>Preview</h1>
    <div>
      {@html marked.parse(value)}
    </div>
  </div>
</section>

<style lang="scss">
  @use "/src/app.scss" as *;

  section {
    width: 100%;
    display: flex;
    gap: 1rem;
    div {
      flex-basis: 45%;
      margin: 0 auto;
      form {
        display: flex;
        flex-direction: column;
        div {
          gap: 1rem;
          display: flex;
        }
        label {
          display: flex;
          margin: 1rem 0;
          gap: 1rem;
          input {
            background: $green-42;
            color: $yellow;
            border: solid 3px $green;
            border-radius: 5px;
            &:focus-visible {
              outline: none;
            }
          }
        }
        textarea {
          resize: none;
          width: 100%;
          height: 40rem;
          line-height: 1.5;
          border: 1px solid $green;
          border-radius: 5px;
          background: $green-42;
          color: $yellow;
          font-family: "Garamond";
          &:focus-visible {
            outline: none;
          }
        }
        button {
          padding: 0.25rem 0.75rem;
          margin-top: 1rem;
          background-color: $green-42;
          color: $yellow;
          border: solid 3px $green;
          border-radius: 5px;
          align-self: center;
        }
      }
    }

    #preview {
      :global(h1) {
        :global(strong) {
          font-family: "Initials";
          font-size: 1.5rem;
          font-weight: 500;
        }
        text-align: center;
      }
      :global(hr) {
        color: $green;
      }
      :global(blockquote) {
        background: $green-42;
        border-left: 1rem solid $green;
        padding: 0.5rem 1rem;
        &:before {
          color: $orange;
          content: open-quote;
          font-size: 1.5rem;
          line-height: 0.1rem;
          vertical-align: -0.9rem;
        }
        &:p {
          display: inline;
        }
      }
    }
  }
</style>
