<script lang="ts">
  import Nav from '../../Nav.svelte';
  import Title from '../Title.svelte';
  import Comment from '../Comment.svelte';

  const {
    data
  }: {
    data: {
      owner: string;
      repo: string;
      login: string;
      unique: number;
      token: string;
    };
  } = $props();
</script>

<div class="p-3">
  <Nav user={data.owner} repo={data.repo} link={true} path={[]} />
  <form action="/api/discussion/{data.owner}/{data.repo}/new" method="POST">
    <input type="hidden" name="token" value={data.token} />
    <div class="pt-3">
      <Title title="" edit={true} />
    </div>
    <Comment
      owner={data.owner}
      repo={data.repo}
      edit={true}
      token={data.token}
      uniq={data.unique}
      login={data.login} />
    <div class="p-3 flex justify-center">
      <input type="hidden" name="uniq" value={data.unique} />
      <button type="submit" id="create_discussion" class="btn btn-primary"
        >Create discussion</button>
    </div>
  </form>
</div>

<style>
  :global(.profile-picture-small) {
    width: 4em;
  }
</style>