<script>
    import { applyAction, enhance } from "$app/forms";
    import { page } from "$app/stores";
    import toasts, { addToast } from "$lib/memory/toast";

  /**
   * @type {{
   *  categories: import("$types/base").Category[],
   * }}
   */
  export let data;
</script>

<style lang="scss">
  .composeForm {
    display: flex;
    flex-flow: column nowrap;
    gap: 32px;
  }

  .formContent {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    gap: 16px;
  }

  .title {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    justify-content: start;
    width: 100%;
    gap: 16px;
  }

  .top {
    display: flex;
    flex-flow: row;
    gap: 16px;
    width: 100%;
  }

  #category {
    width: 100%;
  }

  #content {
    resize: vertical;
  }

  .labelInput {
    display: flex;
    flex-flow: column;
    width: 100%;

    > label {
      width: min-content;
    }

    &.shrink {
      max-width: 250px;
    }
  }
</style>

<svelte:head>
  <link rel="stylesheet" href="/css/form.scss">
</svelte:head>

<form action="/compose" method="post" class="composeForm" use:enhance>
  <div class="title">
    <h1 class="typeHead">Compose</h1>
    <span>your voice ~ your post</span>
  </div>
  
  <div class="formContent">
    <div class="top">
      <div class="labelInput">
        <label for="name">Title</label>
        <input type="text" name="name" id="name" placeholder="your new topic...">
      </div>
  
      <div class="labelInput shrink">
        <label for="category">Category</label>
        <select name="category" id="category">
          {#each data.categories as category}
          <option value={category.id}>{category.name}</option>
          {/each}
        </select>
      </div>
    </div>
  
    <div class="labelInput">
      <label for="content">Content</label>
      <textarea name="content" id="content" rows="4" placeholder="write something nice..."></textarea>
    </div>
  </div>

  <button type="submit" class="typeTitle">Post!</button>
</form>
