<?php
/**
 * Slate — admin shell footer.
 *
 * Closes the main element opened by header.php, then renders the
 * mobile bottom tab bar + "More" sheet. Both are no-ops on desktop
 * (CSS-hidden via @media min-width: 768px).
 *
 * Finally emits any scripts queued by active plugins via
 * $this->enqueueScript().
 *
 * Variables expected from header.php scope (PHP includes share scope
 * with their including file):
 *   $tabBarItems, $moreNavItems, $currentNav, $navItems
 */
if (!defined('SLATE_ROOT')) exit;
?>
        </main>

        <!-- ─── Bottom tab bar (mobile) ──────────────────── -->
        <nav class="tabbar" aria-label="<?= __('primary_navigation', 'Primary navigation') ?>">
            <?php foreach ($tabBarItems as $item):
                $isActive = ($currentNav === ($item['slug'] ?? null));
            ?>
                <a href="<?= e($item['href']) ?>"
                   class="tabbar-item <?= $isActive ? 'is-active' : '' ?>"
                   <?= $isActive ? 'aria-current="page"' : '' ?>>
                    <?= slate_admin_nav_icon($item['icon'] ?? 'circle') ?>
                    <span class="tabbar-item-label"><?= e($item['label']) ?></span>
                </a>
            <?php endforeach; ?>

            <?php if (!empty($moreNavItems)): ?>
                <button type="button" class="tabbar-item" id="slate-more-trigger"
                        aria-expanded="false" aria-controls="slate-more-sheet">
                    <?= slate_admin_nav_icon('more') ?>
                    <span class="tabbar-item-label"><?= __('more', 'More') ?></span>
                </button>
            <?php else: ?>
                <a href="<?= e(SLATE_URL) ?>/admin/logout.php" class="tabbar-item">
                    <?= slate_admin_nav_icon('logout') ?>
                    <span class="tabbar-item-label"><?= __('logout', 'Log out') ?></span>
                </a>
            <?php endif; ?>
        </nav>

        <?php if (!empty($moreNavItems)): ?>
        <!-- ─── More sheet (mobile overflow) ─────────────── -->
        <div class="sheet-overlay" id="slate-sheet-overlay" hidden></div>
        <div class="sheet" id="slate-more-sheet" role="dialog"
             aria-modal="true" aria-labelledby="slate-more-title" hidden>
            <div class="sheet-handle" aria-hidden="true"></div>
            <div class="sheet-header" id="slate-more-title"><?= __('more', 'More') ?></div>
            <ul class="sheet-nav">
                <?php foreach ($moreNavItems as $item):
                    $isActive = ($currentNav === ($item['slug'] ?? null));
                ?>
                    <li>
                        <a href="<?= e($item['href']) ?>" class="<?= $isActive ? 'is-active' : '' ?>">
                            <?= slate_admin_nav_icon($item['icon'] ?? 'circle') ?>
                            <span><?= e($item['label']) ?></span>
                        </a>
                    </li>
                <?php endforeach; ?>
                <li>
                    <a href="<?= e(SLATE_URL) ?>/admin/logout.php">
                        <?= slate_admin_nav_icon('logout') ?>
                        <span><?= __('logout', 'Log out') ?></span>
                    </a>
                </li>
            </ul>
        </div>
        <script>
        (function() {
            var trigger = document.getElementById('slate-more-trigger');
            var sheet   = document.getElementById('slate-more-sheet');
            var overlay = document.getElementById('slate-sheet-overlay');
            if (!trigger || !sheet || !overlay) return;

            function openSheet() {
                sheet.hidden = false;
                overlay.hidden = false;
                // Force reflow so the transition fires
                void sheet.offsetWidth;
                sheet.classList.add('is-open');
                overlay.classList.add('is-open');
                trigger.setAttribute('aria-expanded', 'true');
                document.body.style.overflow = 'hidden';
            }
            function closeSheet() {
                sheet.classList.remove('is-open');
                overlay.classList.remove('is-open');
                trigger.setAttribute('aria-expanded', 'false');
                document.body.style.overflow = '';
                setTimeout(function() {
                    sheet.hidden = true;
                    overlay.hidden = true;
                }, 250);
            }
            trigger.addEventListener('click', openSheet);
            overlay.addEventListener('click', closeSheet);
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && sheet.classList.contains('is-open')) closeSheet();
            });
        })();
        </script>
        <?php endif; ?>

    </div><!-- /.app-layout -->

    <?= PluginLoader::renderQueuedScripts() ?>
</body>
</html>
