<?php
// Enable verbose PHP error output for development
@ini_set('display_errors', '1');
@ini_set('display_startup_errors', '1');
error_reporting(E_ALL);


define('BEEZUI_NAV_WIDTH', '60');


// Define project root constant if not already defined
if (!defined('BEEZUI_ROOT')) {
    define('BEEZUI_ROOT', __DIR__);
}

// Bootstrap core early so we can serve partials for HTMX
require_once BEEZUI_ROOT . '/components/bootstrap.php';

mh_define('BEEZUI_PRELOAD', mh_cfg('BEEZUI_PRELOAD', 'True') === 'True');

$tabParam = \Components\Router::tabParam();
$subtabParam = \Components\Router::subtabParam();
$pageParam = \Components\Router::pageParam();

// Detect partial request (HTMX or explicit flag)
$isPartial = (\Components\Support\Htmx::isRequest()) || (mh_get('partial', 0, 'int') == 1);

// Determine requested route name based on context
$routeName = null;
if ($isPartial) {
    $routeName = mh_get($pageParam, null, 'string');
    if ($routeName === null) {
        // Fallback for callers that still send the tab param
        $routeName = mh_get($tabParam, null, 'string');
    }
} else {
    $routeName = mh_get($tabParam, null, 'string');
    if ($routeName === null) {
        // Fallback for callers that only sent the page param
        $routeName = mh_get($pageParam, null, 'string');
    }
}
$routeName = $routeName ? preg_replace('/[^_a-z]/', '', strtolower((string)$routeName)) : 'dashboard';
$tab = $routeName;

// Resolve path from route name
$path = \Components\Router::path($routeName);
if (!$path) {
    // Fallback to conventional pages/<route>.php
    $candidate = 'pages/' . $routeName . '.php';
    $path = is_file(BEEZUI_ROOT . '/' . $candidate) ? $candidate : null;
}

// If this is an HTMX request (or explicit partial), capture and optimize the partial HTML (inline <svg> → CSS)
if ($isPartial) {
    if ($path && is_file(BEEZUI_ROOT . '/' . $path)) {

        // Start SVG optimizer buffering so we can transform the partial output
        $svgOpt = \Components\SvgCssOptimizer::begin([
                'cache_dir' => BEEZUI_ROOT . '/public/cache',
                'web_path' => (defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : '') . 'public/cache',
                'base64' => false,
                'class_prefix' => 'svg-',
                'size_var' => '--svg-size',
        ]);

        include BEEZUI_ROOT . '/' . $path;

        // Flush transformed content (injects a cache-busted CSS link for the found icons)
        $svgOpt->flush();
        exit;
    } else {
        http_response_code(404);
        echo 'Not found';
        exit;
    }
}
?>
<!DOCTYPE html>
<html class="h-full group/collapse" lang="<?= mh_session('language_code', 'en') ?>">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>MailBeez Admin</title>
    <!-- Dark mode bootstrap: prevent FOUC by setting class on <html> ASAP -->
    <script>
        try {
            if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                // document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
            document.documentElement.classList.remove('dark');
        } catch (e) {
            // no-op
        }
    </script>
    <script>
        // Apply persisted UI density asap to avoid FOUC
        try {
            var savedDensity = localStorage.getItem('ui-density') || 'normal';
            var htmlEl = document.documentElement;
            htmlEl.classList.remove('density-compact', 'density-very-compact');
            if (savedDensity === 'compact') htmlEl.classList.add('density-compact');
            else if (savedDensity === 'very-compact') htmlEl.classList.add('density-very-compact');
        } catch (e) { /* no-op */
        }
    </script>
    <!--    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />-->
    <link rel="stylesheet"
          href="<?php echo defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : ''; ?>appui/assets/css/tailwind.output.css?ver=<?= mh_cfg('MAILBEEZ_VERSION') ?>"/>
    <!-- Flag Icons for language flags in i18n fields: https://flagicons.lipis.dev/ -->
    <link rel="stylesheet"
          href="<?php echo defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : ''; ?>appui/assets/css/flag-icons.min.css?ver=<?= mh_cfg('MAILBEEZ_VERSION') ?>"/>

    <meta name="htmx-config" content='{"scrollBehavior":"smooth","historyCacheSize":5}'>

    <script>
        window.APP_LOCALE = '<?php echo htmlspecialchars(mh_session('language_code', 'en'), ENT_QUOTES); ?>';
        window.MB_MODAL_TYPE_ICONS = <?php echo json_encode(\Components\Modal::getTypeIconsMap()); ?>;
    </script>

    <script defer
            src="<?php echo defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : ''; ?>appui/assets/js/htmx.min.js?ver=<?= mh_cfg('MAILBEEZ_VERSION') ?>"></script>
    <script>
        document.addEventListener('htmx:configRequest', (event) => {
            if (!event.detail) return;
            const verb = (event.detail.verb || event.detail.method || '').toUpperCase();
            if (verb === 'POST') {
                const tokenHtml = <?= json_encode(defined('MH_POST_TOKEN') ? MH_POST_TOKEN : '') ?>;
                if (tokenHtml) {
                    const template = document.createElement('template');
                    template.innerHTML = tokenHtml.trim();
                    const inputs = template.content.querySelectorAll('input');
                    inputs.forEach(input => {
                        if (input.name) {
                            event.detail.parameters[input.name] = input.value;
                        }
                    });
                }
            }
        });
    </script>
    <!--    <script defer src="-->
    <?php //echo defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : ''; ?><!--appui/assets/js/preload.min.js?ver=-->
    <?php //= mh_cfg('MAILBEEZ_VERSION') ?><!--"></script>-->
    <script src="<?php echo defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : ''; ?>appui/assets/js/mb-loader.js?ver=<?= mh_cfg('MAILBEEZ_VERSION') ?>"></script>
    <script src="<?php echo defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : ''; ?>appui/assets/js/mb-modal.js?ver=<?= mh_cfg('MAILBEEZ_VERSION') ?>"></script>
    <script defer
            src="<?php echo defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : ''; ?>public/js/app.js?ver=<?= mh_cfg('MAILBEEZ_VERSION') ?>"></script>

    <style>[x-cloak] {
            display: none !important;
        }</style>
    <script>
        // Global lightweight Alpine validation helper for forms rendered by Engine
        // Usage: Object.assign(existingXData, MBForm.validator(schema))
        window.MBForm = window.MBForm || {};
        window.MBForm.translations = <?php echo json_encode([
            'required' => \mh_lng('UI_VALIDATION_REQUIRED'),
            'email' => \mh_lng('UI_VALIDATION_EMAIL'),
            'min_length' => \mh_lng('UI_VALIDATION_MIN_LENGTH'),
            'max_length' => \mh_lng('UI_VALIDATION_MAX_LENGTH'),
            'integer' => \mh_lng('UI_VALIDATION_INTEGER'),
            'min_value' => \mh_lng('UI_VALIDATION_MIN_VALUE'),
            'max_value' => \mh_lng('UI_VALIDATION_MAX_VALUE'),
            'date' => \mh_lng('UI_VALIDATION_DATE'),
            'date_time' => \mh_lng('UI_VALIDATION_DATE_TIME'),
            'date_after' => \mh_lng('UI_VALIDATION_DATE_AFTER'),
            'date_before' => \mh_lng('UI_VALIDATION_DATE_BEFORE'),
            'compare' => \mh_lng('UI_VALIDATION_COMPARE'),
        ]); ?>;
        window.MBForm._t = function (key, ...args) {
            let s = this.translations[key] || key;
            args.forEach(arg => {
                s = s.replace(/%[ds]/, arg);
            });
            return s;
        };
        window.MBForm.validator = function (schema) {
            return {
                schema: schema || {},
                clientErrors: {},
                _getVal(name) {
                    let v = this.form ? this.form[name] : undefined;
                    if (v === undefined || v === null) return '';
                    if (typeof v === 'boolean') return v ? 'on' : '';
                    return v;
                },
                _isIntString(s) {
                    return /^-?\d+$/.test(String(s));
                },
                _parseDateToTs(val) {
                    if (val === undefined || val === null) return null;
                    const s = String(val).trim();
                    if (!s) return null;
                    if (/^\d{4}-\d{2}-\d{2}$/.test(s)) {
                        const d = new Date(s + 'T00:00:00');
                        if (!isNaN(d)) return Math.floor(d.getTime() / 1000);
                    }
                    const t = Date.parse(s);
                    if (!isNaN(t)) return Math.floor(t / 1000);
                    return null;
                },
                validateField(name) {
                    const r = this.schema[name];
                    const el = this.$root && this.$root.querySelector ? this.$root.querySelector('[name="' + (window.CSS && CSS.escape ? CSS.escape(name) : name) + '"]') : null;
                    if (!el) {
                        this.clientErrors[name] = [];
                        return true;
                    }
                    const v = this._getVal(name);
                    const errs = [];
                    if (!r) {
                        this.clientErrors[name] = [];
                        return true;
                    }
                    if (r.required && String(v).trim() === '') {
                        errs.push(window.MBForm._t('required'));
                    }
                    if (r.type === 'integer' && String(v).trim() !== '') {
                        if (!this._isIntString(v)) {
                            errs.push(window.MBForm._t('integer'));
                        }
                        const num = parseInt(v, 10);
                        if (r.min !== undefined && this._isIntString(r.min) && num < parseInt(r.min, 10)) {
                            errs.push(window.MBForm._t('min_value', r.min));
                        }
                        if (r.max !== undefined && this._isIntString(r.max) && num > parseInt(r.max, 10)) {
                            errs.push(window.MBForm._t('max_value', r.max));
                        }
                    }
                    if (Array.isArray(r.compare)) {
                        for (const cmp of r.compare) {
                            const otherName = cmp.field;
                            if (!otherName) continue;
                            const op = (cmp.op || 'gte').toLowerCase();
                            const offset = cmp.offset || 0;
                            let left = v;
                            let right = this._getVal(otherName);
                            let compared = false;
                            if (this._isIntString(left) && this._isIntString(right)) {
                                left = parseInt(left, 10);
                                right = parseInt(right, 10) + (this._isIntString(offset) ? parseInt(offset, 10) : 0);
                                compared = true;
                            } else {
                                const lTs = this._parseDateToTs(left);
                                const rTs = this._parseDateToTs(right);
                                if (lTs !== null && rTs !== null) {
                                    const days = this._isIntString(offset) ? parseInt(offset, 10) : 0;
                                    left = lTs;
                                    right = rTs + days * 86400;
                                    compared = true;
                                }
                            }
                            if (compared) {
                                let ok = true;
                                switch (op) {
                                    case 'gt':
                                    case '>':
                                        ok = (left > right);
                                        break;
                                    case 'gte':
                                    case '>=':
                                        ok = (left >= right);
                                        break;
                                    case 'lt':
                                    case '<':
                                        ok = (left < right);
                                        break;
                                    case 'lte':
                                    case '<=':
                                        ok = (left <= right);
                                        break;
                                    case 'eq':
                                    case '==':
                                        ok = (left == right);
                                        break;
                                    case 'ne':
                                    case '!=':
                                        ok = (left != right);
                                        break;
                                }
                                if (!ok) {
                                    errs.push(cmp.message || (window.MBForm._t('compare', op, otherName + (this._isIntString(offset) ? (' + ' + offset) : ''))));
                                }
                            }
                        }
                    }
                    this.clientErrors[name] = errs;
                    return errs.length === 0;
                },
                validateAll() {
                    let ok = true;
                    for (const name in this.schema) {
                        if (!this.validateField(name)) ok = false;
                    }
                    return ok;
                }
            };
        };
    </script>
    <script>
        // Sidebar collapse state using a data attribute consumed by Tailwind data-variants
        (function () {
            try {
                const saved = localStorage.getItem('sidebar-collapsed');
                if (saved === 'true') {
                    document.documentElement.setAttribute('data-collapsed', 'true');
                }
            } catch (e) { /* no-op */
            }
        })();
    </script>
</head>
<body class="">
<div id="app-main" x-data="{ active: '<?php echo $tab; ?>' }" @set-active.window="active = $event.detail">
    <?php
    // Autoload already required above, and $tab resolved
    // $tab is already set earlier; keep for clarity
    $tab = $tab ?? 'dashboard';

    // Navigation menu groups from Data Provider
    $menuGroups = \Components\Data\DataRegistry::navigation()->groups();

    // Flatten items for easier lookup and page rendering
    $flattenedItems = [];
    foreach ($menuGroups as $grp) {
        foreach ($grp['items'] ?? [] as $it) {
            $flattenedItems[] = $it;
            if (!empty($it['items'])) {
                foreach ($it['items'] as $subIt) {
                    $flattenedItems[] = $subIt;
                }
            }
        }
    }

    // Determine active item within grouped structure (optional)
    $activeItem = null;
    foreach ($flattenedItems as $it) {
        if ($it['key'] === $tab) {
            $activeItem = $it;
            break;
        }
    }


    ?>


    <div id="app-shell-topbar-wrap"
         class="fixed inset-x-0 top-0 z-[80] bg-muted transition-all duration-300 ease-in-out">
        <div class="flex items-stretch">
            <div id="sidebar-header"
                 class="flex w-<?= BEEZUI_NAV_WIDTH ?> items-center gap-3 px-6 h-12 py-2 mt-1 group-data-[collapsed=true]/collapse:w-20  text tracking-tight transition-all duration-300 ease-in-out">
                <div class="group-data-[collapsed=true]/collapse:hidden text-nowrap flex items-center space-x-1 h-12">
                    <h1 class="tracking-tighter font-medium opacity-70"> MailBeez </h1>
                    <div class="ml-1 ring ring-on-muted/70 rounded-lg px-1 text-xs text-on-muted ">beta 6.3</div>
                </div>
                <div class="group-data-[collapsed=true]/collapse:visible invisible min-w-12! ">
                    <div class="ring ring-on-muted/70 rounded-lg px-1 text-xs text-on-muted w-full text-nowrap">beta 6.3</div>
                </div>
            </div>
            <header id="app-shell-topbar"
                    class="flex min-w-0 flex-1 items-center gap-3 px-2 h-12 py-2">
                <?php include BEEZUI_ROOT . '/pages/components/top_bar.php'; ?>
            </header>
        </div>
    </div>

    <!-- Static sidebar for desktop (collapsible) -->

    <div id="app-sidebar"
         data-active="<?php echo \Components\Base::h($tab); ?>"
         class="fixed top-[3.25rem] bottom-0 z-[70] flex w-<?= BEEZUI_NAV_WIDTH ?>  group/sidebar group-data-[collapsed=true]/collapse:w-20 flex-col transition-all duration-300 ease-in-out">
        <div id="sidebar-pad"
             class="relative flex grow flex-col gap-y-5 overflow-y-auto overflow-x-hidden  bg-muted group-data-[collapsed=true]/collapse:bg-muted group-data-[collapsed=true]/collapse:border-0 px-6 transition-all duration-300 ease-in-out dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-overlay/10">

            <!--
                        <div>
                            <span class="inline-flex items-center gap-1.5 rounded-md border border-emerald-600/60 text-emerald-700 px-2 py-0.5 text-xs font-semibold">
                            <span class="relative flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-4">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
                            </span>
                            Production
                            </span>

                            <span class="inline-flex items-center gap-1.5 rounded-md border border-orange-500/60 text-orange-600 px-2 py-0.5 text-xs font-semibold">
                            <span class="relative flex items-center justify-center">
                            <span class="absolute inset-0 rounded-full border border-orange-500/30 border-dotted animate-pulse"></span>
                            <span class="absolute inset-[3px] rounded-full border border-orange-500/50 animate-pulse"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                     stroke="currentColor"
                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4  animate-pulse"><path
                                            d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path
                                            d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg>
                            </span>
                            Simulation
                            </span>
                        </div>
            -->

            <div class="hidden bg-canvas rounded ring ring-divider px-3 py-2 text-xs text-secondary/70 dark:bg-canvas dark:text-white overflow-hidden">
                Search
            </div>

            <nav class="relative flex flex-1 flex-col  group-data-[collapsed=true]/collapse:translate-x-2!">
                <ul role="list" class="flex flex-1 flex-col gap-y-7">
                    <li>
                        <ul id="menu-list" role="list" class="-mx-2 transition-all  space-y-1 relative">
                            <?php foreach ($menuGroups as $group): ?>
                                <?php if (empty($group['items'])) continue; ?>
                                <li class="mt-4 first:mt-0 group-data-[collapsed=true]/collapse:w-12!">
                                    <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-secondary/60 group-data-[collapsed=true]/collapse:opacity-0 group-data-[collapsed=true]/collapse:h-2">
                                        <?php echo \Components\Base::h($group['header']); ?>
                                    </div>
                                    <ul class="space-y-1 transition-all group-data-[collapsed=true]/collapse:bg-canvas group-data-[collapsed=true]/collapse:rounded-xl group-data-[collapsed=true]/collapse:border border-divider/70  group-data-[collapsed=true]/collapse:px-1.5 group-data-[collapsed=true]/collapse:py-1.5 group-data-[collapsed=true]/collapse:mx-0">
                                        <?php foreach ($group['items'] as $item):
                                            $active = ($tab === $item['key']);
                                            $hasChildren = !empty($item['items']);
                                            $childKeys = [];
                                            if ($hasChildren) {
                                                foreach ($item['items'] as $child) $childKeys[] = "'".$child['key']."'";
                                            }
                                            $allKeys = array_merge(["'".$item['key']."'"], $childKeys);
                                            $allKeysStr = implode(',', $allKeys);
                                            ?>
                                            <li class="relative"
                                                x-data="{
                                                    open: [<?php echo $allKeysStr; ?>].includes(active),
                                                    tooltipVisible: false,
                                                    tooltipText: '<?php echo \Components\Base::h($item['label']); ?>',
                                                    tooltipArrow: true,
                                                    tooltipPosition: 'right',
                                                    tooltipX: 0,
                                                    tooltipY: 0,
                                                    flyoutVisible: false,
                                                    flyoutX: 0,
                                                    flyoutY: 0
                                                }"
                                                x-init="$watch('active', val => { if([<?php echo $allKeysStr; ?>].includes(val)) open = true; })"
                                                @mouseleave="tooltipVisible = false; flyoutVisible = false"
                                            >

                                                <!-- Tooltip (teleported to body to avoid any overflow clipping) -->
                                                <template x-teleport="body">
                                                    <div x-ref="tooltip"
                                                         x-show="tooltipVisible && document.documentElement.getAttribute('data-collapsed') === 'true'"
                                                         x-cloak
                                                         :style="'position: fixed; top:' + tooltipY + 'px; left:' + tooltipX + 'px'"
                                                         class="w-auto text-sm z-[1000] pointer-events-none transform -translate-y-1/2">
                                                        <div x-show="tooltipVisible" x-transition
                                                             class="relative px-2 py-1 text-white rounded-md shadow bg-brand/90">
                                                            <p x-text="tooltipText"
                                                               class="block flex-shrink-0 text-xs whitespace-nowrap"></p>
                                                            <div x-ref="tooltipArrow" x-show="tooltipArrow"
                                                                 :class="{ 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right', 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom' }"
                                                                 class="inline-flex overflow-hidden absolute justify-center items-center">
                                                                <div :class="{ 'origin-top-right -rotate-45' : tooltipPosition == 'right', 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom' }"
                                                                     class="w-1.5 h-1.5 shadow bg-brand/90 transform"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </template>

                                                <?php if ($hasChildren): ?>
                                                    <!-- Flyout Submenu (teleported) -->
                                                    <template x-teleport="body">
                                                        <div x-show="flyoutVisible && document.documentElement.getAttribute('data-collapsed') === 'true'"
                                                             x-cloak
                                                             x-transition:enter="transition ease-out duration-100"
                                                             x-transition:enter-start="opacity-0 scale-95"
                                                             x-transition:enter-end="opacity-100 scale-100"
                                                             x-transition:leave="transition ease-in duration-75"
                                                             x-transition:leave-start="opacity-100 scale-100"
                                                             x-transition:leave-end="opacity-0 scale-95"
                                                             @mouseenter="flyoutVisible = true"
                                                             @mouseleave="flyoutVisible = false"
                                                             :style="'position: fixed; top:' + flyoutY + 'px; left:' + flyoutX + 'px'"
                                                             class="z-[1000] w-48 rounded-lg bg-elevated  p-1 border border-divider">
                                                            <div class="px-3 py-2 text-xs font-semibold text-secondary/60 border-b border-divider mb-1">
                                                                <?php echo \Components\Base::h($item['label']); ?>
                                                            </div>
                                                            <ul class="space-y-1">
                                                                <?php foreach ($item['items'] as $subItem): ?>
                                                                    <li>
                                                                        <a id="flyout-tab-<?php echo \Components\Base::h($subItem['key']); ?>"
                                                                           @click.prevent="active = '<?php echo $subItem['key']; ?>'; flyoutVisible = false; updateUrlForActive('<?php echo $subItem['key']; ?>', false)"
                                                                           :class="{ 'text-brand! font-medium bg-muted/50': active === '<?php echo $subItem['key']; ?>' }"
                                                                           class="block rounded-md px-3 py-2 text-sm text-secondary hover:bg-muted hover:text-brand cursor-pointer">
                                                                            <?php echo \Components\Base::h($subItem['label']); ?>
                                                                        </a>
                                                                    </li>
                                                                <?php endforeach; ?>
                                                            </ul>
                                                        </div>
                                                    </template>
                                                <?php endif; ?>

                                                <a id="desk-tab-<?php echo \Components\Base::h($item['key']); ?>"
                                                   @click.prevent="active = '<?php echo $item['key']; ?>'; <?php echo $hasChildren ? 'open = !open;' : ''; ?>"
                                                   :class="{ ' text-brand-600! font-medium': active === '<?php echo $item['key']; ?>' }"
                                                   class="group flex items-center align-middle gap-x-3 rounded-md p-2 text-sm/6 text-secondary/80 hover:bg-muted hover:text-brand cursor-pointer"
                                                   @mouseenter="(() => {
                                                       const isCol = document.documentElement.getAttribute('data-collapsed') === 'true';
                                                       if (!isCol) return;
                                                       const r = $el.getBoundingClientRect();
                                                       if (<?php echo $hasChildren ? 'true' : 'false'; ?>) {
                                                           const sideRect = document.getElementById('app-sidebar').getBoundingClientRect();
                                                           flyoutX = sideRect.right;
                                                           flyoutY = r.top;
                                                           flyoutVisible = true;
                                                       } else {
                                                           tooltipX = r.right + 8;
                                                           tooltipY = r.top + r.height/2;
                                                           tooltipVisible = true;
                                                       }
                                                   })()"
                                                >

                                                    <div>
                                                        <div aria-hidden="true"
                                                             class="size-4 [&>svg]:size-4 shrink-0 text-secondary/70 group-hover:text-brand group-data-[active=true]:text-brand-600">
                                                            <?php echo $item['icon']; ?>
                                                        </div>
                                                    </div>
                                                    <span class="transition-all group-data-[collapsed=true]/collapse:max-w-0 overflow-hidden text-nowrap inline-block tracking-tight"><?php echo \Components\Base::h($item['label']); ?></span>
                                                    <?php if ($hasChildren): ?>
                                                        <div :class="{ 'rotate-180': open }" class="ml-auto size-4 shrink-0 group-data-[collapsed=true]/collapse:hidden [&_svg]:size-4">
                                                            <?php echo \Components\Base::SVG_CHEVRON_DOWN; ?>
                                                        </div>
                                                    <?php endif; ?>
                                                </a>

                                                <?php if ($hasChildren): ?>
                                                    <ul x-show="open" x-collapse x-cloak class=" group-data-[collapsed=true]/collapse:hidden">
                                                        <?php foreach ($item['items'] as $subItem): ?>
                                                            <li>
                                                                <a id="desk-tab-<?php echo \Components\Base::h($subItem['key']); ?>"
                                                                   @click.prevent="active = '<?php echo $subItem['key']; ?>'"
                                                                   :class="{ 'text-brand! font-medium bg-secondary/5': active === '<?php echo $subItem['key']; ?>' }"
                                                                   class="group flex items-center gap-x-3 rounded-md p-2 pl-9.5 text-sm/6 text-secondary hover:bg-secondary/2 hover:text-brand cursor-pointer">
                                                                    <?php echo \Components\Base::h($subItem['label']); ?>
                                                                </a>
                                                            </li>
                                                        <?php endforeach; ?>
                                                    </ul>
                                                <?php endif; ?>
                                            </li>
                                        <?php endforeach; ?>
                                    </ul>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div>

                <!--            <div class=" inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-sm font-medium   inset-ring-gray-200 dark:text-white dark:inset-ring-white/10">-->
                <!--  <svg viewBox="0 0 6 6" aria-hidden="true" class="size-2 fill-green-500 dark:fill-green-400">-->
                <!--    <circle r="3" cx="3" cy="3" />-->
                <!--  </svg>-->
                <!--  Production-->
                <!--</div>-->


            </div>
            <!-- Frontend switcher -->
            <div id="frontend-switcher" class="hidden pb-2 group-data-[collapsed=true]/collapse:px-1.5">
                <div class="inline-flex items-center rounded-md overflow-hidden ring-1 ring-divider shadow-xs bg-elevated text-secondary group-data-[collapsed=true]/collapse:hidden">
                    <?php
                    echo \Components\Button::render(\mh_lng('UI_MAILBEEZ_V4', 'MailBeez V4'), [
                            'variant' => 'ghost',
                            'size' => 'sm',
                            'attrs' => [
                                    'hx-post' => \Components\Router::url('switch_to_legacy', ['partial' => 1]),
                                    'hx-target' => 'body',
                                    'hx-swap' => 'innerHTML',
                                    'title' => 'Disable BeezUI and return to the legacy MailBeez admin',
                            ],
                    ]);
                    ?>
                </div>
            </div>
            <div class="hidden">
                <?php
                // Plan/Subscription Information box (extracted component)
                include BEEZUI_ROOT . '/pages/components/plan_info.php';
                ?>
            </div>

            <!-- Density switcher -->
            <div id="density-switcher"
                 class="hidden mt-2 px-2 pb-2 group-data-[collapsed=true]/collapse:px-1.5  group-data-[collapsed=true]/collapse:hidden">
                <div class="text-[11px] font-semibold uppercase tracking-wide text-secondary/60 mb-1 group-data-[collapsed=true]/collapse:hidden">
                    Density
                </div>
                <div class="inline-flex items-center rounded-md overflow-hidden ring-1 ring-divider shadow-xs bg-elevated text-secondary">
                    <button type="button" data-density="normal"
                            class="px-2 py-1 text-xs leading-5 hover:bg-muted hover:text-brand data-[selected=true]:bg-muted data-[selected=true]:text-brand">
                        N
                    </button>
                    <div class="h-4 w-px bg-divider/70"></div>
                    <button type="button" data-density="compact"
                            class="px-2 py-1 text-xs leading-5 hover:bg-muted hover:text-brand data-[selected=true]:bg-muted data-[selected=true]:text-brand">
                        C
                    </button>
                    <div class="h-4 w-px bg-divider/70"></div>
                    <button type="button" data-density="very-compact"
                            class="px-2 py-1 text-xs leading-5 hover:bg-muted hover:text-brand data-[selected=true]:bg-muted data-[selected=true]:text-brand">
                        V
                    </button>
                </div>
            </div>


            <div id="sidebar-footer" class="relative flex h-10  group-data-[collapsed=true]/collapse:translate-x-4!">
                <button type="button" onclick="toggleCollapsed()"
                        class="flex items-center gap-2 rounded-md text-xs/6 text-secondary/70 hover:text-brand"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" class="size-3 hidden group-data-[collapsed=true]/collapse:block">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" class="size-3 group-data-[collapsed=true]/collapse:hidden">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
                    </svg>
                    <span class="transition-all group-data-[collapsed=true]/collapse:hidden">Collapse</span>
                </button>
            </div>
        </div>
    </div>
    <div id="app-shell-site-body"
         class="relative mt-[3.25rem] ml-<?= BEEZUI_NAV_WIDTH ?> group-data-[collapsed=true]/collapse:ml-20 p-2 pt-0 transition-all duration-300 ease-in-out bg-muted"
         style="height: calc(100vh - 3.25rem);">
        <div class="flex h-full min-h-0 flex-col">

            <div id="app-shell-main"
                 class="relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-divider/70 bg-canvas ">
                <!-- Global loading overlay for navigation/content loads -->
                <?php echo \Components\Base::loaderOverlay('app-loading', 'z-20 rounded-2xl'); ?>

                <div id="app-shell-main-content" class="min-h-0 flex-1 overflow-auto p-1 md:p-2">
                    <?php foreach ($flattenedItems as $item):
                        $key = $item['key'];
                        $path = \Components\Router::path($key) ?: 'pages/' . $key . '.php';
                        if (!is_file(BEEZUI_ROOT . '/' . $path)) continue;
                        $isActive = ($key === $tab);
                        $componentUrl = \Components\Router::url($key, ['partial' => 0]);
                        ?>
                        <div id="page-<?php echo $key; ?>"
                             x-show="active === '<?php echo $key; ?>'"
                             x-cloak
                             data-page="<?php echo $key; ?>"
                             class="" <?php if (!$isActive) {
                            $trigger = BEEZUI_PRELOAD ? "intersect once, preload once" : "intersect once";
                            ?> hx-get="<?= $componentUrl; ?>" hx-trigger="<?= $trigger ?>" hx-swap="innerHTML"<?php } ?>>
                            <?php if ($isActive) {
                                include BEEZUI_ROOT . '/' . $path;
                            } ?>
                        </div>

                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Centralized MBLoader binding for HTMX-loaded page fragments.
        // Avoids attaching one global listener per navigation item.
        (function () {
            function bindOverlayForEl(el) {
                try {
                    if (!el || !el.id || !window.MBLoader) return;
                    if (el.id.indexOf('app-container-') === 0 || el.id.indexOf('page-') === 0) {
                        MBLoader.bindHtmxOverlay(el.id, 'app-loading', 350);
                    }
                } catch (e) { /* no-op */
                }
            }

            function bindOverlayContext(root) {
                try {
                    if (!root || !window.MBLoader) return;
                    bindOverlayForEl(root);
                    if (root.closest) {
                        bindOverlayForEl(root.closest('[id^="app-container-"]'));
                        bindOverlayForEl(root.closest('[id^="page-"]'));
                    }
                } catch (e) { /* no-op */
                }
            }

            document.addEventListener('DOMContentLoaded', function () {
                try {
                    if (!window.MBLoader) return;
                    document.querySelectorAll('[id^="app-container-"], [id^="page-"]').forEach(bindOverlayForEl);
                } catch (e) { /* no-op */
                }
            });

            document.addEventListener('htmx:load', function (event) {
                bindOverlayContext(event && event.target ? event.target : null);
            });
        })();
    </script>


</div>

<script>

    // Density switcher bindings
    (function () {
        function applyDensity(mode) {
            try {
                var html = document.documentElement;
                html.classList.remove('density-compact', 'density-very-compact');
                if (mode === 'compact') html.classList.add('density-compact');
                else if (mode === 'very-compact') html.classList.add('density-very-compact');
                localStorage.setItem('ui-density', mode);
                var buttons = document.querySelectorAll('#density-switcher [data-density]');
                buttons.forEach(function (btn) {
                    var sel = btn.getAttribute('data-density');
                    btn.setAttribute('data-selected', (sel === mode) ? 'true' : 'false');
                });
            } catch (e) {
            }
        }

        window.applyDensity = applyDensity;
        document.addEventListener('DOMContentLoaded', function () {
            try {
                var saved = localStorage.getItem('ui-density') || 'normal';
                // set selected state based on saved
                var buttons = document.querySelectorAll('#density-switcher [data-density]');
                buttons.forEach(function (btn) {
                    var sel = btn.getAttribute('data-density');
                    btn.setAttribute('data-selected', (sel === saved) ? 'true' : 'false');
                });
                var container = document.getElementById('density-switcher');
                if (container) {
                    container.addEventListener('click', function (ev) {
                        var t = ev.target.closest('[data-density]');
                        if (!t) return;
                        ev.preventDefault();
                        applyDensity(t.getAttribute('data-density'));
                    });
                }
            } catch (e) {
            }
        });
    })();

    <?php if (BEEZUI_PRELOAD): ?>
    /**
     * Lazy noblock low priority pre-load all pages
     */
    (function () {
        document.addEventListener('DOMContentLoaded', function () {
            const hasNativeRequestIdle = ('requestIdleCallback' in window);
            const requestIdle = hasNativeRequestIdle
                ? function (cb, options) {
                    return window.requestIdleCallback(cb, options);
                }
                : function (cb, options) {
                    return window.setTimeout(function () {
                        cb({
                            // Fallback path has no real idle deadline; always allow progress.
                            didTimeout: true,
                            timeRemaining: function () {
                                return 0;
                            }
                        });
                    }, 1);
                };
            // Wait a bit after load to ensure everything is stable
            setTimeout(function () {
                // Preload all pages that have a preload trigger, filtering out the currently visible one
                const pagesToPreload = Array.from(document.querySelectorAll('[hx-trigger*="preload"]'))
                    .filter(function (el) {
                        return el && el.offsetParent === null;
                    });


                if (pagesToPreload.length === 0) return;

                let current = 0;
                function preloadNext() {
                    if (current >= pagesToPreload.length) return;

                    requestIdle(function (deadline) {
                        if (!hasNativeRequestIdle || deadline.timeRemaining() > 10 || deadline.didTimeout) {
                            const el = pagesToPreload[current];
                            if (el && window.htmx) {
                                window.htmx.trigger(el, 'preload');
                            }
                            current++;
                        }
                        setTimeout(preloadNext, 200);
                    }, {timeout: 2000});
                }
                preloadNext();
            }, 1000);
        });
    })();
    <?php endif; ?>

    // Re-initialize after HTMX swaps
    // document.body.addEventListener('htmx:afterSwap', function (e) {
    //     try {
    //         var root = (e && e.detail && e.detail.target) ? e.detail.target : document.body;
    //         if (window.Alpine && typeof window.Alpine.initTree === 'function') {
    //             window.Alpine.initTree(root);
    //         }
    //     } catch (e3) {
    //     }
    // });

    function toggleCollapsed() {
        try {
            const html = document.documentElement;
            const isCollapsed = html.getAttribute('data-collapsed') === 'true';
            if (isCollapsed) {
                html.removeAttribute('data-collapsed');
                localStorage.setItem('sidebar-collapsed', 'false');
            } else {
                html.setAttribute('data-collapsed', 'true');
                localStorage.setItem('sidebar-collapsed', 'true');
            }
        } catch (e) { /* no-op */
        }
    }


    // Inform parent window when our (iframe) URL changes without reload (HTMX pushState/back/forward)
    (function () {
        function notifyParent() {
            try {
                if (window.parent && window.parent !== window) {
                    const params = new URLSearchParams(window.location.search || '');
                    const TAB_PARAM = <?php echo json_encode($tabParam); ?>;
                    const route = (params.get(TAB_PARAM) || 'dashboard').toLowerCase();
                    window.parent.postMessage({
                        type: 'iframe-location-update',
                        route: route,
                        search: window.location.search || ''
                    }, '*');
                }
            } catch (e) { /* no-op */
            }
        }

        // HTMX pushes into history when hx-push-url is used
        document.body.addEventListener('htmx:pushedIntoHistory', notifyParent);
        // Also capture browser navigation inside the iframe
        window.addEventListener('popstate', notifyParent);
    })();

    // Unified active menu setter used both by clicks and when parsing URL state
    const submenuMap = <?php
            $__map = [];
            foreach ($flattenedItems as $it) {
                $__map[$it['key']] = !empty($it['submenu']) ? $it['submenu'] : null;
            }
            echo json_encode($__map);
            ?>;

    function setActiveMenu(tab, submenuUrl) {
        try {
            if (!tab) return;
            // Toggle data-active on the menu items themselves
            const links = document.querySelectorAll('a[id^="desk-tab-"]');
            let activeLink = null;
            links.forEach((link) => {
                const key = link.id.replace('desk-tab-', '');
                if (key === String(tab).toLowerCase()) {
                    activeLink = link;
                    link.setAttribute('data-active', 'true');
                } else {
                    link.removeAttribute('data-active');
                }
            });

        } catch (e) { /* no-op */
        }
    }

    // Dynamically set the active menu item based on the current URL's ?<tab>= parameter
    function setActiveMenuFromURL() {
        try {
            const params = new URLSearchParams(window.location.search || '');
            const TAB_PARAM = <?php echo json_encode($tabParam); ?>;
            const tab = (params.get(TAB_PARAM) || '').toLowerCase();
            if (!tab) return;
            // Tell Alpine to switch the visible page
            window.dispatchEvent(new CustomEvent('set-active', {detail: tab}));
            const submenuUrl = submenuMap[tab] || null;
            setActiveMenu(tab, submenuUrl);
        } catch (e) { /* no-op */
        }
    }

    // Push/replace the URL for a given tab key, then notify existing listeners
    function updateUrlForActive(tabKey, replace) {
        try {
            if (!tabKey) return;
            const TAB_PARAM = <?php echo json_encode($tabParam); ?>;
            const PAGE_PARAM = <?php echo json_encode($pageParam); ?>;
            const url = new URL(window.location.href);
            // Update params
            url.searchParams.set(TAB_PARAM, String(tabKey).toLowerCase());
            url.searchParams.delete('partial');
            if (PAGE_PARAM && PAGE_PARAM !== TAB_PARAM) url.searchParams.delete(PAGE_PARAM);
            const href = url.pathname + url.search + url.hash;
            const currentParams = new URLSearchParams(window.location.search || '');
            const currentTab = (currentParams.get(TAB_PARAM) || '').toLowerCase();
            if (replace || currentTab === String(tabKey).toLowerCase()) {
                history.replaceState({}, '', href);
            } else {
                history.pushState({}, '', href);
            }
            // Notify existing listeners (iframe parent + menu sync)
            document.body.dispatchEvent(new CustomEvent('htmx:pushedIntoHistory', {detail: {path: href}}));
        } catch (e) { /* no-op */
        }
    }

    // Keep active state in sync for HTMX-driven navigation and browser back/forward
    document.body.addEventListener('htmx:pushedIntoHistory', setActiveMenuFromURL);
    document.body.addEventListener('htmx:afterOnLoad', setActiveMenuFromURL);
    window.addEventListener('popstate', setActiveMenuFromURL);

    // Sidebar navigation → push URL (Alpine toggles DOM instantly)
    document.addEventListener('DOMContentLoaded', function () {
        try {
            var menu = document.getElementById('menu-list');
            if (menu) {
                menu.addEventListener('click', function (e) {
                    var a = e.target && e.target.closest ? e.target.closest('a[id^="desk-tab-"]') : null;
                    if (!a) return;
                    var key = a.id.replace('desk-tab-', '');
                    updateUrlForActive(key, false);
                });
            }
            // Ensure URL reflects the initially active tab on first load (no duplicate history entry)
            try {
                var params = new URLSearchParams(window.location.search || '');
                var TAB_PARAM = <?php echo json_encode($tabParam); ?>;
                var initial = <?php echo json_encode($tab); ?>;
                var current = (params.get(TAB_PARAM) || '').toLowerCase();
                if (String(initial).toLowerCase() !== current) {
                    updateUrlForActive(initial, true);
                }
            } catch (e2) { /* no-op */
            }
        } catch (e1) { /* no-op */
        }

        // htmx.logAll();
    });
    document.addEventListener("htmx:load", () => {
        // Bind global HTMX loader for navigation/content loads targeting #app-container and #app-main
        try {
            if (window.MBLoader) {
                MBLoader.bindHtmxOverlay('app-main', 'app-loading', 350);
            }
        } catch (e) { /* no-op */
        }
    });

    document.addEventListener('htmx:beforeSwap', () => {
        window._scrollY = window.scrollY;

        try {
            if (window.parent && window.parent !== window) {
                window.parent._iframeScrollY = window.parent.scrollY;
            }
        } catch (e) {}
    });

    document.addEventListener('htmx:afterSwap', () => {
        requestAnimationFrame(() => {
            // Restore scroll inside iframe
            if (typeof window._scrollY === 'number') {
                window.scrollTo(0, window._scrollY);
            }

            // Restore scroll in parent document
            try {
                if (window.parent && window.parent !== window) {
                    if (typeof window.parent._iframeScrollY === 'number') {
                        window.parent.scrollTo(0, window.parent._iframeScrollY);
                    }
                }
            } catch (e) {}
        });
    });

    // --- Emoji picker bootstrap for HTMX + direct loads (EmailEditor, etc.) ---
    // Idempotent initializer keyed by data-init, e.g. data-init="emoji-subject-12" / "emoji-preheader-12".
    //
    // NOTE: When the EmailEditor is loaded inside a <dialog>-based modal, the browser
    // puts the dialog into the top layer above the regular document stacking
    // context. If the EmojiButton popover is attached to document.body it will
    // render *under* the dialog, regardless of z-index.
    //
    // To avoid layering issues *and* accidental modal closes when clicking inside
    // the picker, we:
    //   - Prefer attaching the picker to the closest <el-dialog-panel> ancestor,
    //     so it is treated as part of the modal content, not the backdrop.
    //   - Fall back to the closest <dialog> element, then to document.body.
    function initEmoji(key) {
        try {
            if (!key || typeof key !== 'string') return;

            // Expect pattern: "emoji-<fieldType>-<id>"
            var parts = key.split('-');
            if (parts.length < 3) return;

            var fieldType = parts[1]; // e.g. "subject" or "preheader"
            var id = parts.slice(2).join('-'); // support ids with dashes just in case

            if (!fieldType || !id) return;

            // Degrade gracefully if emoji bundle or helper is not present
            if (typeof EmojiButton === 'undefined' || !window.textFieldEdit) return;

            var buttonId = 'emoji-button-' + fieldType + '-' + id;
            var button = document.getElementById(buttonId);
            var field = document.querySelector('#' + fieldType + '-' + id);

            if (!button || !field) return;

            // Choose a root element for the picker that respects modal stacking
            // contexts and does not trigger outside-click-to-close on the
            // surrounding dialog. Mounting inside <el-dialog-panel> keeps clicks
            // within the modal content area.
            var rootEl = document.body;
            try {
                if (button.closest) {
                    // Prefer the dialog panel (modal content area)
                    var panelAncestor = button.closest('el-dialog-panel, [id$="-panel"]');
                    if (panelAncestor) {
                        rootEl = panelAncestor;
                    } else {
                        // Fallback: raw <dialog> element if present
                        var dialogAncestor = button.closest('dialog');
                        if (dialogAncestor) {
                            rootEl = dialogAncestor;
                        }
                    }
                }
            } catch (e) { /* no-op, fall back to body */ }

            var picker = new EmojiButton({
                position: 'bottom-end',
                rootElement: rootEl,
                autoHide: false,
                zIndex: 9999
            });

            picker.on('emoji', function (emoji) {
                try {
                    window.textFieldEdit.insert(field, emoji.emoji);
                    field.focus();
                } catch (e) { /* no-op */ }
            });

            button.addEventListener('click', function () {
                try {
                    picker.togglePicker(button);
                } catch (e) { /* no-op */ }
            });
        } catch (eOuter) { /* no-op */ }
    }

    function scanEmojiInits(root) {
        try {
            var scope = root && root.querySelectorAll ? root : document.body;
            if (!scope) return;
            var nodes = scope.querySelectorAll('[data-init^="emoji-"]');
            if (!nodes || !nodes.length) return;
            nodes.forEach(function (el) {
                var key = el.getAttribute('data-init');
                if (!key) return;
                initEmoji(key);
                el.removeAttribute('data-init');
            });
        } catch (e) { /* no-op */ }
    }


    // HTMX partial loads (e.g. EmailEditor in a modal)
    document.body.addEventListener('htmx:load', function (e) {
        var target = e && e.target ? e.target : document.body;
        scanEmojiInits(target);
    });

    document.body.addEventListener('htmx:afterSettle', function (e) {
        var target = e && e.target ? e.target : document.body;
        scanEmojiInits(target);
    });

    // Handle close-config-modal trigger
    document.body.addEventListener('close-config-modal', function() {
        var m = document.getElementById('config-modal');
        if (m && typeof m.close === 'function') m.close();
    });

    // Listen for cross-frame requests coming from legacy iframes (modal/drawer)
    // Supported messages:
    //  - { type: 'mb:trigger', event: 'evt:name', detail?: {...} }
    //  - { type: 'mb:close', id?: 'element-id' }  → close a modal/drawer in the parent window
    window.addEventListener('message', function (event) {
        try {
            var data = event && event.data ? event.data : null;
            if (!data || !data.type) return;

            if (data.type === 'mb:trigger') {
                var ev = data.event || '';
                if (!ev) return;
                var detail = data.detail || {};
                try {
                    if (window.htmx && window.htmx.trigger) {
                        window.htmx.trigger(document.body, ev, detail);
                    } else if (document && document.body) {
                        document.body.dispatchEvent(new CustomEvent(ev, { detail: detail }));
                    }
                } catch (e3) { /* no-op */ }
                return;
            }

            if (data.type === 'mb:close') {
                try {
                    var id = data.id || null;
                    if (id) {
                        var el = document.getElementById(String(id));
                        if (el && typeof el.close === 'function') { el.close(); return; }
                    }
                    // Try common ids if none provided or element not found
                    var candidates = ['config-modal', 'config2-modal', 'confirm-modal', 'ai-modal', 'email-preview', 'config-drawer', 'editor-inline-modal'];
                    for (var i = 0; i < candidates.length; i++) {
                        var m = document.getElementById(candidates[i]);
                        if (m && typeof m.close === 'function') { m.close(); break; }
                    }
                } catch (e4) { /* no-op */ }
                return;
            }
        } catch (e) { /* no-op */ }
    });

</script>


<script language="javascript"
        src="<?php echo mh_cfg('MH_CATALOG_SERVER') . mh_cfg('MH_DIR_WS_CATALOG') . mh_cfg('MH_ROOT_PATH'); ?>common/js/jquery-1.11.3.min.js?ver=<?php mh_cfg('MAILBEEZ_VERSION', time()) ?>"></script>
<script type="text/javascript"
        src="<?php echo mh_cfg('MH_CATALOG_SERVER') . mh_cfg('MH_DIR_WS_CATALOG') . mh_cfg('MH_ROOT_PATH'); ?>configbeez/config_editor/js/editor.js?ver=<?php mh_cfg('MAILBEEZ_VERSION', time()) ?>"></script>

<?php if (mh_cfg('MAILBEEZ_EMOJI_SUPPORT')) { ?>
    <script type="text/javascript"
            src="<?php echo mh_cfg('MH_CATALOG_SERVER') . mh_cfg('MH_DIR_WS_CATALOG') . mh_cfg('MH_ROOT_PATH'); ?>common/js/emoji-bundle/emoji-button-bundle.js?ver=<?php mh_cfg('MAILBEEZ_VERSION', time()) ?>"></script>
<?php } ?>
<script type="text/javascript"
        src="<?php echo mh_cfg('MH_CATALOG_SERVER') . mh_cfg('MH_DIR_WS_CATALOG') . mh_cfg('MH_ROOT_PATH'); ?>common/js/text-field-edit.js?ver=<?php mh_cfg('MAILBEEZ_VERSION', time()) ?>"></script>


<script src="<?php echo defined('BEEZUI_WEB_ROOT') ? BEEZUI_WEB_ROOT : ''; ?>appui/assets/js/html2canvas-pro.min.js?ver=<?= mh_cfg('MAILBEEZ_VERSION') ?>"></script>

<?= \Components\Drawer::render(['style' => 'floating']); ?>
<?= \Components\Modal::render(); ?>
<?= \Components\Modal::render(['id' => 'config2-modal']); ?>
<?= \Components\Modal::render(['id' => 'editor-inline-modal',  'style' => 'editor_inline']); ?>
<?= \Components\Modal::render(['id' => 'confirm-modal', 'style' => 'confirm', 'close_button' => false, 'popin' => true]); ?>
<?= \Components\Modal::render(['id' => 'ai-modal', 'style' => 'ai']); ?>
<?= \Components\Modal::render(['id' => 'email-preview', 'style' => 'email_preview']); ?>
<?= \Components\Modal::render(['id' => 'web-preview', 'style' => 'web_preview']); ?>
</body>
</html>
