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

  export let data: PageData;

  console.log('data', data);

  let m: any = null;

  onDestroy(() => {
    if (m) {
      m.hide();
    }
  });
</script>

<h1>SSH Keys</h1>
<div class="py-4">
  <ul class="list-group list-group-flush px-0">
    {#each Object.entries(data.ssh_keys) as [i, key]}
      <li class="list-group-item py-5 px-0">
        <form action="/api/ssh/delete" method="post" id="ssh-delete-{i}">
          <input type="hidden" name="token" value={data.token} />
        </form>
        <form class="d-flex flex-column" action="/api/settings/ssh" method="post">
          <input type="hidden" name="id" value={i} />
          <input type="hidden" name="token" value={data.token} />
          <textarea class="textarea font-mono key w-full" name="key">{key}</textarea>
          <div class="mt-2 ms-auto">
            <button class="btn btn-sm btn-error" form="ssh-delete-{i}" name="delete" value={i}>
              <span class="icon-[tdesign--delete-1] w-4 h-4"></span> Delete
            </button>
            <button class="btn btn-sm btn-primary">Update</button>
          </div>
        </form>
      </li>
    {/each}
    <li class="list-group-item py-5 px-0">
      <form class="d-flex flex-column" action="/api/settings/ssh/add" method="post">
        <input type="hidden" name="token" value={data.token} />
        <textarea class="textarea font-mono key w-full" name="key" placeholder="new SSH public key"
        ></textarea>
        <div class="mt-2 ms-auto">
          <button class="btn btn-sm btn-primary">Add</button>
        </div>
      </form>
    </li>
  </ul>
</div>

<style>
  .key {
    font-size: 80%;
    min-height: 120px;
  }
</style>