<script lang="ts">
interface Props {
    log_lvl?: number;
    // lq__post_comment_obj: any;
    // lq__post_comment_obj_li?: any;
}

let {
    log_lvl = $bindable(1),
    // lq__post_comment_obj,
    // lq__post_comment_obj_li
}: Props = $props();

// *** Import Svelte specific
import { fade } from 'svelte/transition';

// *** Import other supporting libraries

// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/ae_api/api';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';
import { posts_func } from '$lib/ae_posts/ae_posts_functions';
import AE_Comp_Editor_TipTap from '$lib/elements/element_editor_tiptap.svelte';

let prom_api__post_comment_obj: any = $state();

// SVELTE 5 STABILITY: Use local state for form bindings to prevent
// crashes when the global store object is briefly null.
const is_new_comment = !$idaa_slct.post_comment_id;

let post_comment_form = $state({
    content: $idaa_slct.post_comment_obj?.content ?? '',
    anonymous: $idaa_slct.post_comment_obj?.anonymous ?? false,
    external_person_id:
        $idaa_slct.post_comment_obj?.external_person_id ||
        (is_new_comment ? $idaa_loc.novi_uuid || '' : ''),
    full_name:
        $idaa_slct.post_comment_obj?.full_name ||
        (is_new_comment ? $idaa_loc.novi_full_name || '' : ''),
    email:
        $idaa_slct.post_comment_obj?.email ||
        (is_new_comment ? $idaa_loc.novi_email || '' : ''),
    enable: $idaa_slct.post_comment_obj?.enable ?? true,
    hide: $idaa_slct.post_comment_obj?.hide ?? false,
    priority: $idaa_slct.post_comment_obj?.priority ?? false,
    sort: $idaa_slct.post_comment_obj?.sort ?? 0,
    group: $idaa_slct.post_comment_obj?.group ?? ''
});

let content_new_html = $state(post_comment_form.content);
let content_changed = $state(false);
// let notes_new_html = $state('');
// let notes_changed = $state(false);
let disable_submit_btn = $state(false);

function prevent_default<T extends Event>(fn: (event: T) => void) {
    return function (event: T) {
        event.preventDefault();
        fn(event);
    };
}

async function handle_submit_form(event: any) {
    if (log_lvl > 1) {
        console.log('*** handle_submit_form() ***', event.target);
    }

    disable_submit_btn = true;

    let form_data = new FormData(event.target);
    if (log_lvl > 1) {
        console.log(form_data);
    }

    // Form Post object data incoming
    let post_comment_di = ae_util.extract_prefixed_form_data({
        prefix: null,
        form_data: form_data,
        trim_values: true,
        bool_tf_str: true,
        log_lvl: log_lvl
    });
    // console.log(post_comment_di);

    // Form Post object data outgoing
    let post_comment_do: key_val = {};

    // SVELTE 5: Map values from local form state to payload
    post_comment_do['content'] = content_new_html;
    post_comment_do['anonymous'] = post_comment_form.anonymous;

    // Preserve the original creator UUID on edits. Only use the current Novi identity
    // when creating a brand-new comment draft.
    let novi_uuid = post_comment_form.external_person_id;
    let novi_full_name = post_comment_form.full_name;
    let novi_email = post_comment_form.email;

    if (!$idaa_slct.post_comment_id) {
        if (!novi_uuid && typeof localStorage !== 'undefined') {
            try {
                const ls_val = localStorage.getItem('ae_idaa_loc');
                if (ls_val) {
                    const ls_json = JSON.parse(ls_val);
                    novi_uuid = ls_json.novi_uuid;
                    novi_full_name = ls_json.novi_full_name;
                    novi_email = ls_json.novi_email;
                }
            } catch {
                /* ignore */
            }
        }
    } else {
        novi_uuid = novi_uuid || $idaa_slct.post_comment_obj?.external_person_id || null;
        novi_full_name =
            novi_full_name || $idaa_slct.post_comment_obj?.full_name || null;
        novi_email = novi_email || $idaa_slct.post_comment_obj?.email || null;
    }

    post_comment_do['external_person_id'] = novi_uuid;
    post_comment_do['full_name'] = novi_full_name;
    post_comment_do['email'] = novi_email;
    post_comment_do['notify'] = post_comment_di.notify ?? true; // Default to true if not found

    post_comment_do['hide'] = post_comment_form.hide;
    post_comment_do['priority'] = post_comment_form.priority;
    post_comment_do['sort'] = post_comment_form.sort
        ? Number(post_comment_form.sort)
        : null;
    post_comment_do['group'] = post_comment_form.group ?? null;
    post_comment_do['enable'] = post_comment_form.enable ?? true;

    if (log_lvl) {
        console.log('Final Payload (post_comment_do):', post_comment_do);
    }

    if (!$idaa_slct.post_comment_id) {
        // NEW COMMENT: Ensure post_id is included
        // SVELTE 5 V3 Pattern: Some child objects require the random ID suffix for parent mapping
        post_comment_do['post_id'] = $idaa_slct.post_id;

        if (log_lvl) {
            console.log(
                `Current Post Comment Object List Length: ${$idaa_slct.post_comment_obj_li.length}`,
                $idaa_slct.post_comment_obj_li
            );
        }

        prom_api__post_comment_obj = await posts_func
            .create_ae_obj__post_comment({
                api_cfg: $ae_api,
                account_id: $ae_api.account_id,
                post_id: $idaa_slct.post_id,
                data_kv: post_comment_do,
                log_lvl: log_lvl
            })
            .then(function (post_comment_obj_create_result) {
                if (!post_comment_obj_create_result) {
                    console.log('The result was null or false.');
                    return false;
                } else {
                    if (log_lvl) {
                        console.log(
                            'post_comment_obj_create_result:',
                            post_comment_obj_create_result
                        );
                    }

                    $idaa_slct.post_comment_id =
                        post_comment_obj_create_result.post_comment_id;
                    $idaa_slct.post_comment_obj =
                        post_comment_obj_create_result;

                    if ($ae_loc.site_cfg_json?.bb_send_staff_new_email) {
                        send_staff_notification_email(
                            post_comment_obj_create_result
                        );
                    }
                }

                return post_comment_obj_create_result;
            })
            .catch(function (error: any) {
                console.log('Something went wrong.');
                console.log(error);
                return false;
            })
            .finally(() => {
                disable_submit_btn = false;
                $idaa_sess.bb.show__inline_edit__post_comment_id = false;
            });

        if (prom_api__post_comment_obj) {
            // $idaa_slct.post_comment_id = prom_api__post_comment_obj.post_comment_id;
            // $idaa_slct.post_comment_obj = prom_api__post_comment_obj;

            // disable_submit_btn = false;
            // $idaa_sess.bb.show__inline_edit__post_comment_id = false;

            // Send notification to staff
            // if ($ae_loc.site_cfg_json?.bb_send_staff_new_email) {
            //     send_staff_notification_email();
            // }

            // Send notification to the original poster
            if (
                !$ae_loc.administrator_access &&
                $ae_loc.site_cfg_json?.bb_send_poster_email &&
                $idaa_slct.post_obj.notify
            ) {
                send_poster_notification_email();
            }

            // Send a notification to any other post commenters
            if (
                !$ae_loc.administrator_access &&
                $ae_loc.site_cfg_json?.bb_send_commenter_email
            ) {
                if (
                    $idaa_slct.post_comment_obj_li &&
                    $idaa_slct.post_comment_obj_li.length > 0
                ) {
                    for (const post_comment of $idaa_slct.post_comment_obj_li) {
                        if (
                            post_comment?.email &&
                            post_comment.post_comment_id !==
                                $idaa_slct.post_comment_id &&
                            post_comment?.email !==
                                $idaa_slct.post_comment_obj?.email
                        ) {
                            send_poster_commenters_notification_email({
                                post_comment_obj: post_comment
                            });
                        }
                    }
                }
            }
        } else {
            disable_submit_btn = false;
        }

        return prom_api__post_comment_obj;
    } else {
        prom_api__post_comment_obj = posts_func
            .update_ae_obj__post_comment({
                api_cfg: $ae_api,
                post_comment_id: $idaa_slct.post_comment_id,
                data_kv: post_comment_do,
                log_lvl: log_lvl
            })
            .then(function (post_comment_obj_update_result) {
                if (!post_comment_obj_update_result) {
                    console.log('The result was null or false.');
                    return false;
                } else {
                    if (log_lvl) {
                        console.log(
                            'post_comment_obj_update_result:',
                            post_comment_obj_update_result
                        );
                    }

                    $idaa_slct.post_comment_obj =
                        post_comment_obj_update_result;

                    if ($ae_loc.site_cfg_json?.bb_send_staff_update_email) {
                        send_staff_notification_email(
                            post_comment_obj_update_result
                        );
                    }
                }

                return post_comment_obj_update_result;
            })
            .catch(function (error: any) {
                console.log('Something went wrong.');
                console.log(error);
                return false;
            })
            .finally(() => {
                // We need to do this since the comment has changed and the idaa_slct object does automatically update (yet...???).
                // $idaa_slct.post_comment_obj = $lq__post_comment_obj;
                disable_submit_btn = false;
                $idaa_sess.bb.show__inline_edit__post_comment_id = false;

                // if (!$ae_loc.administrator_access && $ae_loc.site_cfg_json?.bb_send_staff_update_email) {
                // if ($ae_loc.site_cfg_json?.bb_send_staff_update_email) {
                //     send_staff_notification_email();
                // }

                // For now we are not going to send a notification to the poster when a post comment has been updated.
                // if (!$ae_loc.administrator_access && $ae_loc.site_cfg_json?.bb_send_poster_email && $idaa_slct.post_obj.notify) {
                //     send_poster_notification_email();
                // }
            });

        return prom_api__post_comment_obj;
    }
}

// Updated 2024-11-15
async function handle_delete_post_comment_obj({
    post_comment_id,
    method = 'disable'
}: {
    post_comment_id: string;
    method?: string;
}) {
    if (log_lvl) {
        console.log('*** handle_delete_post_comment_obj() ***');
    }

    prom_api__post_comment_obj = posts_func
        .delete_ae_obj_id__post_comment({
            api_cfg: $ae_api,
            post_comment_id: post_comment_id,
            method: method as any,
            log_lvl: log_lvl
        })
        .then(function (post_comment_obj_delete_result) {
            $idaa_sess.bb.show__inline_edit__post_comment_id = false;
        })
        .catch(function (error: any) {
            console.log(
                'The result was null or false when trying to delete.',
                error
            );
        })
        .finally(() => {
            // $idaa_sess.recovery_meetings.show__modal_edit = false;
            $idaa_slct.post_comment_id = null;
            $idaa_slct.post_comment_obj = null;
        });

    return prom_api__post_comment_obj;
}

function send_staff_notification_email(post_comment_do: key_val) {
    log_lvl = 1;
    if (log_lvl) {
        console.log(
            `*** send_staff_notification_email() *** Post ID: ${$idaa_slct.post_id} Post Title: ${$idaa_slct?.post_obj?.title}`
        );
    }
    if (log_lvl > 1) {
        console.log(`Selected Post Object:`, $idaa_slct.post_obj);
        console.log(`Selected Post Comment Object:`, post_comment_do);

        // console.log($lq__post_obj);
        // console.log($lq__post_obj?.title);
        // console.log($lq__post_obj?.content);
    }

    let link_base_url =
        $ae_loc.site_cfg_json.novi_bb_base_url ??
        `${$ae_loc.url_origin}/idaa/bb`;

    let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`;

    let body_html = `
<div>${$idaa_slct.post_obj.full_name},
<p>A BB post comment has been created or updated on the post named "${$idaa_slct.post_obj.title ?? '-- not set --'}".</p>
</div>

<div>
Commenter's Novi ID: ${post_comment_do.external_person_id ?? '-- not set --'}<br>
Commenter's Name: ${post_comment_do.full_name ?? '-- not set --'}<br>
Commenter's Email: ${post_comment_do.email ?? '-- not set --'}
</div>

<div>
Original Poster's Novi ID: ${$idaa_slct.post_obj.external_person_id ?? '-- not set --'}<br>
Original Poster's Name: ${$idaa_slct.post_obj.full_name ?? '-- not set --'}<br>
Original Poster's Email: ${$idaa_slct.post_obj.email ?? '-- not set --'}
</div>

<br>

<div>
IDAA BB Post ID: ${$idaa_slct.post_id}<br>
<p>Use this link to view the post.<br>
Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p>
</div>`;

    api.send_email({
        api_cfg: $ae_api,
        from_email:
            $ae_loc.site_cfg_json?.noreply_email ??
            'noreply+idaabb@oneskyit.com',
        from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'IDAA BB NoReply',
        to_email:
            $ae_loc.site_cfg_json?.admin_email ??
            'admin+bbcomment@oneskyit.com', // 'scott+idaabb@oneskyit.com', // post_comment_do.email,
        // to_email: 'scott+idaabbstaff@oneskyit.com',
        to_name: $ae_loc.site_cfg_json?.admin_name ?? 'IDAA BB Admin',
        subject: subject,
        body_html: body_html
    });
}

function send_poster_notification_email() {
    log_lvl = 1;
    if (log_lvl) {
        console.log(
            `*** send_poster_notification_email() *** Post ID: ${$idaa_slct.post_id}`
        );
    }

    let link_base_url =
        $ae_loc.site_cfg_json.novi_bb_base_url ??
        `${$ae_loc.url_origin}/idaa/bb`;

    let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`;

    let body_html = `
<div>${$idaa_slct.post_obj.full_name ?? '-- not set --'},
<p>Your BB post named "${$idaa_slct.post_obj.title ?? '-- not set --'}" has been commented on.</p>
</div>

<br>

<div>
IDAA BB Post ID: ${$idaa_slct.post_id}<br>
<p>Use this link to view the post.<br>
Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p>
</div>`;

    api.send_email({
        api_cfg: $ae_api,
        from_email:
            $ae_loc.site_cfg_json?.noreply_email ??
            'noreply+idaabb@oneskyit.com',
        from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'IDAA BB NoReply',
        // to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+bbpost@oneskyit.com', // 'scott+idaabb@oneskyit.com',
        to_email: $idaa_slct.post_obj.email,
        // to_email: 'scott+idaabb@oneskyit.com',
        to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Poster',
        subject: subject,
        body_html: body_html
    });
}

function send_poster_commenters_notification_email({
    post_comment_obj = $idaa_slct.post_comment_obj
}: {
    post_comment_obj?: any;
} = {}) {
    log_lvl = 1;
    if (log_lvl) {
        console.log(
            `*** send_poster_commenters_notification_email() *** Post ID: ${$idaa_slct.post_id}`
        );
    }

    let link_base_url =
        $ae_loc.site_cfg_json.novi_bb_base_url ??
        `${$ae_loc.url_origin}/idaa/bb`;

    let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`;

    let body_html = `
<div>${post_comment_obj.full_name ?? '-- not set --'},
<p>The BB post named "${$idaa_slct.post_obj.title ?? '-- not set --'}" has been commented on.</p>
</div>

<br>

<div>
IDAA BB Post ID: ${$idaa_slct.post_id}<br>
<p>Use this link to view the post.<br>
Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p>
</div>`;

    api.send_email({
        api_cfg: $ae_api,
        from_email:
            $ae_loc.site_cfg_json?.noreply_email ??
            'noreply+idaabb@oneskyit.com',
        from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'IDAA BB NoReply',
        // to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+bbpost@oneskyit.com', // 'scott+idaabb@oneskyit.com',
        to_email: $idaa_slct.post_obj.email,
        // to_email: 'scott+idaabb@oneskyit.com',
        to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Post Commenter',
        subject: subject,
        body_html: body_html
    });
}
</script>

<section
    class="
        svelte_component ae_section ae_edit post_comment_obj edit__post_comment_obj
        preset-filled-surface-100-900 preset-outlined-warning-400-600
        space-y-2
        rounded-md p-2
        "
    class:ae_create={!$idaa_slct.post_id}
    bind:clientHeight={$ae_loc.iframe_height_modal_body}>
    <form onsubmit={prevent_default(handle_submit_form)} class="space-y-1">
        {#await prom_api__post_comment_obj}
            <div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>
                Saving...
            </div>
        {:then}
            {#if prom_api__post_comment_obj}
                <!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div> -->
            {:else}
                <!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
            {/if}
        {/await}

        <section class="text-center">
            <!-- BEGIN: section post__options -->
            <button
                type="button"
                onclick={() => {
                    $idaa_sess.bb.show__inline_edit__post_comment_id = false;
                }}
                class="
                novi_btn
                btn btn-sm
                preset-filled-warning-200-800 hover:preset-filled-success-200-800
                transition
                "
                title="Cancel editing of post comment for {$idaa_slct
                    .post_comment_obj?.full_name} (ID: {$idaa_slct
                    .post_comment_obj?.post_comment_id})">
                <span class="fas fa-times m-1"></span>
                Cancel Edit
            </button>
        </section>
        <!-- END: section post__options -->

        <!-- <h3 class="h3">Post Comment</h3> -->

        <input type="hidden" value={$idaa_slct.post_comment_id} />

        <div
            class="ae_section post_comment__general_information space-y-1 rounded border border-gray-200 p-1">
            <!-- BEGIN: section post_comment__general_information -->

            <label for="content" class="ae_label post__content w-full">
                <span
                    class="legend text-sm font-semibold text-gray-600 dark:text-gray-400">
                    Content (comment body):
                </span>

                <AE_Comp_Editor_TipTap
                    bind:content={content_new_html}
                    class_li="bg-gray-100 dark:bg-gray-800"
                    placeholder="Your post content here..." />
            </label>

            <h3 class="h3">Commenter's Information</h3>
            <fieldset class="form-group">
                <legend class="text-sm text-gray-600 dark:text-gray-400"
                    >Comment as Anonymous</legend>
                <div class="flex flex-row gap-2">
                    <input
                        type="radio"
                        id="anonymous_no"
                        name="anonymous"
                        value={false}
                        bind:group={post_comment_form.anonymous}
                        class="radio" />
                    <label for="anonymous_no"
                        ><strong>No</strong>, include my name and email address</label>
                </div>
                <div class="flex flex-row gap-2">
                    <input
                        type="radio"
                        id="anonymous_yes"
                        name="anonymous"
                        value={true}
                        bind:group={post_comment_form.anonymous}
                        class="radio" />
                    <label for="anonymous_yes"
                        ><strong>Yes</strong>, the post will be listed as
                        Anonymous</label>
                </div>
            </fieldset>

            <div>
                <div class="form-group d-block block w-100">
                    <span
                        class={$ae_loc.trusted_access
                            ? 'text-sm text-gray-600 dark:text-gray-400'
                            : 'text-xs font-medium opacity-80 text-gray-600 dark:text-gray-400'}>
                        <span class="fas fa-link"></span> Linked with Novi ID
                    </span>
                    {#if !$ae_loc.trusted_access}
                        <span
                            class="fas fa-lock text-xs opacity-70"
                            title="Field is locked"></span>
                        <div
                            class="mt-1 w-96 rounded-md border border-dashed border-gray-300/70 bg-white/65 px-2.5 py-1.5 text-xs leading-snug text-gray-600 opacity-85 shadow-sm dark:border-gray-600/70 dark:bg-gray-800/45 dark:text-gray-300"
                            style="overflow-wrap: anywhere; word-break: break-word;">
                            <span class="fas fa-lock mr-2 opacity-60"></span>
                            {post_comment_form.external_person_id ||
                                '-- not set --'}
                        </div>
                        <input
                            type="hidden"
                            name="external_person_id"
                            value={post_comment_form.external_person_id ?? ''} />
                    {:else}
                        <div class="ae_highlight bg-yellow-100 p-2 text-sm">
                            Primary link using the Novi API UUID. This must be
                            empty, a staff person, or an active member of IDAA
                            and should be the primary contact for this meeting.
                        </div>
                        <span
                            class="fas fa-unlock m-1"
                            title="Field is unlocked"></span>
                        <input
                            type="text"
                            id="external_person_id"
                            name="external_person_id"
                            bind:value={post_comment_form.external_person_id}
                            readonly={false}
                            class="input form-control w-96" />
                    {/if}
                </div>
            </div>

            <div>
                <div class="form-group d-block block w-75">
                    <span
                        class={$ae_loc.trusted_access
                            ? 'text-sm text-gray-600 dark:text-gray-400'
                            : 'text-xs font-medium opacity-80 text-gray-600 dark:text-gray-400'}>
                        Name
                        {#if !$ae_loc.trusted_access}
                            <span
                                class="fas fa-lock m-1 text-xs opacity-70"
                                title="Field is locked"></span>
                        {:else}
                            <span
                                class="fas fa-unlock m-1"
                                title="Field is unlocked"></span>
                        {/if}
                    </span>
                    {#if !$ae_loc.trusted_access}
                        <div
                            class="mt-1 w-96 rounded-md border border-dashed border-gray-300/70 bg-white/65 px-2.5 py-1.5 text-xs leading-snug text-gray-600 opacity-85 shadow-sm dark:border-gray-600/70 dark:bg-gray-800/45 dark:text-gray-300"
                            style="overflow-wrap: anywhere; word-break: break-word;">
                            <span class="fas fa-lock mr-2 opacity-60"></span>
                            {post_comment_form.full_name || '-- not set --'}
                        </div>
                        <input
                            type="hidden"
                            name="full_name"
                            value={post_comment_form.full_name ?? ''} />
                    {:else}
                        <input
                            type="text"
                            id="full_name"
                            name="full_name"
                            bind:value={post_comment_form.full_name}
                            readonly={!$ae_loc.trusted_access}
                            class="input form-control w-96" />
                    {/if}
                </div>
            </div>

            {#if $ae_loc.trusted_access}
                <div>
                    <label for="email" class="form-group d-block block w-75">
                        <span class="text-sm text-gray-600 dark:text-gray-400">
                            Email
                        </span>
                        {#if !$ae_loc.trusted_access}
                            <span
                                class="fas fa-lock m-1"
                                title="Field is locked"></span>
                        {:else}
                            <span
                                class="fas fa-unlock m-1"
                                title="Field is unlocked"></span>
                        {/if}
                        <input
                            type="text"
                            name="email"
                            bind:value={post_comment_form.email}
                            readonly={!$ae_loc.trusted_access}
                            class="input form-control w-96" />
                        <span
                            class="text-xs text-gray-600 italic dark:text-gray-400">
                            Secondary link using the Novi email address
                        </span>
                    </label>
                </div>
            {:else}
                <input
                    type="hidden"
                    name="email"
                    value={post_comment_form.email} />
            {/if}
        </div>
        <!-- END: section post__general_information -->

        {#if $ae_loc.trusted_access}
            <!-- BEGIN: section post_comment__admin_options -->
            <div
                class="bg-surface-100-900 border-error-400 space-y-3 rounded-md border p-3">
                <button
                    type="button"
                    class="flex w-full flex-row items-center gap-2 text-left"
                    onclick={() => {
                        $idaa_loc.bb.show__admin_options =
                            !$idaa_loc.bb.show__admin_options;
                    }}>
                    <span
                        class="fas fa-{$idaa_loc.bb.show__admin_options
                            ? 'caret-down'
                            : 'caret-right'} text-xs opacity-60"></span>
                    <h3
                        class="text-surface-600-400 flex w-full items-center gap-2 text-lg font-semibold">
                        <span class="fas fa-cogs"></span>
                        Admin Options
                    </h3>
                </button>

                <div
                    class="space-y-3"
                    class:hidden={!$idaa_loc.bb.show__admin_options}>
                    <span
                        class="flex w-full flex-col flex-wrap items-center justify-center gap-2 md:flex-row md:justify-stretch">
                        <span
                            class="form-check flex grow flex-row flex-wrap items-center justify-evenly gap-2">
                            <fieldset
                                class="flex flex-row items-center justify-center gap-1">
                                <legend
                                    class="legend form-check-label text-sm font-semibold"
                                    >Hide</legend>
                                <div>
                                    <input
                                        type="radio"
                                        id="hide_yes"
                                        name="hide"
                                        value={true}
                                        bind:group={post_comment_form.hide}
                                        class="radio form-check-input" />
                                    <label for="hide_yes">Yes</label>
                                </div>
                                <div>
                                    <input
                                        type="radio"
                                        id="hide_no"
                                        name="hide"
                                        value={false}
                                        bind:group={post_comment_form.hide}
                                        class="radio form-check-input" />
                                    <label for="hide_no">No</label>
                                </div>
                            </fieldset>

                            <fieldset
                                class="form-check flex flex-row items-center justify-center gap-2">
                                <legend
                                    class="legend form-check-label text-sm font-semibold"
                                    >Priority</legend>
                                <div>
                                    <input
                                        type="radio"
                                        id="priority_yes"
                                        name="priority"
                                        value={true}
                                        bind:group={post_comment_form.priority}
                                        class="radio form-check-input" />
                                    <label for="priority_yes">Yes</label>
                                </div>
                                <div>
                                    <input
                                        type="radio"
                                        id="priority_no"
                                        name="priority"
                                        value={false}
                                        bind:group={post_comment_form.priority}
                                        class="radio form-check-input" />
                                    <label for="priority_no">No</label>
                                </div>
                            </fieldset>
                        </span>

                        <span
                            class="
                    col-sm-1
                    flex grow flex-row flex-wrap items-center justify-evenly
                    gap-1
                ">
                            <label
                                class="legend input-group text-sm font-semibold"
                                >Sort <input
                                    type="number"
                                    name="sort"
                                    value={post_comment_form.sort}
                                    class="input w-24" /></label>

                            <label
                                class="legend input-group text-sm font-semibold"
                                >Group <input
                                    type="text"
                                    name="group"
                                    value={post_comment_form.group}
                                    max="100"
                                    class="input w-40" /></label>
                        </span>

                        {#if $ae_loc.administrator_access}
                            <span
                                class="flex grow flex-row flex-wrap items-center justify-evenly gap-1">
                                <fieldset
                                    class="form-check flex flex-row gap-2">
                                    <legend
                                        class="legend form-check-label text-sm font-semibold"
                                        >Enable</legend>
                                    <div>
                                        <input
                                            type="radio"
                                            id="enable_yes"
                                            name="enable"
                                            value={true}
                                            bind:group={
                                                post_comment_form.enable
                                            }
                                            class="radio form-check-input" />
                                        <label for="enable_yes">Yes</label>
                                    </div>
                                    <div>
                                        <input
                                            type="radio"
                                            id="enable_no"
                                            name="enable"
                                            value={false}
                                            bind:group={
                                                post_comment_form.enable
                                            }
                                            class="radio form-check-input" />
                                        <label for="enable_no">No</label>
                                    </div>
                                </fieldset>
                            </span>
                        {/if}
                    </span>
                </div>
            </div>
            <!-- END: section post_comment__admin_options -->
        {/if}

        <div
            class="
            ae_section ae_options ae_row ae_actions post_comment__options post_comment__actions
            d-flex align-items-center justify-content-between flex w-full flex-row
            items-center justify-between gap-1
        ">
            <div>
                <!-- BEGIN: section post_comment__options -->
                {#if $idaa_slct.post_comment_id}
                    <button
                        type="submit"
                        disabled={disable_submit_btn}
                        class="
                    novi_btn
                    btn btn-md preset-tonal-primary preset-outlined-primary-800-200 hover:preset-filled-primary-200-800
                    transition
                ">
                        {#await prom_api__post_comment_obj}
                            <span class="fas fa-spinner fa-spin m-1"></span> Saving
                        {:then}
                            <span class="fas fa-save m-1"></span> Save Changes
                        {/await}
                    </button>
                {:else}
                    <button
                        type="submit"
                        disabled={disable_submit_btn}
                        onclick={() => {
                            if (
                                !confirm(
                                    'Are you sure you want to add this comment?'
                                )
                            ) {
                                return false;
                            }
                            // handle_save_post_comment_obj({post_id: $idaa_slct.post_id, method: 'create'});
                        }}
                        class="
                    novi_btn
                    btn btn-md preset-tonal-warning preset-outlined-warning-800-200 hover:preset-filled-warning-200-800
                    transition
                ">
                        {#await prom_api__post_comment_obj}
                            <span class="fas fa-spinner fa-spin m-1"></span> Saving
                        {:then}
                            <span class="fas fa-plus m-1"></span> Save New Comment
                        {/await}
                    </button>
                {/if}

                {#if $idaa_slct.post_comment_id}
                    {#if $ae_loc.administrator_access}
                        <button
                            type="button"
                            onclick={() => {
                                if (
                                    !confirm(
                                        'Are you sure you want to delete this post comment?'
                                    )
                                ) {
                                    return false;
                                }
                                handle_delete_post_comment_obj({
                                    post_comment_id: $idaa_slct.post_comment_id,
                                    method: 'delete'
                                });
                            }}
                            class="
                novi_btn
                btn btn-sm
                preset-filled-warning-400-600 hover:preset-filled-error-200-800
                "
                            title="Delete record permanently">
                            <span class="fas fa-minus m-1"></span> Delete
                        </button>
                    {:else if $ae_loc.trusted_access}
                        <button
                            type="button"
                            onclick={() => {
                                if (
                                    !confirm(
                                        'Are you sure you want to disable this post comment?'
                                    )
                                ) {
                                    return false;
                                }
                                handle_delete_post_comment_obj({
                                    post_comment_id: $idaa_slct.post_comment_id,
                                    method: 'disable'
                                });
                            }}
                            class="
                novi_btn
                btn btn-sm
                preset-filled-warning-200-800 hover:preset-filled-error-200-800
                transition
                "
                            title="Disable record to delete">
                            <span class="fas fa-minus m-1"></span> Delete
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                if (
                                    !confirm(
                                        'Are you sure you want to hide this post comment?'
                                    )
                                ) {
                                    return false;
                                }
                                handle_delete_post_comment_obj({
                                    post_comment_id: $idaa_slct.post_comment_id,
                                    method: 'hide'
                                });
                            }}
                            class="
                novi_btn
                btn btn-sm
                preset-filled-warning-200-800 hover:preset-filled-error-200-800
                transition
                "
                            title="Hide record to delete">
                            <span class="fas fa-comment-slash m-1"></span> Delete
                        </button>
                    {/if}
                {/if}
            </div>

            <div>
                <button
                    type="button"
                    onclick={() => {
                        $idaa_sess.bb.show__inline_edit__post_comment_id = false;
                    }}
                    class="
                novi_btn
                btn btn-sm
                preset-filled-warning-200-800 hover:preset-filled-success-200-800
                transition
                "
                    title="Cancel editing of post for {$idaa_slct
                        .post_comment_obj?.full_name} (ID: {$idaa_slct
                        .post_comment_obj?.post_comment_id})">
                    <span class="fas fa-times m-1"></span>
                    Cancel Edit
                </button>
            </div>
        </div>
    </form>
</section>

<style lang="scss">
</style>
