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

    // *** Import Aether core 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 {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';
    import { archives_func } from '$lib/ae_archives/ae_archives_functions';

    import AE_Comp_Editor_TipTap from '$lib/elements/AE_Comp_Editor_TipTap.svelte';
    import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
    import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';

    interface Props {
        log_lvl?: number;
        lq__archive_content_obj: any;
    }

    let { log_lvl = 0, lq__archive_content_obj }: Props = $props();

    let create_archive_content_obj_promise: any;
    let delete_archive_content_obj_promise: any;
    let update_archive_content_obj_promise: any;
    let upload__hosted_file_obj_promise: any;
    let prom_api__archive_content_obj: any = $state();
    let prom_api__archive_content_obj__hosted_file: any = $state();

    let description_new_html = $state(
        $idaa_slct.archive_content_obj?.description ?? ''
    );
    let description_changed = $state(false);
    let notes_new_html = $state($idaa_slct.archive_content_obj?.notes ?? '');
    let notes_changed = $state(false);
    let disable_submit_btn = $state(false);

    let slct_hosted_file_kv: key_val = $state({});

    if ($idaa_slct.archive_content_id) {
        console.log(
            `Archive Content ID selected: ${$idaa_slct.archive_content_id}`
        );
        console.log(
            `Archive Content Object selected: ${$idaa_slct.archive_content_obj}`
        );
        if (
            $idaa_slct.archive_content_obj &&
            $idaa_slct.archive_content_obj.upload_complete === undefined
        ) {
            $idaa_slct.archive_content_obj.upload_complete = false;
        }
        if (
            $idaa_slct.archive_content_obj &&
            !Array.isArray($idaa_slct.archive_content_obj.hosted_file_id_li)
        ) {
            $idaa_slct.archive_content_obj.hosted_file_id_li = [];
        }
        if (
            $idaa_slct.archive_content_obj &&
            !Array.isArray($idaa_slct.archive_content_obj.hosted_file_obj_li)
        ) {
            $idaa_slct.archive_content_obj.hosted_file_obj_li = [];
        }
    } else {
        $idaa_slct.archive_content_id = null;
        $idaa_slct.archive_content_obj = {
            archive_id_random: null,
            // archive_content_id_random: null,
            archive_content_type: 'hosted_file',
            name: null,
            description: null,
            content_html: null,
            // hosted_file_id_random: null,
            // file_path: null, // file_path is no longer used, but need to be aware of it.
            filename: null,
            file_extension: null,
            original_datetime: null,
            original_timezone: null,
            original_location: null,
            // original_url: null,
            // original_url_text: null,
            // access_key: null, // or passcode?

            enable: true,
            hide: false,
            priority: null,
            sort: null,
            notes: null,
            upload_complete: false,
            hosted_file_id_li: [],
            hosted_file_obj_li: []
        };
        console.log(
            `Archive Content Object started: ${$idaa_slct.archive_content_obj}`
        );
    }

    let lu_time_zone_list: any = $state(
        localStorage.getItem('lu_time_zone_list')
            ? JSON.parse(localStorage.getItem('lu_time_zone_list') as string)
            : []
    );
    onMount(() => {
        $ae_loc.lu_time_zone_list = [];
        // $ae_loc.lu_time_zone_list = [];
        // lu_time_zone_list = [];
        if (lu_time_zone_list && lu_time_zone_list.length > 0) {
            // console.log('Already have time zone list!', lu_time_zone_list);
        } else {
            console.log('No time zone list');

            let lu_time_zone_li_get_promise = core_func
                .load_ae_obj_li__time_zone({
                    api_cfg: $ae_api,
                    only_priority: true,
                    log_lvl: log_lvl
                })
                .then(function (lu_time_zone_li_get_result) {
                    /* We need to save the time zone list to localStore */
                    if (lu_time_zone_li_get_result) {
                        lu_time_zone_list = lu_time_zone_li_get_result;
                        localStorage.setItem(
                            'lu_time_zone_list',
                            JSON.stringify(lu_time_zone_li_get_result)
                        );
                        if (log_lvl) {
                            console.log(`Time zone list:`, lu_time_zone_list);
                        }
                    } else {
                        console.log(`No time zones returned!`);
                        // $ae_loc.lu_time_zone_list = [];
                    }

                    if (lu_time_zone_li_get_result) {
                        lu_time_zone_list = lu_time_zone_li_get_result;
                        console.log(`Time zone list:`, lu_time_zone_list);
                        console.log(lu_time_zone_list[0]);
                        console.log(lu_time_zone_list[10]);
                    } else {
                        console.log(`No time zones returned!`);
                        lu_time_zone_list = [];
                    }
                })
                .catch(function (error: any) {
                    console.log('No results returned or failed.', error);
                });
        }
    });

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

    async function handle_submit_form(event: SubmitEvent) {
        if (log_lvl > 1) {
            console.log('*** handle_submit_form() ***');
            console.log(event.currentTarget);
        }

        disable_submit_btn = true;

        let form_data = new FormData(event.currentTarget as HTMLFormElement);
        if (log_lvl) {
            console.log(form_data);
        }

        let archive_content_di = ae_util.extract_prefixed_form_data({
            prefix: null,
            form_data: form_data,
            trim_values: true,
            bool_tf_str: true,
            log_lvl: 0
        });
        console.log(archive_content_di);

        let archive_content_do: key_val = {};

        if (!$idaa_slct.archive_content_id) {
            archive_content_do['archive_id_random'] = $idaa_slct.archive_id;
        }

        archive_content_do['name'] = archive_content_di.name;

        // Check if the description_new_html exists and is a string
        if (typeof description_new_html === 'string') {
            console.log('New description is a string');
            archive_content_do['description'] = description_new_html;
        } else {
            console.log('New description is not a string. Do nothing.');
            // archive_content_do['description'] = event_meeting_fd.description;
        }

        if (archive_content_di.archive_content_type) {
            archive_content_do['archive_content_type'] =
                archive_content_di.archive_content_type;
        } else {
            archive_content_do['archive_content_type'] = null;
        }

        // archive_content_do['enable_for_public'] = !!!archive_content_di.enable_for_public;

        // archive_content_do['file_path'] = archive_content_di.file_path;
        archive_content_do['filename'] =
            archive_content_di?.filename?.trim() ?? null;
        archive_content_do['file_extension'] =
            archive_content_di?.file_extension?.trim() ?? null;

        let date_time_str = null;
        let date_part = archive_content_di.original_datetime_date.trim();
        let time_part = archive_content_di.original_datetime_time.trim();
        if (date_part && time_part) {
            date_time_str = `${date_part} ${time_part}`;
        } else if (date_part) {
            date_time_str = `${date_part}T00:00:00`;
        } else if (time_part) {
            // date_time_str = `${time_part}`;
            date_time_str = false;
        }
        archive_content_do['original_datetime'] = date_time_str;

        archive_content_do['original_timezone'] =
            archive_content_di.original_timezone;

        archive_content_do['original_location'] =
            archive_content_di.original_location;

        archive_content_do['hide'] = archive_content_di.hide;
        archive_content_do['priority'] = archive_content_di.priority;
        if (archive_content_di.sort) {
            archive_content_do['sort'] = Number(archive_content_di.sort);
        } else {
            archive_content_do['sort'] = null;
        }
        if (archive_content_di.group) {
            archive_content_do['group'] = archive_content_di.group;
        } else {
            archive_content_do['group'] = null;
        }

        // console.log(`archive_content_di.enable = ${archive_content_di.enable}`);
        archive_content_do['enable'] = !!archive_content_di.enable;

        // Check if the notes_new_html exists and is a string
        if (typeof notes_new_html === 'string') {
            console.log('New notes is a string');
            archive_content_do['notes'] = notes_new_html;
        } else {
            console.log('New notes is not a string. Do nothing.');
            // archive_content_do['notes'] = event_meeting_fd.notes;
        }

        console.log(archive_content_do);

        if (!$idaa_slct.archive_content_id) {
            prom_api__archive_content_obj = archives_func
                .create_ae_obj__archive_content({
                    api_cfg: $ae_api,
                    archive_id: $idaa_slct.archive_id,
                    data_kv: archive_content_do,
                    log_lvl: log_lvl
                })
                .then(async function (archive_content_obj_create_result) {
                    if (!archive_content_obj_create_result) {
                        console.log('The result was null or false.');
                        return false;
                    }

                    $idaa_slct.archive_content_id =
                        archive_content_obj_create_result.archive_content_id_random;
                    // $idaa_slct.archive_content_obj = await $lq__archive_content_obj;
                    // $idaa_slct.archive_content_obj.hosted_file_id_li = [];
                    // $idaa_slct.archive_content_obj.hosted_file_obj_li = [];
                    // $idaa_slct.archive_content_obj.upload_complete = false;
                    // $idaa_slct.archive_content_obj.description_new_html = '';

                    $idaa_slct.archive_content_obj =
                        archive_content_obj_create_result;
                    $idaa_slct.archive_content_obj.archive_content_id =
                        archive_content_obj_create_result.archive_content_id_random; // This is because we need use the string ID, not int ID.
                    $idaa_slct.archive_content_obj.upload_complete = false;
                    $idaa_slct.archive_content_obj.hosted_file_id_li = [];
                    $idaa_slct.archive_content_obj.hosted_file_obj_li = [];

                    return archive_content_obj_create_result;
                })
                .catch(function (error: any) {
                    console.log('Something went wrong.');
                    console.log(error);
                    return false;
                })
                .finally(() => {
                    disable_submit_btn = false;
                });

            return create_archive_content_obj_promise;
        } else {
            prom_api__archive_content_obj = archives_func
                .update_ae_obj__archive_content({
                    api_cfg: $ae_api,
                    archive_content_id: $idaa_slct.archive_content_id,
                    data_kv: archive_content_do,
                    log_lvl: log_lvl
                })
                .then(function (archive_content_obj_update_result) {
                    if (!archive_content_obj_update_result) {
                        console.log('The result was null or false.');
                        return false;
                    }

                    return archive_content_obj_update_result;
                })
                .catch(function (error: any) {
                    console.log('Something went wrong.');
                    console.log(error);
                    return false;
                })
                .finally(() => {
                    // We need to do all of this since the DB object has changed and the SLCT object does automatically update (yet...??? Svelte 5?).
                    // $idaa_slct.archive_content_obj = await $lq__archive_content_obj;

                    $idaa_slct.archive_content_id = null;
                    $idaa_slct.archive_content_obj = {};
                    $idaa_sess.archives.show__modal_edit__archive_content_id = false;
                });

            return prom_api__archive_content_obj;
        }
    }

    async function handle_hosted_files_uploaded(
        hosted_file_id_li: string[],
        hosted_file_obj_li: any[]
    ) {
        console.log(
            `*** handle_hosted_files_uploaded() *** ${hosted_file_id_li}`
        );

        // We need to update the archive_content_obj with the new file (for now just the first one).
        prom_api__archive_content_obj = archives_func
            .update_ae_obj__archive_content({
                api_cfg: $ae_api,
                archive_content_id: $idaa_slct.archive_content_id,
                data_kv: {
                    hosted_file_id: hosted_file_obj_li[0].hosted_file_id,
                    // file_path: hosted_file_obj_li[0].file_path,
                    filename: hosted_file_obj_li[0].filename,
                    file_extension: hosted_file_obj_li[0].extension,
                    archive_content_type: 'hosted_file'
                },
                log_lvl: log_lvl
            })
            .then(function (archive_content_obj_update_result) {
                // $idaa_slct.archive_content_obj = $lq__archive_content_obj;
                $idaa_slct.archive_content_obj =
                    archive_content_obj_update_result;
                $idaa_slct.archive_content_obj.upload_complete = true;
                if (
                    !Array.isArray(
                        $idaa_slct.archive_content_obj.hosted_file_id_li
                    )
                ) {
                    $idaa_slct.archive_content_obj.hosted_file_id_li = [];
                }
                if (
                    !Array.isArray(
                        $idaa_slct.archive_content_obj.hosted_file_obj_li
                    )
                ) {
                    $idaa_slct.archive_content_obj.hosted_file_obj_li = [];
                }
            })
            .catch(function (error: any) {
                console.log('Something went wrong.');
                console.log(error);
                return false;
            });
    }

    $effect(() => {
        if (
            $idaa_slct.archive_content_obj?.upload_complete &&
            $idaa_slct.archive_content_obj?.hosted_file_id_li?.length &&
            $idaa_slct.archive_content_obj.hosted_file_obj_li?.length
        ) {
            handle_hosted_files_uploaded(
                $idaa_slct.archive_content_obj.hosted_file_id_li,
                $idaa_slct.archive_content_obj.hosted_file_obj_li
            );
        }
    });

    let slct_hosted_file_id: any = $state(null);
    let slct_hosted_file_obj: any = $state(null);
    $effect(() => {
        if (slct_hosted_file_id && slct_hosted_file_obj) {
            console.log(
                `*** handle_hosted_file_selected() *** ${slct_hosted_file_id}`
            );
            // We need to update the archive_content_obj with the new file (for now just the first one).
            prom_api__archive_content_obj = archives_func
                .update_ae_obj__archive_content({
                    api_cfg: $ae_api,
                    archive_content_id: $idaa_slct.archive_content_id,
                    data_kv: {
                        hosted_file_id: slct_hosted_file_id,
                        // file_path: hosted_file_obj_li[0].file_path,
                        filename: slct_hosted_file_obj.filename,
                        file_extension: slct_hosted_file_obj.extension,
                        archive_content_type: 'hosted_file'
                    },
                    log_lvl: log_lvl
                })
                .then(function (archive_content_obj_update_result) {
                    // $idaa_slct.archive_content_obj = $lq__archive_content_obj;
                    $idaa_slct.archive_content_obj =
                        archive_content_obj_update_result;
                    $idaa_slct.archive_content_obj.upload_complete = false;
                    if (
                        !Array.isArray(
                            $idaa_slct.archive_content_obj.hosted_file_id_li
                        )
                    ) {
                        $idaa_slct.archive_content_obj.hosted_file_id_li = [];
                    }
                    if (
                        !Array.isArray(
                            $idaa_slct.archive_content_obj.hosted_file_obj_li
                        )
                    ) {
                        $idaa_slct.archive_content_obj.hosted_file_obj_li = [];
                    }
                })
                .catch(function (error: any) {
                    console.log('Something went wrong.');
                    console.log(error);
                    return false;
                });

            slct_hosted_file_id = null;
            slct_hosted_file_obj = null;
        }
    });
</script>

<section
    class="
        svelte_component ae_section ae_edit archive_content_obj edit__archive_content_obj
        space-y-2 p-2
        rounded-md
        preset-filled-surface-50-950 preset-outlined-warning-400-600
        "
    class:ae_create={!$idaa_slct.archive_content_id}
>
    <!-- bind:clientHeight={ae_iframe_height} -->

    <form onsubmit={prevent_default(handle_submit_form)} class="space-y-1">
        {#await prom_api__archive_content_obj}
            <div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>
                Saving...
            </div>
        {:then}
            {#if prom_api__archive_content_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}

        <!-- <h3>Archive Content</h3> -->

        <div
            class="ae_section archive_content__general border border-gray-200 rounded p-2 space-y-2"
        >
            <div>
                <label for="name" class="w-full">
                    <span class="text-sm font-semibold"> Name of Content </span>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        required
                        max="200"
                        value={$idaa_slct.archive_content_obj?.name
                            ? $idaa_slct.archive_content_obj.name
                            : ''}
                        autocomplete="off"
                        class="
                    input w-full
                    preset-tonal-surface hover:preset-filled-surface-100-900
                    form-control
                    "
                        placeholder="Content name"
                    />
                </label>

                <label for="description" class="ae_label w-full">
                    <span class="legend text-sm font-semibold">
                        Description
                    </span>
                    <AE_Comp_Editor_TipTap
                        bind:content={description_new_html}
                        class_li="preset-tonal-surface hover:preset-filled-surface-100-900"
                        placeholder="Your content description here..."
                    />
                </label>
            </div>

            <label for="archive_content_type"
                >Type
                <select
                    id="archive_content_type"
                    name="archive_content_type"
                    bind:value={
                        $idaa_slct.archive_content_obj.archive_content_type
                    }
                    class="select w-52"
                >
                    <option value="">-- None --</option>
                    <option value="hosted_file" selected
                        >Hosted File in Æ</option
                    >
                    <option value="html">Hosted HTML in Æ</option>
                    <option value="json">Hosted JSON in Æ</option>
                    <option value="url">External URL</option>
                    <option value="other">Other</option>
                </select>
            </label>

            <!-- <fieldset class="">
            <legend class="">Public Access with Rotating Access Key/Passcode</legend>
            <label for="enable_for_public_no" class="">No, disable public access
                <input
                    type="radio"
                    class="radio"
                    id="enable_for_public_no"
                    name="enable_for_public"
                    value={false}
                    bind:group={$idaa_slct.archive_content_obj.enable_for_public}
                    >
            </label>
            <label for="enable_for_public_yes" class="">Yes, allow public access
                <input
                    type="radio"
                    class="radio"
                    id="enable_for_public_yes"
                    name="enable_for_public"
                    value={true}
                    bind:group={$idaa_slct.archive_content_obj.enable_for_public}
                    >
            </label>
        </fieldset> -->
        </div>

        {#if $idaa_slct.archive_content_id}
            <div
                class="ae_section archive_content__hosted_file border border-gray-200 rounded p-2 space-y-2"
                class:hidden={$idaa_slct.archive_content_obj
                    .archive_content_type !== 'hosted_file' &&
                    !$idaa_slct.archive_content_id}
            >
                <h3 class="h3">Upload/Manage Hosted File</h3>

                {#if !$idaa_slct.archive_content_obj?.hosted_file_id}
                    No file uploaded yet.

                    {#if $ae_loc.trusted_access}
                        <button
                            type="button"
                            class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
                            title="Toggle between Upload and Select from Hosted Files"
                            onclick={() => {
                                if (
                                    $ae_sess.files.add_to_use_files_method ==
                                    'upload'
                                ) {
                                    $ae_sess.files.add_to_use_files_method =
                                        'select';
                                } else {
                                    $ae_sess.files.add_to_use_files_method =
                                        'upload';
                                }
                            }}
                        >
                            <span class="fas fa-exchange-alt m-1"></span>
                            Upload/Select
                        </button>

                        <div
                            class:hidden={$ae_sess.files
                                .add_to_use_files_method != 'upload'}
                            class="upload"
                        >
                            <Comp_hosted_files_upload
                                class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
                                link_to_type="archive_content"
                                link_to_id={$idaa_slct.archive_content_obj
                                    .archive_content_id}
                                bind:hosted_file_id_li={
                                    $idaa_slct.archive_content_obj
                                        .hosted_file_id_li
                                }
                                bind:hosted_file_obj_li={
                                    $idaa_slct.archive_content_obj
                                        .hosted_file_obj_li
                                }
                                bind:upload_complete={
                                    $idaa_slct.archive_content_obj
                                        .upload_complete
                                }
                                log_lvl={1}
                            >
                                {#snippet label()}
                                    <div
                                        class="flex flex-col items-center gap-2 py-2"
                                    >
                                        <div
                                            class="p-3 rounded-full bg-primary-500/10 text-primary-500"
                                        >
                                            <span class="fas fa-upload fa-lg"
                                            ></span>
                                        </div>
                                        <div class="text-center">
                                            <p
                                                class="font-bold text-primary-500"
                                            >
                                                Upload archive files
                                            </p>
                                            <p class="text-xs opacity-60">
                                                Recommended: pptx, key, PDF,
                                                mp3, mp4, docx
                                            </p>
                                        </div>
                                    </div>
                                {/snippet}
                            </Comp_hosted_files_upload>
                        </div>

                        <div
                            class:hidden={$ae_sess.files
                                .add_to_use_files_method != 'select'}
                            class=""
                        >
                            <Element_manage_hosted_file_li_wrap
                                link_to_type={'account'}
                                link_to_id={$ae_loc?.account_id}
                                allow_basic={true}
                                allow_moderator={true}
                                class_li={''}
                                bind:slct_hosted_file_kv
                                bind:slct_hosted_file_id
                                bind:slct_hosted_file_obj
                            />
                        </div>
                    {/if}
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            if (
                                confirm(
                                    'Are you sure you want to remove the file?'
                                )
                            ) {
                                // First - Attempt to delete the hosted file
                                prom_api__archive_content_obj__hosted_file =
                                    core_func
                                        .delete_ae_obj_id__hosted_file({
                                            api_cfg: $ae_api,
                                            hosted_file_id:
                                                $idaa_slct.archive_content_obj
                                                    .hosted_file_id,
                                            link_to_type: 'archive_content',
                                            link_to_id:
                                                $idaa_slct.archive_content_id,
                                            rm_orphan: true,
                                            fake_delete: false,
                                            log_lvl: log_lvl
                                        })
                                        .then(function (delete_result) {
                                            // Second - If deleted, then update the archive_content_obj
                                            console.log(
                                                `File removed. Now update the archive_content_obj`
                                            );
                                            prom_api__archive_content_obj =
                                                archives_func
                                                    .update_ae_obj__archive_content(
                                                        {
                                                            api_cfg: $ae_api,
                                                            archive_content_id:
                                                                $idaa_slct.archive_content_id,
                                                            data_kv: {
                                                                hosted_file_id:
                                                                    null,
                                                                file_path: null,
                                                                filename: null,
                                                                file_extension:
                                                                    null,
                                                                archive_content_type:
                                                                    null
                                                            },
                                                            log_lvl: log_lvl
                                                        }
                                                    )
                                                    .then(
                                                        function (
                                                            archive_content_obj_update_result
                                                        ) {
                                                            // We need to do all of this since the DB object has changed and the SLCT object does automatically update (yet...??? Svelte 5?).
                                                            // $idaa_slct.archive_content_obj = $lq__archive_content_obj;
                                                        }
                                                    )
                                                    .catch(function (
                                                        error: any
                                                    ) {
                                                        console.log(
                                                            'Something went wrong.'
                                                        );
                                                        console.log(error);
                                                        return false;
                                                    });
                                        })
                                        .catch(function (error: any) {
                                            console.log(
                                                'Something went wrong.'
                                            );
                                            console.log(error);
                                            return false;
                                        })
                                        .finally(() => {
                                            // We need to do all of this since the DB object has changed and the SLCT object does automatically update (yet...??? Svelte 5?).
                                            $idaa_slct.archive_content_obj.hosted_file_id =
                                                null;
                                            $idaa_slct.archive_content_obj.file_path =
                                                null;
                                            $idaa_slct.archive_content_obj.filename =
                                                null;
                                            $idaa_slct.archive_content_obj.file_extension =
                                                null;

                                            $idaa_slct.archive_content_obj.upload_complete = false;
                                            $idaa_slct.archive_content_obj.hosted_file_id_li =
                                                [];
                                            $idaa_slct.archive_content_obj.hosted_file_obj_li =
                                                [];
                                        });
                            }
                        }}
                        class="novi_btn btn btn-sm preset-tonal-error float-right"
                    >
                        {#await prom_api__archive_content_obj__hosted_file}
                            <span class="fas fa-spinner fa-spin m-1"></span>
                        {:then}
                            <span class="fas fa-trash-alt m-1"></span>
                            Remove File
                        {/await}
                        <!-- <span class="fas fa-trash-alt m-1"></span>
                Remove File -->
                    </button>

                    <!-- <label for="file_path">File Path
                {#if !$ae_loc.administrator_access}
                    <span class="fas fa-lock" title="Field is locked"></span>
                {:else}
                    <span class="fas fa-unlock" title="Field is unlocked"></span>
                {/if}
                <input
                    type="text"
                    id="file_path"
                    name="file_path"
                    value={($idaa_slct.archive_content_obj.file_path ? $idaa_slct.archive_content_obj.file_path : '')}
                    readonly={!$ae_loc.administrator_access}
                    class="input w-full"
                    >
            </label> -->

                    <label for="filename"
                        >Filename
                        <input
                            type="text"
                            id="filename"
                            name="filename"
                            value={$idaa_slct.archive_content_obj.filename
                                ? $idaa_slct.archive_content_obj.filename
                                : 'unknown'}
                            class="input w-full"
                        />
                    </label>

                    <label for="file_extension"
                        >File Extension
                        {#if !$ae_loc.administrator_access}
                            <span class="fas fa-lock" title="Field is locked"
                            ></span>
                        {:else}
                            <span
                                class="fas fa-unlock"
                                title="Field is unlocked"
                            ></span>
                        {/if}
                        <input
                            type="text"
                            id="file_extension"
                            name="file_extension"
                            value={$idaa_slct.archive_content_obj.file_extension
                                ? $idaa_slct.archive_content_obj.file_extension
                                : 'ext'}
                            readonly={!$ae_loc.administrator_access}
                            class="input w-24"
                        />
                    </label>
                {/if}
            </div>
        {:else}
            <div
                class="ae_section archive_content__hosted_file border border-gray-200 rounded p-2 space-y-2"
            >
                <span class="fas fa-exclamation-triangle text-red-500"></span>
                Save the form first before uploading a file.
            </div>
        {/if}

        <div
            class="ae_section archive_content__original border border-gray-200 rounded p-2 space-y-2"
        >
            <h3 class="h3">Original</h3>

            <label for="original_datetime"
                >Original Date/Time
                <input
                    type="date"
                    id="original_datetime_date"
                    name="original_datetime_date"
                    value={$idaa_slct.archive_content_obj.original_datetime
                        ? ae_util.iso_datetime_formatter(
                              $idaa_slct.archive_content_obj.original_datetime,
                              'date_iso'
                          )
                        : ''}
                    placeholder="YYYY-MM-DD"
                    class="input w-48"
                />
                <input
                    type="time"
                    id="original_datetime_time"
                    name="original_datetime_time"
                    value={$idaa_slct.archive_content_obj.original_datetime
                        ? ae_util.iso_datetime_formatter(
                              $idaa_slct.archive_content_obj.original_datetime,
                              'time_iso'
                          )
                        : ''}
                    placeholder="HH:MM AM/PM"
                    class="input w-48"
                />
            </label>

            <fieldset class="flex_row flex_gap_md flex_justify_around">
                <label for="original_timezone"
                    >Original Timezone
                    {#if lu_time_zone_list}
                        <select
                            id="original_timezone"
                            name="original_timezone"
                            value={$idaa_slct.archive_content_obj
                                .original_timezone
                                ? $idaa_slct.archive_content_obj
                                      .original_timezone
                                : $ae_loc.current_timezone}
                            class="select w-56"
                            title="Select the original timezone"
                        >
                            <option value="">-- None --</option>
                            {#each lu_time_zone_list as lu_timezone (lu_timezone.name)}
                                <option value={lu_timezone.name}>
                                    {lu_timezone.name}
                                </option>
                            {/each}
                        </select>
                    {:else}
                        <input
                            type="text"
                            name="timezone"
                            value={$idaa_slct.archive_content_obj
                                .original_timezone
                                ? $idaa_slct.archive_content_obj
                                      .original_timezone
                                : $ae_loc.current_timezone}
                            class="input w-56"
                        />
                    {/if}
                </label>
            </fieldset>

            <label for="original_location"
                >Original Location
                <input
                    type="text"
                    id="original_location"
                    name="original_location"
                    value={$idaa_slct.archive_content_obj.original_location}
                    class="input w-96"
                />
            </label>
        </div>

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

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

                        <fieldset
                            class="flex flex-row gap-1 items-center justify-center form-check"
                        >
                            <legend
                                class="legend text-sm font-semibold form-check-label"
                                >Priority</legend
                            >
                            <div>
                                <input
                                    type="radio"
                                    id="priority_yes"
                                    name="priority"
                                    value={true}
                                    bind:group={
                                        $idaa_slct.archive_content_obj.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={
                                        $idaa_slct.archive_content_obj.priority
                                    }
                                    class="radio form-check-input"
                                />
                                <label for="priority_no">No</label>
                            </div>
                        </fieldset>
                    </span>

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

                        <label class="legend text-sm font-semibold input-group"
                            >Group <input
                                type="text"
                                name="group"
                                value={$idaa_slct.archive_content_obj.group ??
                                    ''}
                                max="100"
                                class="input w-40 preset-tonal-surface form-control"
                            /></label
                        >
                    </span>

                    {#if $ae_loc.administrator_access}
                        <span
                            class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow"
                        >
                            <fieldset
                                class="flex flex-row gap-1 items-center align-center form-check"
                            >
                                <legend
                                    class="legend text-sm font-semibold form-check-label"
                                    >Enable</legend
                                >
                                <div>
                                    <input
                                        type="radio"
                                        id="enable_yes"
                                        name="enable"
                                        value={true}
                                        bind:group={
                                            $idaa_slct.archive_content_obj
                                                .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={
                                            $idaa_slct.archive_content_obj
                                                .enable
                                        }
                                        class="radio form-check-input"
                                    />
                                    <label for="enable_no">No</label>
                                </div>
                            </fieldset>
                        </span>
                    {:else}
                        <input
                            type="hidden"
                            name="enable"
                            value={$idaa_slct.archive_content_obj.enable}
                        />
                    {/if}
                </span>

                {#if $ae_loc.trusted_access}
                    <label for="notes" class="w-full">
                        <span
                            class="legend text-sm font-semibold text-surface-600-400"
                            >Internal Staff Notes</span
                        >
                        <AE_Comp_Editor_TipTap
                            bind:content={notes_new_html}
                            class_li="preset-tonal-surface preset-filled-surface-100-900"
                            placeholder="Internal notes for staff only. Not shown to the public."
                        />
                    </label>
                {/if}

                <div class="text-sm text-gray-600 dark:text-gray-400">
                    {$lq__archive_content_obj?.updated_on
                        ? `DB Updated on: ${$lq__archive_content_obj?.updated_on}`
                        : ''}
                    {$idaa_slct.archive_content_obj?.updated_on
                        ? `SLCT Updated on: ${$idaa_slct.archive_content_obj?.updated_on}`
                        : ''}
                </div>
                </div>
            </div>
            <!-- END: section archive_content__admin_options -->
        {/if}

        <div
            class="
            ae_section ae_options ae_row ae_actions post__options post__actions
            flex flex-row gap-1 items-center justify-between w-full
            d-flex align-items-center justify-content-between
        "
        >
            <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__archive_content_obj}
                    <span class="fas fa-spinner fa-spin m-1"></span> Saving
                {:then}
                    <span class="fas fa-save m-1"></span> Save Changes
                {/await}
                <!-- <span class="fas fa-check m-1"></span> -->
                <!-- Save Archive Content -->
            </button>

            {#if $idaa_slct.archive_content_id && !$idaa_slct.archive_content_obj?.hosted_file_id}
                <button
                    type="button"
                    onclick={() => {
                        if (
                            !confirm(
                                'Are you sure you want to remove this archive content?'
                            )
                        ) {
                            return false;
                        }

                        let method = 'disable';

                        prom_api__archive_content_obj =
                            archives_func.delete_ae_obj_id__archive_content({
                                api_cfg: $ae_api,
                                archive_content_id:
                                    $idaa_slct.archive_content_id,
                                method: method as any,
                                log_lvl: log_lvl
                            });

                        $idaa_slct.archive_content_id = null;
                        $idaa_slct.archive_content_obj = {};
                        $idaa_sess.archives.show__modal_edit__archive_content_id = false;
                        $idaa_sess.archives.show__modal_view__archive_content_id = false;
                    }}
                    class="
                    novi_btn
                    btn btn-sm
                    preset-filled-warning-200-800 hover:preset-filled-error-200-800
                    transition
                    "
                    title="Disable this archive content"
                >
                    <span class="fas fa-minus m-1"></span>
                    Remove
                    {#if $ae_loc.administrator_access}
                        (Disable)
                    {/if}
                </button>

                {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
                    <button
                        type="button"
                        onclick={() => {
                            if (
                                !confirm(
                                    'Are you sure you want to delete this archive content?'
                                )
                            ) {
                                return false;
                            }

                            let method = 'delete';

                            prom_api__archive_content_obj =
                                archives_func.delete_ae_obj_id__archive_content(
                                    {
                                        api_cfg: $ae_api,
                                        archive_content_id:
                                            $idaa_slct.archive_content_id,
                                        method: method as any,
                                        log_lvl: log_lvl
                                    }
                                );

                            $idaa_slct.archive_content_id = null;
                            $idaa_slct.archive_content_obj = {};
                            $idaa_sess.archives.show__modal_edit__archive_content_id = false;
                            $idaa_sess.archives.show__modal_view__archive_content_id = false;
                        }}
                        class="
                    novi_btn
                    btn btn-sm
                    preset-filled-warning-200-800 hover:preset-filled-error-200-800
                    transition
                    "
                        title="Delete this archive content"
                    >
                        <span class="fas fa-minus m-1"></span>
                        Delete
                    </button>
                {/if}
            {:else if $idaa_slct.archive_content_obj.hosted_file_id}
                {#if $ae_loc.administrator_access}
                    Can not delete. Remove hosted file first.
                {/if}
            {/if}
        </div>
    </form>
</section>
<!-- END: section ae_edit archive_content_obj -->
