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

    let me = getMe();

    let content = $state("");
    let privacy = $state(0);
    let guildName = $state("");
    //let guildInfo = $state(null);
    
    let enablePost = $derived(!!content && !!guildName);
</script>


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

    <label>
      Post to:
      <GuildSelect bind:value={guildName} />
    </label>

    <EditPost bind:content bind:privacy />

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

    <button class="card primary" disabled={!enablePost}>Create</button>
    
  </form>

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

<style>

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


</style>