<script lang="ts">
  const {
    n,
    edit = false,
    title = ''
  }: {
    n?: number;
    edit?: boolean;
    title: string;
  } = $props();
</script>

{#if n && !edit}
  <div class="col-auto my-3">
    <h3>#{n} {title}</h3>
  </div>
{:else if n}
  <form method="POST">
    <div class="flex">
      <div>
        <h3>#{n}</h3>
      </div>
      <div class="grow">
        <input class="input" type="text" name="new_discussion_name" value={title} />
      </div>
      <div class="col col-auto">
        <button class="btn btn-primary">Ok</button>
      </div>
    </div>
  </form>
{:else}
  <div class="my-3">
    <input
      class="input w-full"
      type="text"
      name="new_discussion_name"
      value={title}
      placeholder="Discussion title" />
  </div>
{/if}