<script lang="ts">
// *** Import Svelte core
import { onMount } from 'svelte';

// import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
// const modalStore = getModalStore();

// *** Import Aether core variables and functions
import { ae_util } from '$lib/ae_utils';
// import { ae } from 'aether_npm_lib';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';

export let class_li: string = '';

onMount(() => {
    console.log('** Component Mounted: ** List - Sponsorships Obj');
});
</script>


<section class="svelte_component ae_section ae_list list__sponsorship_obj sponsorship_obj_li {class_li} ae_h_scrollfix">
{#if $slct.sponsorship_obj_li}
<table class="table table-compact table-hover">
    <thead>
        <tr>
            <th>Options</th>
            <th>Name</th> <!-- This is the name of the organization or person -->
            <th>Level</th>
            {#if $ae_loc.administrator_access}<th>Paid</th>{/if}
            <th>Guests</th>
            <th>
                <!-- Show what POC (Point of Contact) stands for when hovering -->
                <abbr title="Point of Contact" class="ae_label">POC</abbr>
            </th>
            <th>Created</th>
            <th>Updated</th>
        </tr>
    </thead>
    <tbody>
{#each $slct.sponsorship_obj_li as ae_sponsorship_obj, index}
    <tr
        id={`ae_sponsorship_id__${ae_sponsorship_obj.sponsorship_id_random}`}
        class="ae_object sponsorship_obj"
        >

        <td class="ae_options sponsorship_obj__options">
            <div class="btn-group variant-filled">
            <button
                on:click={() => {
                    $slct.sponsorship_id = ae_sponsorship_obj.sponsorship_id_random;
                    $slct.sponsorship_obj = ae_sponsorship_obj;
                    console.log(`Selected Sponsorship ID: ${$slct.sponsorship_id}`);
                    console.log(`Selected Sponsorship Object:`, $slct.sponsorship_obj);
                    // $slct_trigger = 'load__sponsorship_obj';

                    $ae_loc.mod.sponsorships.show_main__options = true;
                    $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
                    $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
                    $ae_loc.mod.sponsorships.show_view__sponsorship_obj = true;
                    $slct_trigger = 'show_view__sponsorship_obj';
                }}
                class="variant-soft-primary"
                title={`Open to see details: ${ae_sponsorship_obj.name}`}
                >
                <span class="fas fa-envelope-open mx-1"></span>
                <!-- <span class="fas fa-info-circle"></span> -->
                View
            </button>

            {#if $ae_loc.trusted_access}
                <button
                    on:click={() => {
                        $slct.sponsorship_id = ae_sponsorship_obj.sponsorship_id_random;
                        $slct.sponsorship_obj = ae_sponsorship_obj;
                        console.log(`Selected Sponsorship ID: ${$slct.sponsorship_id}`);
                        console.log(`Selected Sponsorship Object:`, $slct.sponsorship_obj);
                        // $slct_trigger = 'load__sponsorship_obj';

                        $ae_loc.mod.sponsorships.show_main__options = true;
                        $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
                        $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
                        $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
                        $slct_trigger = 'show_edit__sponsorship_obj';
                    }}
                    class="variant-soft-warning"
                    title={`Edit sponsorship: ${ae_sponsorship_obj.name}`}
                    >
                    <span class="fas fa-edit mx-1"></span> Edit
                </button>
            {/if}
            </div>
        </td>

        <td class="ae_value sponsorships__name">{ae_sponsorship_obj.name}</td>

        <td class="">
            <span class="fas fa-gem"></span>
            {#if ae_sponsorship_obj.level_num}{ae_sponsorship_obj.level_num}{/if}
            {#if ae_sponsorship_obj.level_str}{ae_sponsorship_obj.level_str}{/if}
        </td>

        {#if $ae_loc.administrator_access}
        <td class="text-center">
            {#if ae_sponsorship_obj.paid}
                <!-- Show checkmark -->
                <span class="fas fa-check"
                    title="Paid"></span>
            {:else}
                <!-- Show X or cross -->
                <span class="fas fa-times"
                    title="Not Paid"></span>
            {/if}
            <!-- {#if ae_sponsorship_obj.amount}
                <span class="ae_value sponsorships__amount">${ae_sponsorship_obj.amount/100}</span>
            {/if} -->
        </td>
        {/if}

        <td class="text-center">
            {#if ae_sponsorship_obj.guest_li_json}
                <span class="fas fa-list-ol"></span> {ae_sponsorship_obj.guest_li_json.length}
            {:else}
                <!-- <span class="fas fa-list-ol"></span> -->
                -- None --
            {/if}
        </td>

        <td><span class="ae_flex ae_flex_justify_around">
            {#if ae_sponsorship_obj.poc_json}
                <span>
                    <span class="fas fa-user"></span> {ae_sponsorship_obj.poc_json.full_name ?? ae_sponsorship_obj.poc_json.given_name}
                </span>
                <a href="mailto:{ae_sponsorship_obj.poc_json.email}"><span class="fas fa-envelope"></span> {ae_sponsorship_obj.poc_json.email}</a>
            {/if}
        </span></td>

        <td><span class="text-xs">{ae_util.iso_datetime_formatter(ae_sponsorship_obj.created_on, 'datetime_short')}</span></td>
        <td><span class="text-xs">{ae_util.iso_datetime_formatter(ae_sponsorship_obj.updated_on, 'datetime_short')}</span></td>

    </tr>
{/each}
    </tbody>
    <tfoot>
        <tr>
            <th colspan="8" class="">
                Total Count:
                {$slct.sponsorship_obj_li.length}
            </th>
        </tr>
    </tfoot>
</table>
{:else}
    <div>No sponsorships avalible to show at this time</div>
{/if}
</section>


<style>
.ae_label {
    font-size: smaller;
}
.ae_value {
    font-weight: bold;
}

.ae_header h3 {
    font-size: 1.2em;
    margin: 0;
    /* padding: 0; */
}

.sponsorship_obj .ae_meta {
    flex-direction: column;
    /* justify-content: space-between; */
}

.sponsorship_obj .ae_meta .ae_group {
    flex-direction: row;
}

.sponsorship_obj .ae_meta .ae_options {
    flex-direction: row;
    justify-content: space-between;
}
</style>
