<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 - Event Presenters Obj');
});
</script>


<section class="svelte_component ae_section ae_list list__event_presenter_obj event_presenter_obj_li {class_li}">
{#if $slct.event_presenter_obj_li}
<table class="table table-compact table-hover">
    <thead>
        <tr>
            <th>Options</th>
            <th>Name</th>
            <th>Email</th>
            <th>Affiliations</th>
            <th>Created</th>
            <th>Updated</th>
        </tr>
    </thead>
    <tbody>
{#each $slct.event_presenter_obj_li as ae_event_presenter_obj, index}
    <tr
        id={`ae_event_presenter_id__${ae_event_presenter_obj.event_presenter_id_random}`}
        class="ae_object event_presenter_obj"
        >

        <td class="ae_options event_presenter_obj__options">
            <div class="btn-group variant-filled">
            <button
                on:click={() => {
                    $slct.event_presenter_id = ae_event_presenter_obj.event_presenter_id_random;
                    $slct.event_presenter_obj = ae_event_presenter_obj;
                    console.log(`Selected Event Presenter ID: ${$slct.event_presenter_id}`);
                    console.log(`Selected Event Presenter Object:`, $slct.event_presenter_obj);

                    $ae_loc.mod.events.show_main__options = true;
                    $ae_loc.mod.events.show_edit__event_presenter_obj = false;
                    $ae_loc.mod.events.show_list__event_presenter_obj_li = true;
                    $ae_loc.mod.events.show_view__event_presenter_obj = true;
                    $slct_trigger = 'show_view__event_presenter_obj';
                }}
                class="variant-soft-primary"
                title={`Open to see details: ${ae_event_presenter_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.event_presenter_id = ae_event_presenter_obj.event_presenter_id_random;
                        $slct.event_presenter_obj = ae_event_presenter_obj;
                        console.log(`Selected Event Presenter ID: ${$slct.event_presenter_id}`);
                        console.log(`Selected Event Presenter Object:`, $slct.event_presenter_obj);
                        // $slct_trigger = 'load__event_presenter_obj';

                        $ae_loc.mod.events.show_main__options = true;
                        $ae_loc.mod.events.show_edit__event_presenter_obj = true;
                        $ae_loc.mod.events.show_list__event_presenter_obj_li = true;
                        $ae_loc.mod.events.show_view__event_presenter_obj = false;
                        $slct_trigger = 'show_edit__event_presenter_obj';
                    }}
                    class="variant-soft-warning"
                    title={`Edit event presenter: ${ae_event_presenter_obj.name}`}
                    >
                    <span class="fas fa-edit mx-1"></span> Edit
                </button>
            {/if}
            </div>
        </td>

        <td class="ae_value event_presenters__name">{ae_event_presenter_obj.full_name}</td>

        <td class="">
            {#if ae_event_presenter_obj.email}
                <a href="mailto:{ae_event_presenter_obj.email}"><span class="fas fa-envelope"></span> {ae_event_presenter_obj.email}</a>
            {:else}
                -- None --
            {/if}
        </td>

        <td>
            {ae_event_presenter_obj.affiliations ?? '-- None --'}
        </td>

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

    </tr>
{/each}
    </tbody>
    <tfoot>
        <tr>
            <th colspan="6" class="">
                Total Count:
                {$slct.event_presenter_obj_li.length}
            </th>
        </tr>
    </tfoot>
</table>
{:else}
    <div>No event presenters 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; */
}

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

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

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