<script lang="ts">
  import HoveringContentBox from "../../components/HoveringContentBox.svelte";
  import Theme from "../../components/theme/Theme.svelte";

  export let loading = true;
  export let appName = "";
  export let permissions: any[] = [];
  export let accept: () => void;

  const base_perm = {
    name: "Access Profile",
    description:
      "Access your identity and some basic informations like your username",
  };

  $: view_perms = [base_perm, ...permissions];

  $: console.log({ loading, appName, permissions, accept });

  function deny() {
    window.close();
  }
</script>

<Theme dark={false}>
  <HoveringContentBox title="Authorize" {loading} hide>
    <div class="title margin">
      <h2 style="font-weight: normal">
        Grant
        <span id="hostname" style="font-weight: bold;">{appName}</span>
        the following permissions?
      </h2>
    </div>

    <ul class="list list-divider">
      {#each view_perms as permission (permission._íd)}
        <li class="permission">
          <h3>{permission.name}</h3>
          <p>{permission.description}</p>
        </li>
      {/each}
    </ul>

    <div>
      <div style="text-align: right;">
        <button class="btn btn-primary" on:click={accept}>Allow</button>
        <button class="btn btn-primary" on:click={deny}>Deny</button>
      </div>
    </div>
  </HoveringContentBox>
</Theme>

<style>
  .permission > h3 {
  }

  .permission > p {
  }
</style>
