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

  export let data: {
    owner: string;
    repo: string;
    login: string;
    unique: number;
    token: string;
  };
  console.log('data', data);
</script>

<div class="p-3">
  <Nav user={data.owner} repo={data.repo} link={true} />
  <form action="/api/discussion/{data.owner}/{data.repo}/new" method="POST">
    <input type="hidden" name="token" value={data.token} />
    <div class="pt-3">
      <Title />
    </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>