vigil/src/routes/create/+page.svelte

<script lang="ts">
    import Centered from "$lib/Centered.svelte";
    import { getMe } from "$lib/globals.svelte";
    import GuildSelect from "$lib/GuildSelect.svelte";
    import PrivacySelect from "$lib/PrivacySelect.svelte";
    import SLayout from "$lib/SLayout.svelte";
    import { RiErrorWarningLine } from "svelte-remixicon";

    let me = getMe();

    let content = $state("");
    let privacy = $state(0);

    let contentLength = $derived(content.length);

</script>


{#if me}
<SLayout title="New post">
  <form method="POST" class="card">
    <p>Posting as <strong>@{me.username}</strong></p>

    <label>
      Post to: <!-- TODO autocomplete! -->
      <GuildSelect />
    </label>

    <label>
      <input type="text" name="title" maxlength=256 placeholder="An interesting title"/>
    </label>
    
    <label>
      <textarea bind:value={content}></textarea>
      <output><small class="faint">{contentLength} chars</small></output>
    </label>

    <PrivacySelect bind:value={privacy} />
    {#if privacy === 0}
      <span class="warning"><RiErrorWarningLine /> Your post will be PUBLIC!</span>
    {/if}

    <button class="card primary" disabled>Create</button>
    
  </form>

  {#snippet left()}
      ...
  {/snippet}
  
  {#snippet right()}
      ...
  {/snippet}
</SLayout>
{:else}
<Centered>
  You must be <a href="login">logged in</a> in order to create posts.
</Centered>
{/if}

<style>

textarea {
    width: 100%;
    background-color: inherit;
    color: var(--text-primary);
    min-height: 10em;
    margin-top: 4px;
}

form {
    display: flex;
    flex-direction: column;
}

input[name="title"] {
    width: 100%;
    margin: 6px 0;
    font-size: 1.25em;
}
</style>