<script lang="ts">
    interface Props {
        hide?: boolean;
    }

    let { hide = true }: Props = $props();

    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger,
        events_trig_kv
    } from '$lib/stores/ae_events_stores';
</script>

<!-- New standard events module menu 2025-06-20 -->
<div
    class="ae_comp__pres_mgmt_menu_opts w-full border-t border-gray-300 mt-1"
    class:hidden={hide}
>
    <h2 class="text-sm font-semibold text-center pb-1">
        <button
            type="button"
            onclick={() => {
                $events_loc.pres_mgmt.hide__menu_opts =
                    !$events_loc.pres_mgmt.hide__menu_opts;
            }}
            class="btn btn-sm preset-tonal-info border border-info-500"
        >
            {#if $events_loc.pres_mgmt.hide__menu_opts}
                <span class="fas fa-chevron-up m-1"></span>
            {:else}
                <span class="fas fa-chevron-down m-1"></span>
            {/if}
            Æ Pres Mgmt Menu Options
            {#if $events_loc.pres_mgmt.hide__menu_opts}
                <span class="fas fa-chevron-up m-1"></span>
            {:else}
                <span class="fas fa-chevron-down m-1"></span>
            {/if}
        </button>
    </h2>

    <div
        class="flex flex-row flex-wrap gap-1 items-center justify-between"
        class:hidden={$events_loc.pres_mgmt.hide__menu_opts}
    >
        {#if $ae_loc.authenticated_access}
            <div class="flex flex-col gap-1 items-end justify-center">
                <span class="flex flex-col gap-1 items-end justify-center">
                    <!-- Max person select options -->
                    <span
                        class="flex flex-row gap-1 items-center justify-around w-full"
                    >
                        <label
                            class="text-sm w-32 text-right"
                            for="qry_limit__people"
                        >
                            Max people:
                        </label>
                        <!-- Not using: $events_loc.pres_mgmt.qry_limit__people -->
                        <select
                            id="qry_limit__people"
                            bind:value={$ae_loc.person.qry_limit__people}
                            class="select w-20 text-sm preset-tonal-surface px-1"
                        >
                            <option value="">-- not set --</option>
                            <option value={25}>25</option>
                            <option value={50}>50</option>
                            <option value={75}>75</option>
                            <option value={100}>100</option>
                            <option value={150}>150</option>
                            <option value={200}>200</option>
                            <option value={250}>250</option>
                            <option value={500}>500</option>
                            <option value={750}>750</option>
                            <option value={1000}>1000</option>
                        </select>
                    </span>

                    <!-- Max presenters select options -->
                    <span
                        class="flex flex-row gap-1 items-center justify-around w-full"
                    >
                        <label
                            class="text-sm w-32 text-right"
                            for="qry_limit__presenters"
                        >
                            Max presenters:
                        </label>
                        <select
                            id="qry_limit__presenters"
                            bind:value={
                                $events_loc.pres_mgmt.qry_limit__presenters
                            }
                            class="select w-20 text-sm preset-tonal-surface px-1"
                        >
                            <option value="">-- not set --</option>
                            <option value={25}>25</option>
                            <option value={50}>50</option>
                            <option value={75}>75</option>
                            <option value={100}>100</option>
                            <option value={150}>150</option>
                            <option value={200}>200</option>
                            <option value={250}>250</option>
                            <option value={300}>300</option>
                            <option value={500}>500</option>
                            <option value={750}>750</option>
                            <option value={1000}>1000</option>
                        </select>
                    </span>

                    <!-- Max sessions select options -->
                    <span
                        class="flex flex-row gap-1 items-center justify-around w-full"
                    >
                        <label
                            class="text-sm w-32 text-right"
                            for="qry_limit__sessions"
                        >
                            Max sessions:
                        </label>
                        <select
                            id="qry_limit__sessions"
                            bind:value={
                                $events_loc.pres_mgmt.qry_limit__sessions
                            }
                            class="select w-20 text-sm preset-tonal-surface px-1"
                        >
                            <option value="">-- not set --</option>
                            <option value={25}>25</option>
                            <option value={50}>50</option>
                            <option value={75}>75</option>
                            <option value={100}>100</option>
                            <option value={200}>200</option>
                            <option value={500}>500</option>
                        </select>
                    </span>

                    <!-- Max files select options -->
                    <span
                        class="flex flex-row gap-1 items-center justify-around w-full"
                    >
                        <label
                            class="text-sm w-32 text-right"
                            for="qry_limit__files"
                        >
                            Max files:
                        </label>
                        <select
                            id="qry_limit__files"
                            bind:value={$events_loc.pres_mgmt.qry_limit__files}
                            class="select w-20 text-sm preset-tonal-surface px-1"
                        >
                            <option value="">-- not set --</option>
                            <option value={25}>25</option>
                            <option value={50}>50</option>
                            <option value={75}>75</option>
                            <option value={100}>100</option>
                            <option value={200}>200</option>
                            <option value={500}>500</option>
                        </select>
                    </span>
                </span>

                <span class="flex flex-col gap-1 items-end justify-center">
                    <!-- Toggle between the showing hidden sessions -->
                    <!-- qry_hidden = all, not_hidden, hidden -->
                    <button
                        type="button"
                        onclick={() => {
                            if ($events_loc.pres_mgmt.qry_hidden == 'all') {
                                $events_loc.pres_mgmt.qry_hidden = 'not_hidden';
                            } else {
                                $events_loc.pres_mgmt.qry_hidden = 'all';
                            }
                        }}
                        class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                        title="Toggle between showing hidden sessions"
                    >
                        <span
                            class="fas {$events_loc.pres_mgmt.qry_hidden ==
                            'all'
                                ? 'fa-toggle-on'
                                : 'fa-toggle-off'} m-1"
                        ></span>
                        {#if $events_loc.pres_mgmt.qry_hidden == 'all'}
                            <span class="grow">
                                <span class="fas fa-eye-slash m-1"></span>
                                Hide Hidden Sessions
                            </span>
                        {:else}
                            <span class="grow">
                                <span class="fas fa-eye m-1"></span>
                                Show Hidden Sessions?
                            </span>
                        {/if}
                    </button>

                    <!-- Toggle between the showing disabled sessions -->
                    <!-- qry_enabled = all, enabled -->
                    {#if $ae_loc.manager_access}
                        <button
                            type="button"
                            onclick={() => {
                                if (
                                    $events_loc.pres_mgmt.qry_enabled == 'all'
                                ) {
                                    $events_loc.pres_mgmt.qry_enabled =
                                        'enabled';
                                } else {
                                    $events_loc.pres_mgmt.qry_enabled = 'all';
                                }
                            }}
                            class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                            title="Toggle between showing disabled sessions"
                        >
                            <span
                                class="fas {$events_loc.pres_mgmt.qry_enabled ==
                                'all'
                                    ? 'fa-toggle-on'
                                    : 'fa-toggle-off'} m-1"
                            ></span>
                            {#if $events_loc.pres_mgmt.qry_enabled == 'all'}
                                <span class="grow">
                                    <span class="fas fa-ban m-1"></span>
                                    Hide Disabled Sessions
                                </span>
                            {:else}
                                <span class="grow">
                                    <span class="fas fa-check-circle m-1"
                                    ></span>
                                    Show Disabled Sessions?
                                </span>
                            {/if}
                        </button>
                    {/if}
                </span>
            </div>
        {/if}

        <div class="flex flex-col flex-wrap gap-1 items-center justify-evenly">
            <button
                type="button"
                onclick={() => {
                    $events_loc.pres_mgmt.save_search_text =
                        !$events_loc.pres_mgmt.save_search_text;
                }}
                class="btn btn-sm justify-between w-full text-center"
                class:ae_btn_surface={$events_loc.pres_mgmt.save_search_text}
                class:ae_btn_surface_outlined={!$events_loc.pres_mgmt
                    .save_search_text}
                title="Save the search text for this session search?"
            >
                {#if $events_loc.pres_mgmt.save_search_text}
                    <span class="fas fa-toggle-on m-1"></span>
                    <span class="grow">
                        <span class="fas fa-save m-1"></span>
                        Do Not Save Search?
                    </span>
                {:else}
                    <span class="fas fa-toggle-off m-1"></span>
                    <span class="grow">
                        <span class="fas fa-save m-1"></span>
                        Save Search Text?
                    </span>
                {/if}
            </button>

            {#if $ae_loc.authenticated_access}
                {#if !$events_loc.pres_mgmt.hide__session_msg}
                    <button
                        type="button"
                        onclick={() => {
                            $events_loc.pres_mgmt.hide__session_msg = true;
                        }}
                        class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                    >
                        <span class="fas fa-toggle-on m-1"></span>
                        <span class="grow">
                            <span class="fas fa-sticky-note m-1"></span>
                            Hide Session Message
                        </span>
                    </button>
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            $events_loc.pres_mgmt.hide__session_msg = false;
                        }}
                        class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
                    >
                        <span class="fas fa-toggle-off m-1"></span>
                        <span class="grow">
                            <span class="fas fa-sticky-note m-1"></span>
                            Show Session Message?
                        </span>
                    </button>
                {/if}
            {/if}

            {#if $ae_loc.authenticated_access}
                <!-- Show or hide the session code -->
                {#if !$events_loc.pres_mgmt.hide__session_code}
                    <button
                        type="button"
                        onclick={() => {
                            $events_loc.pres_mgmt.hide__session_code = true;
                        }}
                        class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                    >
                        <span class="fas fa-toggle-on m-1"></span>
                        <span class="grow">
                            <span class="fas fa-barcode m-1"></span>
                            Hide Session Code
                        </span>
                    </button>
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            $events_loc.pres_mgmt.hide__session_code = false;
                        }}
                        class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
                    >
                        <span class="fas fa-toggle-off m-1"></span>
                        <span class="grow">
                            <span class="fas fa-barcode m-1"></span>
                            Show Session Code?
                        </span>
                    </button>
                {/if}
            {/if}
        </div>

        <div class="flex flex-col gap-1 items-center justify-center">
            {#if $ae_loc.trusted_access}
                <div class="flex flex-col gap-1 items-center justify-center">
                    {#if $events_loc.pres_mgmt.show__copy_access_link}
                        <button
                            type="button"
                            onclick={() => {
                                $events_loc.pres_mgmt.show__copy_access_link = false;
                            }}
                            class="btn btn-sm w-full ae_btn_surface"
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            Showing Copy Access Link
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                $events_loc.pres_mgmt.show__copy_access_link = true;
                            }}
                            class="btn btn-sm w-full ae_btn_surface_outlined"
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            Show Copy Access Link?
                        </button>
                    {/if}

                    {#if $events_loc.pres_mgmt.show__email_access_link}
                        <button
                            type="button"
                            onclick={() => {
                                $events_loc.pres_mgmt.show__email_access_link = false;
                            }}
                            class="btn btn-sm w-full ae_btn_surface"
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            Showing Email Access Link
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                $events_loc.pres_mgmt.show__email_access_link = true;
                            }}
                            class="btn btn-sm w-full ae_btn_surface_outlined"
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            Show Email Access Link?
                        </button>
                    {/if}
                </div>
            {/if}

            {#if $ae_loc.authenticated_access}
                <div class="flex flex-col gap-1 items-end justify-center">
                    {#if $events_loc.pres_mgmt.show_content__session_qr}
                        <button
                            type="button"
                            onclick={() => {
                                $events_loc.pres_mgmt.show_content__session_qr = false;
                            }}
                            class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                            title="Showing Session QR Code"
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            <span class="grow">
                                <span class="fas fa-qrcode m-1"></span>
                                Hide Session QR
                            </span>
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                $events_loc.pres_mgmt.show_content__session_qr = true;
                            }}
                            class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
                            title="Show Session QR Code"
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            <span class="grow">
                                <span class="fas fa-qrcode m-1"></span>
                                Show Session QR Code?
                            </span>
                        </button>
                    {/if}

                    {#if $events_loc.pres_mgmt.show_content__presenter_qr}
                        <button
                            type="button"
                            onclick={() => {
                                $events_loc.pres_mgmt.show_content__presenter_qr = false;
                            }}
                            class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                            title="Showing Presenter QR Code"
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            <span class="grow">
                                <span class="fas fa-qrcode m-1"></span>
                                Hide Presenter QR
                            </span>
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                $events_loc.pres_mgmt.show_content__presenter_qr = true;
                            }}
                            class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
                            title="Show Presenter QR Code"
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            <span class="grow">
                                <span class="fas fa-qrcode m-1"></span>
                                Show Presenter QR Code?
                            </span>
                        </button>
                    {/if}
                </div>
            {/if}
        </div>

        {#if $ae_loc.authenticated_access}
            <div class="flex flex-col gap-1 items-center justify-center">
                <!-- Show/Hide launcher links (new version) -->
                <button
                    type="button"
                    onclick={() => {
                        $events_loc.pres_mgmt.hide__launcher_link =
                            !$events_loc.pres_mgmt.hide__launcher_link;
                    }}
                    class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                >
                    <span
                        class="fas {$events_loc.pres_mgmt.hide__launcher_link
                            ? 'fa-toggle-off'
                            : 'fa-toggle-on'} m-1"
                    ></span>
                    <span class="grow">
                        <span class="fas fa-plane m-1"></span>
                        {$events_loc.pres_mgmt.hide__launcher_link
                            ? 'Show Launcher Links'
                            : 'Hide Launcher Links?'}
                    </span>
                </button>

                <!-- Show/Hide launcher links (legacy version) -->
                <button
                    type="button"
                    onclick={() => {
                        $events_loc.pres_mgmt.hide__launcher_link_legacy =
                            !$events_loc.pres_mgmt.hide__launcher_link_legacy;
                    }}
                    class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                >
                    <span
                        class="fas {$events_loc.pres_mgmt
                            .hide__launcher_link_legacy
                            ? 'fa-toggle-off'
                            : 'fa-toggle-on'} m-1"
                    ></span>
                    <span class="grow">
                        <span class="fas fa-paper-plane m-1"></span>
                        {$events_loc.pres_mgmt.hide__launcher_link_legacy
                            ? 'Show Legacy Launcher Links'
                            : 'Hide Legacy Launcher Links?'}
                    </span>
                </button>

                <!-- Show/Hide links to the location (room) -->
                <button
                    type="button"
                    onclick={() => {
                        $events_loc.pres_mgmt.hide__location_link =
                            !$events_loc.pres_mgmt.hide__location_link;
                    }}
                    class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                >
                    <span
                        class="fas {$events_loc.pres_mgmt.hide__location_link
                            ? 'fa-toggle-off'
                            : 'fa-toggle-on'} m-1"
                    ></span>
                    <span class="grow">
                        <span class="fas fa-map-marker-alt m-1"></span>
                        {$events_loc.pres_mgmt.hide__location_link
                            ? 'Show Location Links'
                            : 'Hide Location Links?'}
                    </span>
                </button>

                <!-- Show/Hide the Location (room) column in tables and lists -->
                <button
                    type="button"
                    onclick={() => {
                        $events_loc.pres_mgmt.hide__session_li_location_field =
                            !$events_loc.pres_mgmt
                                .hide__session_li_location_field;
                    }}
                    class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                    title="Toggle showing the Location column in session lists and tables"
                >
                    <span
                        class="fas {$events_loc.pres_mgmt
                            .hide__session_li_location_field
                            ? 'fa-toggle-off'
                            : 'fa-toggle-on'} m-1"
                    ></span>
                    <span class="grow">
                        <!-- <span class="fas fa-door-open m-1"></span> -->
                        {$events_loc.pres_mgmt.hide__session_li_location_field
                            ? 'Show Location Column'
                            : 'Hide Location Column?'}
                    </span>
                </button>

                <!-- Show/Hide the POC column in tables and lists -->
                <button
                    type="button"
                    onclick={() => {
                        $events_loc.pres_mgmt.hide__session_li_poc_field =
                            !$events_loc.pres_mgmt.hide__session_li_poc_field;
                    }}
                    class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                    title="Toggle showing the POC column in session lists and tables"
                >
                    <span
                        class="fas {$events_loc.pres_mgmt
                            .hide__session_li_poc_field
                            ? 'fa-toggle-off'
                            : 'fa-toggle-on'} m-1"
                    ></span>
                    <span class="grow">
                        <!-- <span class="fas fa-user-tie m-1"></span> -->
                        {$events_loc.pres_mgmt.hide__session_li_poc_field
                            ? 'Show POC Column'
                            : 'Hide POC Column?'}
                    </span>
                </button>

                <!-- These are related to more content showing in lists. -->
                <span
                    class="flex flex-col flex-wrap gap-1 items-center justify-evenly"
                >
                    {#if $events_loc.pres_mgmt.show_content__session_files}
                        <button
                            type="button"
                            disabled={!$ae_loc.manager_access}
                            onclick={() => {
                                $events_loc.pres_mgmt.show_content__session_files = false;
                            }}
                            class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            <span class="grow">
                                <span class="fas fa-list m-1"></span>
                                Hide Linked Files (testing)
                            </span>
                        </button>
                    {:else}
                        <button
                            type="button"
                            disabled={!$ae_loc.manager_access}
                            onclick={() => {
                                $events_loc.pres_mgmt.show_content__session_files = true;
                            }}
                            class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            <span class="grow">
                                <span class="fas fa-list m-1"></span>
                                Show Linked Files? (testing)
                            </span>
                        </button>
                    {/if}

                    {#if $events_loc.pres_mgmt.show_content__session_presentations}
                        <button
                            type="button"
                            disabled={!$ae_loc.manager_access}
                            onclick={() => {
                                $events_loc.pres_mgmt.show_content__session_presentations = false;
                            }}
                            class="btn btn-sm ae_btn_surface justify-between w-full text-center"
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            <span class="grow">
                                <span class="fas fa-list m-1"></span>
                                Hide Linked Presentations (testing)
                            </span>
                        </button>
                    {:else}
                        <button
                            type="button"
                            disabled={!$ae_loc.manager_access}
                            onclick={() => {
                                $events_loc.pres_mgmt.show_content__session_presentations = true;
                            }}
                            class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            <span class="grow">
                                <span class="fas fa-list m-1"></span>
                                Show Linked Presentations? (testing)
                            </span>
                        </button>
                    {/if}
                </span>
            </div>
        {/if}

        <div
            class="flex flex-row flex-wrap gap-1 items-center justify-evenly max-w-56"
        >
            {#if $ae_loc?.trusted_access}
                {#if $ae_loc?.edit_mode}
                    <button
                        type="button"
                        onclick={() => {
                            $ae_loc.edit_mode = false;
                        }}
                        class="btn btn-sm ae_btn_warning justify-between w-full text-center"
                        title="Turn off edit mode"
                    >
                        <span class="fas fa-toggle-on m-1"></span>
                        <span class="grow">
                            <span class="fas fa-edit m-1"></span>
                            Edit Mode Off
                        </span>
                    </button>
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            $ae_loc.edit_mode = true;
                        }}
                        class="btn btn-sm ae_btn_warning_outlined justify-between w-full text-center"
                        title="Turn on edit mode"
                    >
                        <span class="fas fa-toggle-off m-1"></span>
                        <span class="grow">
                            <span class="fas fa-user-ninja m-1"></span>
                            Edit Mode?
                        </span>
                    </button>
                {/if}

                {#if $ae_loc?.adv_mode}
                    <button
                        type="button"
                        onclick={() => {
                            $ae_loc.adv_mode = false;
                        }}
                        class="btn btn-sm ae_btn_warning justify-between w-full text-center"
                        title="Turn off advanced mode"
                    >
                        <span class="fas fa-toggle-on m-1"></span>
                        <span class="grow">
                            <span class="fas fa-magic m-1"></span>
                            Advanced Mode Off
                        </span>
                    </button>
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            $ae_loc.adv_mode = true;
                        }}
                        class="btn btn-sm ae_btn_warning_outlined justify-between w-full text-center"
                        title="Turn on advanced mode"
                    >
                        <span class="fas fa-toggle-off m-1"></span>
                        <span class="grow">
                            <span class="fas fa-hat-wizard m-1"></span>
                            Advanced Mode?
                        </span>
                    </button>
                {/if}
            {/if}
        </div>
    </div>
</div>
