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

    let me = getMe();

    let content = $state("");

    let contentLength = $derived(content.length);

</script>


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

        <label>
            Post to: <!-- TODO autocomplete! -->
            <input />
        </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>
    </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>