<script lang="ts">
  import type { PageData } from './$types';
  import { enhance } from '$app/forms';

  export let data: PageData;

  console.log('data', data);

  async function delRepo(ev: { cancel: () => void }, name: string) {
    if (!window.confirm(`Kill ${name}?`)) {
      ev.cancel();
    }
  }
</script>

<h1>Repositories</h1>
<div class="py-5">
  {#if Object.keys(data.repos).length}
    <ul class="">
      {#each Object.keys(data.repos) as repo}
        <li class="">
          <form
            method="POST"
            action="/api/settings/repo/delete"
            use:enhance={(ev) => delRepo(ev, repo)}>
            <input type="hidden" name="token" value={data.token} />
            <a id="repo-{repo}" href="/{data.login}/{repo}">{repo}</a>
            {#if data.repos[repo].private}
              <i class="bi bi-lock-fill" style="color:#aaa"></i>
            {/if}
            <button class="mx-3" name="repo" value={repo} aria-label="Delete">
              <span class="icon-[tdesign--delete-1] w-4 h-4 text-error"></span>
            </button>
          </form>
        </li>
      {/each}
    </ul>
  {:else}
    <p>You haven't created any repository yet</p>
  {/if}
</div>
<h2>Create a repository</h2>
<div class="py-4">
  <form method="post" action="/api/settings/repo/add">
    <input type="hidden" name="token" value={data.token} />
    <ul class="list-group list-group-flush">
      <li class="flex content-between items-center gap-5">
        <input
          type="text"
          name="name"
          placeholder="Repository name"
          class="input input-sm col"
          autocomplete="off" />
        <div>
          <input type="checkbox" class="checkbox checkbox-sm" id="private" name="private" /><label
            class="ms-2 label"
            for="private">Private</label>
        </div>
        <button id="create_repository" class="btn btn-sm btn-primary">Create</button>
      </li>
    </ul>
  </form>
</div>