<script lang="ts">
  import Nav from '../Nav.svelte';
  import Tabs from '../Tabs.svelte';
  import { colors } from './colors';
  import ColorPicker from './ColorPicker.svelte';
  import Permission from './Permission.svelte';
  import type { PageData } from './$types';
  export let data: PageData;
  let newTagName = '';
  let newTagColor = colors[0];
</script>

<div class="p-3">
  <Nav user={data.owner} repo={data.repo} link={true} />
  <Tabs user={data.owner} repo={data.repo} active="admin" />
  <div class="pt-5">
    <h2>Permissions</h2>
    <Permission
      login="Everybody"
      owner={data.owner}
      repo={data.repo}
      perms={data.is_private ? 0 : 3}
      everybody={true}
      token={data.token}
      n={0} />
    {#each data.permissions as p, n}
      <Permission
        login={p.login}
        owner={data.owner}
        repo={data.repo}
        perms={p.perm}
        token={data.token}
        n={n + 2} />
    {/each}
    <Permission owner={data.owner} repo={data.repo} login="" perms={3} token={data.token} n={1} />
  </div>
  <div class="pt-10">
    <h2>Discussion tags</h2>
    {#if data.tags?.length}
      {#each data.tags as tag, n}
        <ColorPicker
          owner={data.owner}
          repo={data.repo}
          id={tag.id}
          bind:name={tag.name}
          bind:tagColor={tag.color}
          token={data.token}
          {n} />
      {/each}
    {/if}
    <ColorPicker
      owner={data.owner}
      repo={data.repo}
      bind:name={newTagName}
      bind:tagColor={newTagColor}
      token={data.token} />
  </div>
</div>