<script>
    import { onMount } from 'svelte';
    import { slide, fade } from 'svelte/transition';
    import { invoke } from '@tauri-apps/api/core';

    import AwsCredential from './credentials/AwsCredential.svelte';
    import Icon from '../ui/Icon.svelte';
    import Nav from '../ui/Nav.svelte';

    let show = false;

    let records = []
    async function loadCreds() {
        records = await invoke('list_credentials');
        console.log(records);
    }
    onMount(loadCreds);

    function newCred() {
        console.log('hello!');
        records.push({
            id: crypto.randomUUID(),
            name: '',
            is_default: false,
            credential: {type: 'AwsBase', AccessKeyId: '', SecretAccessKey: ''},
            isNew: true,
        });
        records = records;
    }
</script>


<Nav>
    <h1 slot="title" class="text-2xl font-bold">Credentials</h1>
</Nav>

<div class="max-w-xl mx-auto flex flex-col gap-y-4 justify-center">
    <div class="divider">
        <h2 class="text-xl font-bold">AWS Access Keys</h2>
    </div>

    {#if records.length > 0}
        <div class="rounded-box border-2 border-neutral-content/30 divide-y-2 divide-neutral-content/30">
            {#each records as record (record.id)}
                <AwsCredential {record} on:update={loadCreds} />
            {/each}
        </div>
        <button class="btn btn-primary btn-wide mx-auto" on:click={newCred}>
            <Icon name="plus-circle-mini" class="size-5" />
            Add
        </button>
    {:else}
        <div class="flex flex-col gap-6 items-center rounded-box border-2 border-dashed border-neutral-content/30 p-6">
            <div>You have no saved AWS credentials.</div>
            <button class="btn btn-primary btn-wide mx-auto" on:click={newCred}>
                <Icon name="plus-circle-mini" />
                Add
            </button>
        </div>
    {/if}

</div>