<script lang="ts">
    import { onMount } from 'svelte';
    // import { liveQuery } from "dexie";
    import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';

    import type { key_val } from '$lib/stores/ae_stores';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import { api } from '$lib/api/api';

    // import { core_func } from '$lib/ae_core_functions';
    import {
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import { db_events } from '$lib/ae_events/db_events';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger
    } from '$lib/stores/ae_events_stores';
    import { events_func } from '$lib/ae_events_functions';
    import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
    import { Check, Clock, Download, Eye, EyeOff, FileImage, FolderOpen, Laptop, LoaderCircle, Monitor, Pencil, RefreshCw, Save, Trash2, TriangleAlert } from '@lucide/svelte';
    interface Props {
        log_lvl?: number;
        container_class_li?: string | Array<string>;
        lq__event_file_obj_li: any;
        link_to_type: string;
        link_to_id: string;
        allow_basic?: boolean;
        allow_moderator?: boolean;
        display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
        // WHY: event_file.event_session_type_code is NULL for presenter-linked files because
        // v_event_file joins event_session only via event_file.event_session_id, which is NULL
        // when for_type='event_presenter'. The wrapper derives the correct type from the
        // presenter → presentation → session chain and passes it here as context.
        context_session_type_code?: string | null;
    }

    let {
        log_lvl = 0,
        container_class_li = [],
        lq__event_file_obj_li,
        link_to_type,
        link_to_id,
        allow_basic = false,
        allow_moderator = false,
        display_mode = 'default',
        context_session_type_code = null
    }: Props = $props();

    // export let show_convert_btn: null|boolean = null;

    // let ae_placeholder_li: key_val = {};
    let ae_promises: key_val = $state({});
    let ae_tmp: key_val = $state({});
    ae_tmp.show__file_li = true;
    ae_tmp.show__direct_download = $events_loc.pres_mgmt.show__direct_download;
    // let ae_triggers: key_val = {};

    onMount(() => {
        if (log_lvl) {
            console.log(
                `Element - Manage Event File List: link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`
            );
            console.log(
                `allow_basic: ${allow_basic}; allow_moderator: ${allow_moderator}`
            );
        }
    });

    let clipboard_success = $state(false);

    // PDF → Image conversion state (keyed by event_file_id)
    // WHY: Poster sessions display files in the Launcher modal via <img> tag — PDFs can't render there.
    // Presenters upload PDFs which must be converted server-side to high-res webp images.
    // Button is only shown in edit_mode for PDF files linked to a poster-type session.
    // Backend: /v3/action/hosted_file/{id}/convert_file runs pdf2image (3840px wide, first page only)
    // and saves the result as a new hosted_file record linked to the same parent object.
    type ConvertStatus = 'idle' | 'converting' | 'done' | 'error';
    let convert_status_kv: Record<string, ConvertStatus> = $state({});
    let convert_result_kv: key_val = $state({});

    async function handle_convert_pdf_to_image(event_file_obj: key_val) {
        const file_id = event_file_obj.event_file_id;
        convert_status_kv[file_id] = 'converting';
        try {
            // Link the new image to the most specific parent available
            const link_to_type_val = event_file_obj.event_session_id ? 'event_session'
                : event_file_obj.event_presentation_id ? 'event_presentation'
                : 'event';
            const link_to_id_val = event_file_obj.event_session_id
                || event_file_obj.event_presentation_id
                || event_file_obj.event_id;
            const filename_no_ext = (event_file_obj.filename ?? 'poster_image').replace(/\.pdf$/i, '');
            const url = `${$ae_api.base_url}/v3/hosted_file/${event_file_obj.hosted_file_id}/convert_file`
                + `?link_to_type=${encodeURIComponent(link_to_type_val)}`
                + `&link_to_id=${encodeURIComponent(link_to_id_val)}`
                + `&filename_no_ext=${encodeURIComponent(filename_no_ext)}`
                + `&to_type=webp`;
            const resp = await fetch(url, {
                headers: {
                    'x-aether-api-key': $ae_api.api_secret_key,
                    'x-account-id': String($ae_api.account_id ?? '')
                }
            });
            const body = await resp.json();
            if (resp.ok && body?.data) {
                convert_result_kv[file_id] = body.data;
                convert_status_kv[file_id] = 'done';
            } else {
                console.error('[convert_pdf] API error:', body);
                convert_status_kv[file_id] = 'error';
            }
        } catch (err) {
            console.error('[convert_pdf] Fetch failed:', err);
            convert_status_kv[file_id] = 'error';
        }
    }
</script>

<div class="float-right flex flex-row items-center">
    <button
        type="button"
        onclick={() => {
            console.log('*** Refresh button clicked ***');

            db_events.file.clear();

            // let params = {
            //     qry__enabled: 'all',
            //     qry__hidden: 'all',
            // }

            events_func.load_ae_obj_li__event_file({
                api_cfg: $ae_api,
                for_obj_type: link_to_type,
                for_obj_id: link_to_id,
                enabled: 'all',
                hidden: 'all',
                // params: params,
                try_cache: true
            });

            // ae_tmp.show__file_li = false;
            // console.log(`$lq__event_file_obj_li:`, $lq__event_file_obj_li);
            // $slct_trigger = 'load__event_file_obj_li';
            // ae_tmp.show__file_li = true;
        }}
        class="btn btn-sm p-1 m-1 preset-tonal-tertiary hover:preset-tonal-warning border border-warning-500 transition hover:transition-all *:hover:inline"
        class:hidden={!$ae_loc.edit_mode || !$ae_loc.authenticated_access}
        title="Refresh the list of files"
    >
        <RefreshCw size="1em" class="m-1" />
        <div class="hidden">Files</div>
    </button>

    <button
        type="button"
        onclick={() => {
            console.log('*** Show Alt Download button clicked ***');
            ae_tmp.show__direct_download = !ae_tmp.show__direct_download;
        }}
        class="btn btn-sm p-1 m-1 preset-tonal-tertiary hover:preset-tonal-warning border border-warning-500 transition hover:transition-all *:hover:inline"
        class:hidden={!$ae_loc.edit_mode || !$ae_loc.trusted_access}
        title="Toggle direct download link and copy link button"
    >
        <Download size="1em" class="m-1" />
        <div class="hidden">
            {ae_tmp.show__direct_download ? 'Alt On' : 'Alt Download Off'}
        </div>
    </button>
</div>

<section
    class="svelte_component event_file_uploaded_manage {container_class_li}"
    class:text-sm={display_mode != 'default'}
>
    <h3
        class="h6"
        class:hidden={!$lq__event_file_obj_li?.length ||
            display_mode != 'default'}
    >
        Manage Files:
        <span
            class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
            title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ??
                '-- not set --'} (files: {$lq__event_file_obj_li?.length ??
                'None'})"
        >
            <FolderOpen size="1em" class="mx-1" />
            {@html $lq__event_file_obj_li
                ? `${$lq__event_file_obj_li.length}&times;`
                : '-- none --'}
        </span>
    </h3>

    {#if $lq__event_file_obj_li && $lq__event_file_obj_li.length}
        <div class="overflow-auto w-full">
            <table class="table-auto w-full">
                {#if display_mode === 'default'}
                    <thead>
                        <tr>
                            <th class="text-center">Download File</th>
                            {#if display_mode === 'default'}
                                <th
                                    class="text-center"
                                    class:hidden={!allow_basic &&
                                        !$ae_loc.trusted_access}>Options</th
                                >
                            {/if}
                            {#if display_mode === 'default'}
                                <th
                                    class="text-center"
                                    class:hidden={!allow_basic &&
                                        !$ae_loc.trusted_access}>Status</th
                                >
                            {/if}
                            <th class="text-center">Meta</th>
                        </tr>
                    </thead>
                {/if}

                <tbody>
                    {#each $lq__event_file_obj_li as event_file_obj (event_file_obj.event_file_id)}
                        {@const ExtIcon = ae_util.file_extension_icon_lucide(event_file_obj.extension)}
                        <tr
                            class="ae_obj obj_event_file border-t border-b border-surface-200-800 hover:bg-surface-100-900 hover:border-surface-300-700 transition-colors duration-200"
                            class:dim={event_file_obj?.hide}
                        >
                            <td class="event_file__file align-middle">
                                {#if $events_sess.pres_mgmt?.show_field_edit__filename != event_file_obj.event_file_id}
                                    <div class="flex flex-col gap-2">
                                        <AE_Comp_Hosted_Files_Download_Button
                                            hosted_file_id={event_file_obj?.hosted_file_id}
                                            hosted_file_obj={event_file_obj}
                                            show_divider={true}
                                            show_direct_download={ae_tmp.show__direct_download}
                                            max_filename={30}
                                            classes="btn btn-sm lg:btn-md preset-tonal-primary hover:preset-filled-primary-500 min-w-72 lg:min-w-96"
                                        />

                                        <!-- PDF → webp convert button: only for poster sessions in edit mode -->
                                        {#if $ae_loc.edit_mode && event_file_obj?.extension === 'pdf' && (event_file_obj?.event_session_type_code === 'poster' || context_session_type_code === 'poster')}
                                            <div>
                                                {#if !convert_status_kv[event_file_obj.event_file_id] || convert_status_kv[event_file_obj.event_file_id] === 'idle'}
                                                    <button
                                                        type="button"
                                                        class="btn btn-sm preset-tonal-warning border border-warning-500"
                                                        title="Convert this PDF to a high-res webp image for use in the Launcher poster display."
                                                        onclick={() => handle_convert_pdf_to_image(event_file_obj)}
                                                    >
                                                        <FileImage size="1em" class="mx-1" />
                                                        Convert PDF → Image
                                                    </button>
                                                {:else if convert_status_kv[event_file_obj.event_file_id] === 'converting'}
                                                    <span class="btn btn-sm preset-tonal-surface opacity-60 cursor-wait">
                                                        <LoaderCircle size="1em" class="mx-1 animate-spin" />
                                                        Converting…
                                                    </span>
                                                {:else if convert_status_kv[event_file_obj.event_file_id] === 'done'}
                                                    <span class="btn btn-sm preset-tonal-success" title="Conversion complete. New webp hosted_file created: {convert_result_kv[event_file_obj.event_file_id]?.filename ?? ''}">
                                                        <Check size="1em" class="mx-1" />
                                                        Done — {convert_result_kv[event_file_obj.event_file_id]?.filename ?? 'image created'}
                                                    </span>
                                                {:else if convert_status_kv[event_file_obj.event_file_id] === 'error'}
                                                    <button
                                                        type="button"
                                                        class="btn btn-sm preset-tonal-error border border-error-500"
                                                        title="Conversion failed. Click to retry."
                                                        onclick={() => {
                                                            convert_status_kv[event_file_obj.event_file_id] = 'idle';
                                                        }}
                                                    >
                                                        <TriangleAlert size="1em" class="mx-1" />
                                                        Failed — Retry?
                                                    </button>
                                                {/if}
                                            </div>
                                        {/if}

                                        {#if ae_tmp.show__direct_download}
                                            <div
                                                class="px-4 py-2 flex flex-col gap-0.5 bg-surface-100/50 rounded-lg border border-surface-500/10"
                                            >
                                                <div
                                                    class="flex flex-row items-center gap-2"
                                                >
                                                    <span
                                                        class="text-[10px] font-bold uppercase opacity-50 w-24"
                                                    >
                                                        Access Link:
                                                    </span>
                                                    <MyClipboard
                                                        value={encodeURI(
                                                            `${$ae_api.base_url}/v3/action/event_file/${event_file_obj?.event_file_id}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&key=${$ae_api.account_id}`
                                                        )}
                                                        btn_text="Copy Original"
                                                        btn_title="Copy the direct download link to the clipboard."
                                                        btn_class="btn btn-xs preset-tonal-warning hover:preset-filled-warning-500"
                                                    ></MyClipboard>

                                                    <MyClipboard
                                                        value={encodeURI(
                                                            `${$ae_api.base_url}/v3/action/event_file/${event_file_obj?.event_file_id}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&key=${$ae_api.account_id}`
                                                        )}
                                                        btn_text="Copy Renamed"
                                                        btn_title="Copy the renamed download link to the clipboard."
                                                        btn_class="btn btn-xs preset-tonal-warning hover:preset-filled-warning-500"
                                                    ></MyClipboard>
                                                </div>
                                            </div>
                                        {/if}
                                    </div>
                                {:else}
                                    <!-- Show change filename input field here -->
                                    <span class="flex flex-col gap-1 text-sm">
                                        <input
                                            type="text"
                                            size="12"
                                            placeholder="Filename"
                                            bind:value={
                                                $events_sess.pres_mgmt
                                                    .tmp_val__filename_no_ext
                                            }
                                            data-original_value={event_file_obj.filename}
                                            class="input min-w-72 lg:min-w-96 text-sm bg-warning-100"
                                            title="Rename this file. No extension."
                                        />
                                        {#if $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim() != event_file_obj.filename_no_ext}
                                            <button
                                                type="button"
                                                onclick={async () => {
                                                    let new_filename =
                                                        $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim();
                                                    // Remove possible double extension
                                                    new_filename =
                                                        new_filename.replace(
                                                            '.' +
                                                                event_file_obj.extension,
                                                            ''
                                                        );

                                                    // Add the extension back
                                                    new_filename =
                                                        new_filename +
                                                        '.' +
                                                        event_file_obj.extension;

                                                    // Remove any double dots
                                                    new_filename =
                                                        new_filename.replace(
                                                            /\.\./g,
                                                            '.'
                                                        );

                                                    let event_file_data = {
                                                        filename: new_filename
                                                    };

                                                    ae_promises.update__event_file_obj =
                                                        events_func
                                                            .update_ae_obj__event_file(
                                                                {
                                                                    api_cfg:
                                                                        $ae_api,
                                                                    event_file_id:
                                                                        event_file_obj.event_file_id,
                                                                    data_kv:
                                                                        event_file_data,
                                                                    log_lvl: 0
                                                                }
                                                            )
                                                            .then(
                                                                function (
                                                                    update_results
                                                                ) {
                                                                    console.log(
                                                                        `Update results:`,
                                                                        update_results
                                                                    );
                                                                    $events_sess.pres_mgmt.show_field_edit__filename = false;
                                                                }
                                                            );
                                                }}
                                                class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
                                                title="Save changes"
                                            >
                                                {#await ae_promises.update__event_file_obj}
                                                    <LoaderCircle size="1em" class="mx-1 animate-spin" />
                                                    <span class=""
                                                        >Saving {event_file_obj.extension}</span
                                                    >
                                                {:then}
                                                    <Save size="1em" class="mx-1" />
                                                    Save {event_file_obj.extension}
                                                    filename?
                                                {/await}
                                            </button>
                                        {/if}
                                    </span>
                                {/if}
                            </td>

                            {#if display_mode === 'default'}
                                <td
                                    class="event_file__options"
                                    class:hidden={!allow_basic &&
                                        !$ae_loc.trusted_access}
                                >
                                    <div class="flex flex-col gap-1 text-sm">
                                        <button
                                            type="button"
                                            disabled={!allow_basic &&
                                                !$ae_loc.trusted_access}
                                            onclick={() => {
                                                if (
                                                    $events_sess.pres_mgmt
                                                        .show_field_edit__filename ==
                                                    event_file_obj.event_file_id
                                                ) {
                                                    $events_sess.pres_mgmt.tmp_val__filename_no_ext =
                                                        '';
                                                    $events_sess.pres_mgmt.show_field_edit__filename = false;
                                                } else {
                                                    $events_sess.pres_mgmt.tmp_val__filename_no_ext =
                                                        event_file_obj.filename_no_ext;
                                                    $events_sess.pres_mgmt.show_field_edit__filename =
                                                        event_file_obj.event_file_id;
                                                }
                                            }}
                                            class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
                                            class:preset-tonal-warning={$events_sess
                                                .pres_mgmt
                                                .show_field_edit__filename ==
                                                event_file_obj.event_file_id}
                                            title={`Rename this file? "${event_file_obj.filename}"}`}
                                        >
                                            <Pencil size="1em" class="mx-1" />
                                            {#if $events_sess.pres_mgmt?.show_field_edit__filename == event_file_obj.event_file_id}
                                                Cancel?
                                            {:else}
                                                Rename
                                            {/if}
                                        </button>

                                        <button
                                            type="button"
                                            disabled={!allow_basic &&
                                                !$ae_loc.trusted_access}
                                            onclick={async () => {
                                                let event_file_data = {
                                                    hide: !event_file_obj.hide
                                                };

                                                ae_promises.update__event_file_obj =
                                                    events_func
                                                        .update_ae_obj__event_file(
                                                            {
                                                                api_cfg:
                                                                    $ae_api,
                                                                event_file_id:
                                                                    event_file_obj.event_file_id,
                                                                data_kv:
                                                                    event_file_data,
                                                                log_lvl: 0
                                                            }
                                                        )
                                                        .then(
                                                            function (
                                                                update_results
                                                            ) {
                                                                console.log(
                                                                    `Update results:`,
                                                                    update_results
                                                                );

                                                                // let params = {
                                                                //     qry__enabled: 'all',
                                                                //     qry__hidden: 'all',
                                                                // }

                                                                events_func.load_ae_obj_li__event_file(
                                                                    {
                                                                        api_cfg:
                                                                            $ae_api,
                                                                        for_obj_type:
                                                                            link_to_type,
                                                                        for_obj_id:
                                                                            link_to_id,
                                                                        enabled:
                                                                            'all',
                                                                        hidden: 'all',
                                                                        // params: params,
                                                                        try_cache: true
                                                                    }
                                                                );
                                                            }
                                                        );
                                            }}
                                            class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
                                            title="Hide this file from the presentation launcher"
                                        >
                                            <!-- Users see this as the "Archive" option button -->
                                            <!-- {@html (event_file_obj?.hide ? '<span class="fas fa-archive m-1"></span> Unarchive' : '<span class="fas fa-archive m-1"></span> Archive')}
                                             -->

                                            {#await ae_promises.update__event_file_obj}
                                                <LoaderCircle size="1em" class="mx-1 animate-spin" />
                                                <span class=""
                                                    >Saving {event_file_obj.extension}</span
                                                >
                                            {:then}
                                                {#if event_file_obj.hide}
                                                    <Eye size="1em" class="m-1" /> Unhide File
                                                {:else}
                                                    <EyeOff size="1em" class="m-1" /> Hide
                                                {/if}
                                            {/await}
                                        </button>

                                        <button
                                            type="button"
                                            disabled={!allow_basic &&
                                                !$ae_loc.trusted_access}
                                            onclick={async () => {
                                                if (
                                                    !confirm(
                                                        `Are you sure you want to delete this file?\n${event_file_obj.filename} [${event_file_obj.event_file_id}]`
                                                    )
                                                ) {
                                                    return false;
                                                }

                                                // ae_promises[event_file_obj.event_file_id] = handle_delete__event_file({event_file_id: event_file_obj.event_file_id});

                                                ae_promises.delete__event_file_obj =
                                                    await events_func.delete_ae_obj_id__event_file(
                                                        {
                                                            api_cfg: $ae_api,
                                                            event_file_id:
                                                                event_file_obj.event_file_id,
                                                            log_lvl: 1
                                                        }
                                                    );
                                            }}
                                            class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
                                            title="Delete this file"
                                        >
                                            <Trash2 size="1em" class="mx-1" />
                                            <!-- <span class="fas fa-minus mx-1"></span> -->
                                            Delete
                                        </button>
                                    </div>
                                </td>
                            {/if}

                            {#if display_mode === 'default'}
                                <td
                                    class="event_file__status"
                                    class:hidden={!allow_basic &&
                                        !$ae_loc.trusted_access}
                                >
                                    <div
                                        class="flex flex-col gap-1 items-center justify-center text-sm"
                                    >
                                        <div class="">
                                            {#if event_file_obj.open_in_os == 'win'}
                                                MS Windows <Monitor size="1em" class="inline-block" />
                                            {:else if event_file_obj.open_in_os == 'mac'}
                                                Apple macOS <Laptop size="1em" class="inline-block" />
                                            {/if}
                                        </div>

                                        <!-- Select from options for the purpose of this file -->
                                        <div>
                                            <label
                                                for="file_purpose"
                                                class="text-sm mx-1 hidden"
                                            >
                                                Purpose:
                                            </label>
                                            <select
                                                id="file_purpose"
                                                name="file_purpose"
                                                disabled={!allow_basic &&
                                                    !allow_moderator &&
                                                    !$ae_loc.trusted_access}
                                                value={event_file_obj.file_purpose}
                                                onchange={(e) => {
                                                    // ae_tmp[event_file_obj.event_file_id].file_purpose = (e.target as HTMLInputElement).value;
                                                    console.log(
                                                        `Selected file_purpose: ${(e.target as HTMLInputElement).value}`
                                                    );

                                                    let event_file_data = {
                                                        event_file_id:
                                                            event_file_obj.event_file_id,
                                                        file_purpose: (
                                                            e.target as HTMLInputElement
                                                        ).value
                                                    };

                                                    events_func
                                                        .update_ae_obj__event_file(
                                                            {
                                                                api_cfg:
                                                                    $ae_api,
                                                                event_file_id:
                                                                    event_file_obj.event_file_id,
                                                                data_kv:
                                                                    event_file_data,
                                                                log_lvl: 1
                                                            }
                                                        )
                                                        .then(
                                                            function (
                                                                update_results
                                                            ) {
                                                                console.log(
                                                                    `Update results:`,
                                                                    update_results
                                                                );
                                                                $slct_trigger =
                                                                    'load__event_file_obj_li';
                                                            }
                                                        );

                                                    // ae_triggers.update_event_file_purpose = true;
                                                }}
                                                class="select min-w-fit max-w-fit text-xs mx-1 border border-surface-300-700 rounded-md p-1 bg-surface-50-900 hover:border-surface-400-600 transition-colors duration-200"
                                            >
                                                <option
                                                    value={null}
                                                    selected={!event_file_obj.file_purpose}
                                                    >-- purpose not set --</option
                                                >
                                                {#if $events_loc.pres_mgmt?.file_purpose_option_kv}
                                                    {#each Object.entries($events_loc.pres_mgmt.file_purpose_option_kv as any) as [key, file_purpose_option] (key)}
                                                        <option
                                                            value={key}
                                                            selected={event_file_obj.file_purpose ===
                                                                key}
                                                            disabled={(file_purpose_option as any)?.disabled &&
                                                                !$ae_loc.edit_mode}
                                                            class:hidden={(file_purpose_option as any)?.hidden &&
                                                                !$ae_loc.edit_mode}
                                                        >
                                                            {(file_purpose_option as any)?.name}
                                                        </option>
                                                    {/each}
                                                {/if}
                                                <!-- <option value="outline" selected={event_file_obj.file_purpose === 'outline'}>1. Outline</option> -->
                                                <!-- <option value="draft" selected={event_file_obj.file_purpose === 'draft'}>2. Draft</option> -->
                                                <!-- <option value="final" selected={event_file_obj.file_purpose === 'final'}>3. Final</option> -->
                                                <!-- <option value="supporting">X. Supporting File (audio, video, data, etc)</option> -->
                                                <!-- <option value="handout">X. Handout</option> -->
                                                <!-- <option value="other">X. Other</option> -->
                                                <!-- <option value="poster">Final - Poster</option> -->
                                                <!-- <option value="presentation">Final - Presentation</option> -->
                                                <!-- Shows in session room -->
                                            </select>
                                        </div>
                                    </div>
                                </td>
                            {/if}

                            <td class="event_file_info file_meta text-gray-500">
                                <div class="flex flex-col gap-0.5 text-xs">
                                    <!-- {event_file_obj.hosted_file_content_type} -->

                                    <span
                                        class="w-full flex flex-col lg:flex-row justify-between"
                                    >
                                        <span
                                            class:hidden={display_mode !=
                                                'default'}
                                        >
                                            Type:
                                            <strong
                                                >{event_file_obj.extension}
                                                <ExtIcon size="1em" class="inline-block" />
                                            </strong>
                                            <!-- {#if event_file_obj.open_in_os == 'win'}
                <strong>
                MS Windows <span class="fab fa-windows"></span>
                </strong>
            {:else if event_file_obj.open_in_os == 'mac'}
                <strong>
                Apple macOS <span class="fab fa-apple"></span>
                </strong>
            {/if} -->
                                        </span>
                                        <span>
                                            <span
                                                class:hidden={display_mode !=
                                                    'default'}
                                            >
                                                Size:
                                            </span>
                                            <strong
                                                >{ae_util.format_bytes(
                                                    event_file_obj.file_size
                                                )}</strong
                                            >
                                        </span>
                                    </span>

                                    <span
                                        class="w-full flex flex-col lg:flex-row justify-between"
                                    >
                                        <span
                                            title="SHA 256: {event_file_obj.hash_sha256}"
                                        >
                                            <span
                                                class:hidden={display_mode !=
                                                    'default'}
                                            >
                                                Hash:
                                            </span>
                                            <strong
                                                class:font-normal={display_mode !=
                                                    'default'}
                                                >{event_file_obj.hash_sha256.slice(
                                                    0,
                                                    10
                                                )}…</strong
                                            >
                                        </span>
                                        <span
                                            class:hidden={!$ae_loc.administrator_access ||
                                                display_mode != 'default'}
                                        >
                                            <span
                                                class:hidden={display_mode !=
                                                    'default'}
                                            >
                                                ID:
                                            </span>
                                            <strong
                                                >{event_file_obj.hosted_file_id}</strong
                                            >
                                        </span>
                                    </span>

                                    <!-- If this file was uploaded (created) within the last 15 minutes we want to highlight it in blue. -->
                                    <span
                                        class:bg-yellow-200={ae_util.is_datetime_recent(
                                            {
                                                datetime:
                                                    event_file_obj?.created_on,
                                                minutes: 30
                                            }
                                        )}
                                        class:bg-green-200={ae_util.is_datetime_recent(
                                            {
                                                datetime:
                                                    event_file_obj?.created_on,
                                                minutes: 240
                                            }
                                        )}
                                        class:bg-blue-200={ae_util.is_datetime_recent(
                                            {
                                                datetime:
                                                    event_file_obj?.created_on,
                                                minutes: 2880
                                            }
                                        )}
                                    >
                                        {#if display_mode == 'default'}
                                            <!-- <span class="fas fa-cloud-upload-alt mx-1"></span> -->
                                            <!-- Uploaded: -->
                                            <!-- <span class="fas fa-calendar-day mx-1"></span> -->
                                            <Clock size="1em" class="mx-1" />
                                            <strong>
                                                {ae_util.iso_datetime_formatter(
                                                    event_file_obj.created_on,
                                                    'dddd'
                                                )}
                                            </strong>
                                            {ae_util.iso_datetime_formatter(
                                                event_file_obj.created_on,
                                                'date_iso'
                                            )}
                                            at
                                            <strong
                                                >{ae_util.iso_datetime_formatter(
                                                    event_file_obj.created_on,
                                                    'time_12_short_no_leading'
                                                )}</strong
                                            >
                                            <!-- {event_file_obj.updated_on} -->
                                        {:else}
                                            <!-- <span class="fas fa-calendar-day mx-1"></span> -->
                                            <strong>
                                                {ae_util.iso_datetime_formatter(
                                                    event_file_obj.created_on,
                                                    'date_short'
                                                )}
                                                <!-- at -->
                                                <strong
                                                    >{ae_util.iso_datetime_formatter(
                                                        event_file_obj.created_on,
                                                        'time_12_short_no_leading'
                                                    )}</strong
                                                >
                                            </strong>
                                        {/if}
                                    </span>
                                </div>
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {:else}
        <p
            class="w-96 text-center text-gray-500"
            class:hidden={display_mode != 'default'}
        >
            No files uploaded to display
        </p>
    {/if}
</section>

<style>
</style>
