<script lang="ts">
interface Props {
    log_lvl?: number;
    event_file_id: string;
    event_file_obj: any;
    // export let os: string = null;
    max_filename_length?: number;
    hide_launch_icon?: boolean;
    hide_meta?: boolean;
    hide_created_on?: boolean;
    hide_os?: boolean;
    hide_size?: boolean;
    show_bak_download?: boolean;
    // export let hide_api_download: boolean = true;
    btn_size?: string;
    session_type?: string; // oral, poster, workshop, symposium, roundtable, other
    open_method?: null|string; // modal, download, native open (download, cache, copy, open), URL
    modal_title?: string;

    modal__title?: any;
    modal__open_event_file_id?: any;
    modal__event_file_obj?: any;
}

let {
    log_lvl = 0,
    event_file_id,
    event_file_obj = $bindable({}),
    max_filename_length = 50,
    hide_launch_icon = false,
    hide_meta = false,
    hide_created_on = false,
    hide_os = false,
    hide_size = false,
    show_bak_download = false,
    btn_size = 'btn_md',
    session_type = 'oral',
    open_method = 'download',
    modal_title = $bindable(''),

    modal__title = $bindable(''),
    modal__open_event_file_id = $bindable(null),
    modal__event_file_obj = $bindable(null),
}: Props = $props();

// *** Import Svelte specific
// import { preventDefault } from 'svelte/legacy';
import { onMount, tick } from 'svelte';
import { fade, scale, fly } from 'svelte/transition';

// *** Import other supporting libraries

// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';

import Element_ae_crud from '$lib/element_ae_crud.svelte';


// *** Functions and Logic
let ae_downloads: key_val = {};
let ae_promises: key_val = $state({});
let ae_tmp: key_val = $state({});
let ae_triggers: key_val = $state({});

let open_file_clicked: null|boolean = $state(null);
let open_file_status: null|string = $state(null); // null, 'checking_cache', 'checking_cache_failed', 'downloading_file', 'downloading_file_failed', 'opening_file', 'opening_file_failed', 'opening_file_success'
let open_file_status_message: null|string = $state(null);

if (!$events_loc.launcher.screen_saver_img_kv) {
    $events_loc.launcher.screen_saver_img_kv = {};
}

let screen_saver_exts = ['jpg', 'png', 'PNG', 'webp'];

if (screen_saver_exts.includes(event_file_obj.extension)) {
    // $events_loc.launcher.screen_saver_img_kv.push(event_file_obj);
    // $events_loc.launcher.screen_saver_img_kv[event_file_id] = event_file_obj;

    $events_loc.launcher.screen_saver_img_kv[event_file_id] = Object.create(event_file_obj);

    // let temp_obj = Object.create(event_file_obj)

    // $events_loc.launcher.screen_saver_img_kv[temp_obj.event_file_id_random] = Object.create(temp_obj);

    // $ae_event_launcher = $ae_event_launcher;
}

onMount(() => {
    console.log('** Component Mounted: ** Event Launcher File Container (Hash Open)');
    console.log(`Session Type: ${session_type}; Open Method: ${open_method}`);

    if (screen_saver_exts.includes(event_file_obj.extension)) {
        // $events_loc.launcher.screen_saver_img_kv[event_file_id] = event_file_obj;

        let temp_obj = Object.create(event_file_obj)

        $events_loc.launcher.screen_saver_img_kv[temp_obj.event_file_id_random] = Object.create(temp_obj);

        // $ae_event_launcher = $ae_event_launcher;
    }

    // window.addEventListener('message', function(event) {
    //     console.log('Message received in event file uploaded manage component:');
    //     console.log(event);

    //     if (event.data.type == 'api_download_blob') {
    //         console.log('Download blob (file) message received:');
    //         console.log(event.data);

    //         // Get the event_file_id from the event.data.endpoint value.
    //         // Example: /event/file/abc123/download

    //         let endpoint = event.data.endpoint;
    //         let event_file_id = endpoint.split('/')[3];

    //         ae_downloads[event_file_id] = {
    //             'size_total': event.data.size_total,
    //             'size_loaded': event.data.size_loaded,
    //             'percent_completed': event.data.percent_completed,
    //         };

    //         // let event_file_id = event.data.event_file_id;
    //         // let filename = event.data.filename;
    //         // let auto_download = event.data.auto_download;

    //         // ae_promises[event_file_id]
    //         // ae_promises[event_file_id] = download_event_file({ 'event_file_id': event_file_id, 'return_file': true, filename: filename, auto_download: auto_download, log_lvl: 1 });
    //     }
    // });
});

async function handle_open_file() {
    console.log('*** handle_open_file() ***');
    console.log(`App Mode: ${$events_loc.launcher.app_mode}; Cache Path: ${$events_loc.launcher.local_file_cache_path}; Temp Path: ${$events_loc.launcher.host_file_temp_path}`);

    // null or "default" is for regular use in their preferred browser.
    // "app" mode is for Electron and node.js.
    // "onsite" mode is for Chrome or Firefox and downloading files with modified extensions and other slight changes.

    if ($events_loc.launcher.app_mode == 'native' && native_app) {
        console.log('* ** *** **** BEGIN TESTING **** *** ** *');
        console.log('Process: Check local hash file cache, Download hash file to cache, and Open cached hash file after copying to temp directory');

        open_file_clicked = true;
        // await tick();
        // setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000);

        open_file_status = 'checking_cache';
        open_file_status_message = 'Checking local cache...';
        let check_hash_file_cache_result = await native_app.check_hash_file_cache_v2({local_file_cache_path: $events_loc.launcher.local_file_cache_path, hash: event_file_obj.hash_sha256, check_hash: true});
        if (check_hash_file_cache_result) {
            console.log('Cached hash file found.');
        } else if (check_hash_file_cache_result == null) {
            console.log(`Cached hash file not found. Need to download from API server. Base URL ${$events_loc.launcher.api.base_url}`);
            open_file_status = 'downloading_file';
            open_file_status_message = 'Downloading file...';
            let download_hash_file_to_cache_result = await native_app.download_hash_file_to_cache_v2({api_base_url: $events_loc.launcher.api.base_url, api_base_url_backup: $events_loc.launcher.api.base_url_backup, local_file_cache_path: $events_loc.launcher.local_file_cache_path, event_file_id: event_file_id, hash: event_file_obj.hash_sha256, verify_hash: true, overwrite_existing: false});
            // console.log(download_hash_file_to_cache_result);
            if (download_hash_file_to_cache_result) {
                console.log('Hash file downloaded to cache.');
            } else if (download_hash_file_to_cache_result == null) {
                console.log('Hash file was not found in cache and or could not be downloaded.');
                open_file_status = 'file_not_found';
                open_file_status_message = 'File was not found in cache and could not be downloaded.';
                setTimeout(() => {console.log(`Hiding Open File Message: ${open_file_status_message}`); open_file_clicked = false;}, 10000); // Default 15 seconds (15000)
                return null;
            } else {
                console.log('Hash file may be in the process of being downloaded or something went wrong.');
                open_file_status = 'downloading_file_or_failed';
                open_file_status_message = 'Hash file may be in the process of being downloaded or something went wrong.';
                setTimeout(() => {console.log(`Hiding Open File Message: ${open_file_status_message}`); open_file_clicked = false;}, 10000); // Default 15 seconds (15000)
                return false;
            }
        } else {
            console.log(`Cached hash file found, but hash did not match. May still be downloading from the API server. Base URL ${$events_loc.launcher.api.base_url}`);
            open_file_status = 'try_again';
            open_file_status_message = 'Please try again...';
            return null;
        }

        setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000); // Default 15 seconds (15000)

        console.log('Cached hash file found and ready to be opened from the temp directory.');
        open_file_status = 'opening_file';
        open_file_status_message = 'Opening file...';

        let filename = '';
        if ((event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win') {
            if (event_file_obj.extension == 'ppt') {
                filename = event_file_obj.filename.replace('.ppt', '.pptwin');
            } else if (event_file_obj.extension == 'pptx') {
                filename = event_file_obj.filename.replace('.pptx', '.pptxwin');
            }
        } else {
            filename = event_file_obj.filename;
        }
        console.log(`Opening ${filename}`);

        let electron_open_hash_file_to_temp_result = await native_app.open_hash_file_to_temp_v2({local_file_cache_path: $events_loc.launcher.local_file_cache_path, hash: event_file_obj.hash_sha256, host_file_temp_path: $events_loc.launcher.host_file_temp_path, filename: filename, verify_hash: true});
        if (electron_open_hash_file_to_temp_result) {
            console.log('Local hash file was opened to temp.');
            open_file_status = 'opening_file_success';
            open_file_status_message = 'Opening Application';
        } else if (electron_open_hash_file_to_temp_result == null) {
            console.log('Local hash file was not found. It may still be downloading.');
            open_file_status = 'file_not_found';
            open_file_status_message = 'File not found!';
        } else {
            console.log('Local hash file was not opened to temp. Something went wrong.');
            open_file_status = 'opening_file_failed';
            open_file_status_message = 'Failed to open the file!';
            return false;
        }

        console.log('Done with test of cache check, download file, and open cached file from temp directory.');
    } else if ($events_loc.launcher.app_mode == 'onsite') {
        open_file_clicked = true;
        await tick();
        setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000);
    } else {

        // NOTE: Add first test controller command here.
        // $events_sess.launcher.controller_cmd = `ae:open:event_file_id=${$slct.event_file_id}`;
        // $events_sess.launcher.controller_trigger_send = true; // Trigger the controller to send.
        // $events_sess.launcher.controller_cmd = null; // Reset command to null


        open_file_clicked = true;
        await tick();
        setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000);
    }
}

// function handle_open_method_poster() {
//     console.log('*** handle_open_method_poster() ***');

//     $events_loc.launcher.show_modal_event_poster = true;
//     if (event_file_obj.extension == 'png' || event_file_obj.extension == 'jpg') {
//         $events_loc.launcher.event_poster_file_type = 'image';
//     } else if (event_file_obj.extension == 'mp4' || event_file_obj.extension == 'mov') {
//         $events_loc.launcher.event_poster_file_type = 'video';
//     }

//     $events_loc.launcher.poster_src = `/event/file/${event_file_id}/download`;
//     $events_loc.launcher.modal_title = modal_title;
// }

function preventDefault(fn) {
    return function (event) {
        event.preventDefault();
        fn.call(this, event);
    };
}

</script>


<div
    class="
        event_launcher_file_cont
        grow
        flex flex-col md:flex-row flex-wrap
        gap-1 items-center
        max-w-full
        transition-all
        "
    class:justify-between={!hide_meta}
    class:justify-center={hide_meta}
    >

{#if open_file_clicked}
    <div class="open_file_clicked alert" in:fade="{{ duration: 250 }}" out:fade="{{ duration: 2000 }}">
        {#if ($events_loc.launcher.app_mode == 'native')}
            {#if (open_file_status)}
                <div class="alert_msg_pulse"><strong>*** {open_file_status_message} ***</strong></div>
            {/if}

            <!-- <strong>*** Please wait while this file is cached... ***</strong> -->
            <p>Most files will automatically be opened full screen.</p>
            <p>PowerPoint or KeyNote will attempt to display in presenter view.</p>
            <p>PDFs, videos, and images will attempt to be displayed mirrored.</p>
            <p>Please close the file when finished.</p>
        {:else if ($events_loc.launcher.app_mode == 'onsite')}
            <strong>*** Please wait while this file loads... ***</strong>
            <p>Most files will automatically be opened full screen.</p>
            <p>PowerPoint or KeyNote will attempt to display in presenter view.</p>
            <p>PDFs, videos, and images will attempt to be displayed mirrored.</p>
            <p>Please close the file when finished.</p>
        {:else}
            <strong>*** Please wait while this file downloads... ***</strong>
            <p>Onsite in the Speaker Ready Room and conference session rooms:</p>
            <ul>
                <li>Most files will automatically be opened full screen.</li>
                <li>PowerPoint or KeyNote will attempt to display in presenter view.</li>
                <li>PDFs, videos, and images will attempt to be displayed mirrored.</li>
                <li>Please close the file when finished.</li>
            </ul>
        {/if}
    </div>
{/if}


<span class="event_file_action">

<!-- First [WORKING!] - Handle opening using a modal. This applies to all Launcher app modes (default, onsite, native) -->
{#if (session_type == 'poster' || open_method == 'modal')}
    <!-- <a
        href="/event/file/{event_file_id}/download"
        download
        class="ae_btn btn_info {btn_size}"
        on:click|preventDefault={() => {handle_open_method_poster();}}
        data-hash_sha256={event_file_obj.hash_sha256}
        data-filename={event_file_obj.filename}
        title={event_file_obj.filename}
        >
        <span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
    </a> -->
    <button
        type="button"
        onclick={() => {
            // modal__title = modal_title;
            modal__open_event_file_id = event_file_id;
            modal__event_file_obj = event_file_obj;

            // $events_sess.launcher.modal__open_event_file_id = event_file_id;

            // $events_sess.launcher.modal__open = event_file_id;
            // $events_sess.launcher.modal__open_event_file_id = event_file_id;
            // $events_sess.launcher.modal__event_file_obj = event_file_obj;

            if (!modal__title) {
                modal__title = event_file_obj.filename;
            }
            // $events_sess.launcher.modal__title = modal__title;
            // $events_sess.launcher.modal__img_src = `/event/file/${event_file_id}/download`;

            $events_slct.event_file_id = event_file_id;
            $events_slct.event_file_obj = event_file_obj;


            // let as_modal_result = open_event_file_as_modal({
            //     event_file_id: event_file_id,
            //     filename: event_file_obj.filename,
            //     extension: event_file_obj.extension,
            //     modal_title: modal_title
            // });

            // if (as_modal_result) {
            //     console.log($events_loc.launcher);
            //     console.log(event_file_obj);
            //     events_loc.launcher.set({...$events_loc.launcher, ...as_modal_result});
            // }

            if ($events_loc.launcher.controller == 'local_push') {
                console.log(`Local Push Controller Command: ae_open:event_file=${event_file_id}`);
                $events_sess.launcher.controller_cmd = `ae_open:event_file=${event_file_id}`;
                $events_sess.launcher.controller_trigger_send = true;
                // tick();


                core_func.create_ae_obj__activity_log({
                    api_cfg: $ae_api,
                    account_id: $ae_loc.account_id,
                    data_kv: {
                        name: `Open Poster: ${event_file_obj.filename}`,
                        object_type: 'event_file',
                        object_id_random: event_file_id,
                        action: 'open_poster_w_controller',
                        meta_json: {
                            event_file_id: event_file_id,
                            filename: event_file_obj.filename,
                            extension: event_file_obj.extension,
                            modal_title: modal_title
                        }
                    },
                    log_lvl: log_lvl
                });
            }
        }}
        class:preset-tonal-success={$events_slct.event_file_id == event_file_id}
        class="
            btn btn-sm md:btn-md lg:btn-lg
            preset-tonal-primary border border-primary-500
            min-w-96
            "
        title={`Open this file in a modal window:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_id}`}
        >
        {#if (screen_saver_exts.includes(event_file_obj.extension))}
            <span class="fas fa-chart-bar m-1" class:hidden="{hide_launch_icon}"></span>
            Open Poster
            <!-- {event_file_id} -->
        {:else}
            <span class="fas fa-paper-plane m-1" class:hidden="{hide_launch_icon}"></span>
            {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
        {/if}
        <!-- {$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'} -->
    </button>


<!-- {#if ($events_loc.launcher.app_mode == 'native')} -->
 <!-- Second [NOT WORKING!!!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
{:else if ($events_loc.launcher.app_mode == 'native')}
    <a
        href="/event/file/{event_file_id}/download?use_os=true"
        download
        class="ae_btn btn_info {btn_size}"
        onclick={preventDefault(() => {handle_open_file();})}
        data-hash_sha256={event_file_obj.hash_sha256}
        data-filename={event_file_obj.filename}
        title={`${event_file_obj.filename} [A] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
        >
        <span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
    </a>


<!-- Third [NOT WORKING!!!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
<!-- {:else if ($events_loc.launcher.app_mode == 'onsite' && (event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win')}
    <a
        href="/event/file/{event_file_id}/download?use_os=true" download
        class="ae_btn btn_info {btn_size}"
        on:click={() => {handle_open_file();}}
        data-hash_sha256={event_file_obj.hash_sha256}
        data-filename={event_file_obj.filename}
        title={`${event_file_obj.filename} [A] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
        >
        <span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
    </a> -->


<!-- Last [WORKING!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
{:else}
    <button
        type="button"
        onclick={() => {
            let new_filename = event_file_obj.filename;

            if ($events_loc.launcher.app_mode == 'onsite' && (event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win') {
                // Example: the_new_filename.pptxwin
                new_filename = event_file_obj.filename + 'win';
            }

            // ae_promises[event_file_id]
            ae_promises[event_file_id] = api.download_hosted_file({
                api_cfg: $ae_api,
                hosted_file_id: event_file_obj.hosted_file_id_random, // +'x'
                return_file: true,
                filename: new_filename,
                auto_download: true,
                log_lvl: 1
            });

            // window.postMessage({ type: 'download_event_file', event_file_id: event_file_id, filename: event_file_obj.filename, auto_download: true }, '*');

            if ($events_loc.launcher.controller == 'local_push') {
                console.log(`Local Push Controller Command: ae_download:hosted_file=${event_file_obj.hosted_file_id_random}`);
                $events_sess.launcher.controller_cmd = `ae_download:hosted_file=${event_file_obj.hosted_file_id_random}:${new_filename}:${event_file_obj.extension}`;
                $events_sess.launcher.controller_trigger_send = true;
                // tick();
            }
        }}
        class="
            btn btn-sm
            preset-tonal-primary border border-primary-500
            min-w-72 lg:min-w-96
            "
        title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_id}`}
        >
        {#await ae_promises[event_file_id]}
            <span class="text-sm">
                <span class="fas fa-spinner fa-spin mx-0.5"></span>
                <span class="">
                    Downloading
                    {#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
                        {$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
                    {/if}
                    :
                </span>
            </span>
        {:then result}
            <span class="text-xs">
                <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)} mx-0.5"></span>
                {event_file_obj.extension}
                {#if result === null}
                    <span>
                        <span class="fas fa-exclamation-triangle mx-1"></span>
                        Download failed!
                    </span>
                {/if}
            </span>
        {/await}

        <span class="grow text-xs md:text-sm border-l border-gray-400 pl-1">
        <!-- {event_file_obj.filename_no_ext} -->
        <!-- {ae_util.shorten_filename({filename: event_file_obj.filename_w_ext, max_length: 40})} -->
        {ae_util.shorten_string({string: event_file_obj.filename_no_ext, begin_length: 45, max_length: 65})}
        <!-- {event_file_obj.filename_no_ext.slice(0, 35)} -->

        </span>

        <span
            class="
                badge my-0 py-0.5
                preset-tonal-success hover:preset-filled-success-500 text-xs xl:text-sm
                "
            class:hidden={!event_file_obj.file_purpose}
            >
            {event_file_obj.file_purpose}
        </span>
    </button>
{/if}

</span>


<span
    class="event_file_meta grow text-sm text-gray-500 flex flex-col sm:flex-row gap-1 wrap items-center justify-between w-64 max-w-80 font-mono"
    class:hidden="{hide_meta}"
    >

    <button
        type="button"
        onclick={() => {
            // let new_filename = event_file_obj.filename;

            // if ($events_loc.launcher.app_mode == 'onsite' && (event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win') {
            //     // Example: the_new_filename.pptxwin
            //     new_filename = event_file_obj.filename + 'win';
            // }

            // ae_promises[event_file_id]
            ae_promises[event_file_id] = api.download_hosted_file({
                api_cfg: $ae_api,
                hosted_file_id: event_file_obj.hosted_file_id_random, // +'x'
                return_file: true,
                filename: event_file_obj.filename,
                auto_download: true,
                log_lvl: 1
            });

            // window.postMessage({ type: 'download_event_file', event_file_id: event_file_id, filename: event_file_obj.filename, auto_download: true }, '*');
        }}
        class="event_file_os"
        class:hidden="{hide_os || 1==1}"
        >
        {#if event_file_obj.open_in_os == 'win'}
            <span class="fab fa-windows"></span> Win
        {:else if event_file_obj.open_in_os == 'mac'}
            <span class="fab fa-apple"></span> Mac
        {:else}
            <span class="fas fa-folder-open"></span>
        {/if}
    </button>


    <Element_ae_crud
        trigger_patch={ae_triggers.open_in_os}
        api_cfg={$ae_api}
        object_type={'event_file'}
        object_id={event_file_id}
        field_name={'open_in_os'}
        field_type={'button'}
        field_value={ae_tmp.value__open_in_os}
        allow_null={false}
        hide_edit_btn={true}
        outline_element={false}
        show_crud={false}
        display_inline={true}
        class_li={''}
        on:ae_crud_updated={e => {
            console.log(`ae_crud_updated:`, e.detail);

            events_func.load_ae_obj_id__event_file({
                api_cfg: $ae_api,
                event_file_id: event_file_obj?.event_file_id_random,
                log_lvl: log_lvl
            });
        }}
        >
        <!-- {(event_file_obj?.open_in_os ? 'Hidden' : 'Not Hidden')} -->
        <button
            type="button"
            onclick={() => {
                // Go from null to win, win to mac, mac to null, null to win, etc.
                if (!event_file_obj?.open_in_os) {
                    ae_tmp.value__open_in_os = 'win';

                } else if (event_file_obj?.open_in_os == 'win') {
                    ae_tmp.value__open_in_os = 'mac';
                } else if (event_file_obj?.open_in_os == 'mac') {
                    ae_tmp.value__open_in_os = null;
                } else {
                    ae_tmp.value__open_in_os = null;
                }

                // $events_slct.exhibit_tracking_obj.open_in_os = !event_file_obj?.open_in_os;
                ae_triggers.open_in_os = true;
            }}
            class="btn btn-sm transition-all group"
            class:preset-tonal-success={event_file_obj?.open_in_os=='win'}
            class:preset-tonal-warning={event_file_obj?.open_in_os=='mac'}
            disabled={!$ae_loc.trusted_access}
            title="Open with: {event_file_obj?.open_in_os ?? 'Default'}"
            >
            {#if event_file_obj?.open_in_os == 'win'}
                <span class="fab fa-windows m-1"></span>
                <span class="hidden group-hover:inline-block">
                Windows
                </span>
            {:else if event_file_obj?.open_in_os == 'mac'}
                <!-- <span class="fas fa-toggle-off m-1"></span> -->
                <span class="fab fa-apple m-1"></span>
                <span class="hidden group-hover:inline-block">
                macOS
                </span>
            {:else}
                <span class="fas fa-folder-open m-1"></span>
                <span class="hidden group-hover:inline-block">
                Default
                </span>
            {/if}
            <!-- {@html (event_file_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
        </button>
    </Element_ae_crud>


    <span
        class="
            event_file_created_on
            text-xs text-center
            flex flex-row gap-1 items-center justify-end
            w-24 md:w-44
            preset-filled-surface-100-900
            rounded
            px-1
            py-0.5
            "
        class:hidden="{hide_created_on}"
        >
        <span class="fas fa-calendar-day"></span>
        <span class="flex flex-row flex-wrap md:flex-nowrap gap-1 items-center justify-end">
            <span class="w-18">
                {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_short')}
            </span>
            <span class="w-18">
                <!-- <span class="fas fa-clock"></span> -->
                {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_12_short')}
            </span>
        </span>
    </span>

    <span
        class="
            event_file_size
            text-xs text-center
            flex flex-row gap-1 items-center justify-end
            preset-filled-surface-100-900
            w-22 max-w-28
            rounded
            py-0.5
            "
        class:hidden="{hide_size}"
        >
        <span class="fas fa-save"></span>
        {#if event_file_obj.file_size}{ae_util.format_bytes(event_file_obj.file_size)}{/if}
    </span>


    <!-- {#if ($events_loc.launcher.app_mode == 'native' || $events_loc.launcher.app_mode == 'onsite')} -->
    <!-- {#if (show_bak_download)} -->
        <!-- <a href="/event/file/{event_file_id}/download" class="event_file_download" class:hidden="{!show_bak_download}" title="Download with original filename and extension"><span class="fas fa-download"></span></a> -->

        <!-- <a href="/event/file/{event_file_id}/download?filename={event_file_obj.filename}&use_os=true" class="ae_btn btn_info {btn_size}">{event_file_obj.filename}</a> -->
    <!-- {/if} -->
</span>

<!-- <button
    class="ae_btn btn_xs btn_outline_debug"
    class:hidden="{hide_api_download}"
    on:click={() => {
        // if (!confirm('Download file from API server?')) {
        //     return false;
        // }
        download_event_file({ 'event_file_id': event_file_id, 'return_file': true, filename: event_file_obj.filename, auto_download: true, log_lvl: 1 });
    }}
    title="Download file from API server?"
    >
    <span class="fas fa-download"></span>
</button> -->

</div>


<style>
</style>
