<script>
  import { goto } from '$app/navigation';
  let content = '';

  // $: console.log("Content is: ", content)

  async function save() {
    const res = await fetch("/api/v1/new", {
      method: 'POST',
      body: JSON.stringify({
        content: content,
      })
    })

    const resp = await res.json()
    console.log(resp)

    if ('Code' in resp && resp.Code === 200) {
		goto('view/' + resp.Data.Id)
    }

  }

</script>


<div class="content">

<h1>New Paste</h1>

<label for="content">Content:</label>
<br />
<br />
<textarea name="content" id="content" cols="80" rows="20" bind:value={content}></textarea>

<br />
<br />
<button type="submit" on:click={save}>Save</button>

</div>



<style>
/* TODO: Figure out why the styles don't get propagated down here
 from the +layout up above */
textarea {
  margin: 0px auto;
  width: 100%;
  max-width: 100%;
  min-width: 75%;
  color: #000;
  background-color: #FFFFEA;
  display: block;
  padding: 10px;
  border: 1px solid;
  line-height: 1.1;
  overflow: auto;
  border: 1px solid;
  padding: 2px;
  font-size: .8em;
  font-family: "Roboto Mono", "Monaco", "Lucida Console", "DejaVu Sans Mono", "monospace";
}


</style>
