<script lang="ts">
  let props: {
    login: string;
    owner: string;
    repo: string;
    perms: number;
    everybody?: boolean;
    n: number;
    token: string;
  } = $props();

  const p = [
    'Read',
    'Create discussion',
    'Edit discussion',
    'Tag discussion',
    'Apply changes',
    'Edit channels',
    'Edit tags',
    'Edit permissions'
  ];
</script>

<form method="POST" action="/api/admin/{props.owner}/{props.repo}/permission">
  <input type="hidden" name="token" value={props.token} />
  <div class="flex flex-col mt-10">
    <div>
      <input
        id="login"
        type="text"
        class="input input-sm"
        name={props.everybody ? '' : 'login'}
        value={props.login}
        disabled={props.everybody || props.login == props.owner} />
    </div>
    <div class="flex flex-wrap gap-5 mt-3">
      {#each p as label, k}
        <div>
          <input
            class="checkbox checkbox-sm"
            type="checkbox"
            name="p{k}"
            disabled={props.login == props.owner}
            checked={!!(props.perms & (1 << k))}
            id="{props.n}-{k}" />
          <label class="label ms-1" for="{props.n}-{k}"> {label} </label>
        </div>
      {/each}
    </div>
    <div class="mt-5">
      <button class="btn btn-sm btn-secondary" disabled={props.login == props.owner}>Ok</button>
    </div>
  </div>
</form>