<script lang="ts">
  import type { PageData } from './$types';
  import Lock from '../Lock.svelte';
  import Trash from '../Trash.svelte';

  export let data: PageData;

  console.log('data', data);
</script>

<h1>Repositories</h1>
<div class="py-5 flex">
  {#if Object.keys(data.repos).length}
    <ul class="me-auto flex flex-col gap-3">
      {#each Object.keys(data.repos) as repo}
        <li class="flex w-full justify-between gap-10">
          <a id="repo-{repo}" href="/{data.login}/{repo}">{repo}</a>
          {#if data.repos[repo].private}
            <Lock />
          {/if}
          <button
            class="btn btn-sm mx-3 text-error"
            name="repo"
            value={repo}
            aria-label="Delete"
            onclick={() =>
              (document.getElementById(`del_${repo}`) as HTMLDialogElement).showModal()}>
            <Trash class_="size-5" />
          </button>
          <dialog id="del_{repo}" class="modal">
            <div class="modal-box">
              <h3 class="text-lg font-bold">Delete a repository</h3>
              <p class="py-4">
                If you are serious about deleting <span class="font-mono text-primary">{repo}</span
                >, please type its name here:
              </p>
              <form method="POST" action="/api/settings/repo/delete">
                <input type="hidden" name="token" value={data.token} />
                <input type="text" class="input w-full my-3" name="name" />
                <div class="modal-action">
                  <button class="btn">Close</button>
                  <button type="submit" class="btn btn-warning">Ok</button>
                </div>
              </form>
            </div>
          </dialog>
        </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>