<?php

/**
 * Modern Crew Portal Layout (RC-005)
 *
 * Layout Architecture:
 * - Desktop: CSS flexbox row — sidebar is a normal flex child (no fixed positioning)
 * - Mobile: sidebar becomes a fixed overlay drawer controlled by Alpine.js
 */

$flash = $flash ?? [];
$title = isset($title) && is_string($title) ? $title . ' • INVEETAIRE' : 'Crew • INVEETAIRE';

// Fetch current user details
$db = \App\Core\Database::getConnection();
$stmt = $db->prepare('SELECT username, display_name, r.name AS role_title 
                       FROM users u 
                       JOIN roles r ON r.id = u.role_id 
                      WHERE u.id = ?');
$stmt->execute([$_SESSION['auth_user_id'] ?? 0]);
$userObj = $stmt->fetch();
$displayName = $userObj ? ($userObj['display_name'] ?: $userObj['username']) : 'Crew';
$roleName = $userObj ? $userObj['role_title'] : 'Crew';
$workspaceName = $_SESSION['active_workspace_name'] ?? 'My Wedding';
$workspaceId = (int) ($_SESSION['active_workspace_id'] ?? 0);

$currentUri = $_SERVER['REQUEST_URI'] ?? '';

$assignedWorkspaces = [];
if (($_SESSION['auth_user_role_slug'] ?? '') === 'crew') {
    $stmt = $db->prepare('
        SELECT w.id, w.groom_name, w.bride_name, w.slug 
        FROM workspaces w
        JOIN crew_accounts ca ON ca.workspace_id = w.id
        WHERE ca.user_id = :user_id AND ca.is_active = 1
    ');
    $stmt->execute(['user_id' => $_SESSION['auth_user_id'] ?? 0]);
    $assignedWorkspaces = $stmt->fetchAll(\PDO::FETCH_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= escape_html($title) ?></title>
    <meta name="robots" content="noindex, nofollow">
    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">

    <link rel="apple-touch-icon" sizes="180x180" href="<?= asset('/assets/branding/favicon/apple-touch-icon.png') ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/favicon-32x32.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/favicon-16x16.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/light-bg/favicon-32x32.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/light-bg/favicon-16x16.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="manifest" href="<?= asset('/assets/branding/favicon/site.webmanifest') ?>">

    <link rel="stylesheet" href="<?= asset('/assets/css/all.min.css') ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/app.css') ?>?v=<?= time() ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/design_system.css') ?>?v=<?= time() ?>">
    <style>
        /* ── Crew Portal Layout Shell ── */
        html, body { height: 100%; margin: 0; }

        .portal-shell {
            display: flex;
            height: 100vh;
            overflow: hidden;
            background-color: #FAF8F3; /* Ivory */
            font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
            color: #232323; /* Charcoal */
        }

        /* ── Sidebar: always visible on desktop as a flex child ── */
        .portal-sidebar {
            width: 256px;
            min-width: 256px;
            background-color: #232323; /* Charcoal */
            border-right: 1px solid #1a1a1a;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            overflow-y: auto;
            flex-shrink: 0;
            z-index: 10;
        }

        /* ── Main content column ── */
        .portal-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
        }

        /* ── Top navigation bar ── */
        .portal-topbar {
            height: 64px;
            min-height: 64px;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            z-index: 20;
        }

        /* ── Scrollable content area ── */
        .portal-content {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            background-color: #FAF8F3; /* Ivory */
        }

        .sidebar-nav-link {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.8125rem;
            font-weight: 500;
            text-decoration: none;
            transition: background-color 0.15s, color 0.15s;
            border-left: 3px solid transparent;
            color: #cbd5e1;
        }
        .sidebar-nav-link:hover {
            background-color: rgba(255, 255, 255, 0.06);
            color: #ffffff;
        }
        .sidebar-nav-link.active {
            background-color: rgba(212, 162, 140, 0.14); /* DS001: Rose Gold tint */
            color: #ffffff;
            border-left-color: #D4A28C; /* DS001: Rose Gold accent */
        }

        /* ── Sidebar footer ── */
        .sidebar-footer-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-decoration: none;
            color: #94a3b8;
            transition: background-color 0.15s, color 0.15s;
        }
        .sidebar-footer-link:hover { background-color: rgba(255,255,255,0.06); color: #ffffff; }
        .sidebar-footer-btn {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            background: none;
            border: none;
            color: #f87171;
            cursor: pointer;
            text-align: left;
            transition: background-color 0.15s;
        }
        .sidebar-footer-btn:hover { background-color: rgba(239,68,68,0.1); }

        /* ── Profile dropdown ── */
        .profile-dropdown {
            position: absolute;
            right: 0;
            top: calc(100% + 0.5rem);
            width: 12rem;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
            padding: 0.5rem 0;
            z-index: 50;
        }
        .profile-dropdown a {
            display: block;
            padding: 0.5rem 1rem;
            font-size: 0.75rem;
            color: #374151;
            text-decoration: none;
            transition: background-color 0.1s;
        }
        .profile-dropdown a:hover { background-color: #f8fafc; color: #111827; }

        /* ── Mobile: sidebar becomes fixed overlay ── */
        @media (max-width: 1023px) {
            .portal-sidebar {
                position: fixed;
                top: 0; left: 0;
                height: 100%;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                z-index: 50;
            }
            .portal-sidebar.mobile-open {
                transform: translateX(0);
            }
            .sidebar-overlay { display: block; }
        }
        @media (min-width: 1024px) {
            .sidebar-overlay { display: none !important; }
            .mobile-hamburger { display: none; }
        }

        /* ── Animations ── */
        .fade-in { animation: fadeIn 0.2s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    </style>
</head>
<body>

<?php if (\App\Core\Session::get('super_admin_workspace_mode') === true): ?>
    <div style="background-color:#f59e0b; color:#ffffff; font-size:0.75rem; font-weight:700; padding:0.625rem 1rem; display:flex; align-items:center; justify-content:between; z-index:9999; border-bottom:1px solid #d97706; position:relative; width:100%;">
        <div style="display:flex; align-items:center; gap:0.375rem;">
            <i class="fa-solid fa-triangle-exclamation"></i>
            Viewing Workspace: <strong><?= escape_html($workspaceName) ?></strong> | Mode: <strong>Super Admin</strong>
        </div>
        <a href="<?= url('/app/admin/dashboard') ?>" style="background-color:#d97706; border-radius:0.25rem; color:#ffffff; font-weight:700; padding:0.25rem 0.625rem; font-size:0.625rem; text-decoration:none; display:flex; align-items:center; gap:0.25rem; margin-left:auto;">
            <i class="fa-solid fa-arrow-left"></i> Return to Admin
        </a>
    </div>
<?php endif; ?>

    <div class="portal-shell" x-data="{ mobileOpen: false, profileOpen: false, logoutModalOpen: false }">

        <!-- Mobile sidebar overlay -->
        <div class="sidebar-overlay fixed inset-0 bg-slate-900/80 backdrop-blur-sm z-40"
             style="display:none"
             x-show="mobileOpen"
             x-transition:enter="transition-opacity ease-linear duration-200"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="mobileOpen = false">
        </div>

        <!-- ── Sidebar ── -->
        <aside class="portal-sidebar" :class="mobileOpen ? 'mobile-open' : ''" id="crew-sidebar">
            
            <div>
                <div style="height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; border-bottom:1px solid #1e293b;">
                    <img src="<?= asset('/assets/branding/logo/Primary-Logo-Dark-TransparentBG.png') ?>" alt="INVEETAIRE Logo" style="height:76px; width:auto; object-fit:contain;">
                    <button @click="mobileOpen = false" class="mobile-hamburger" style="background:none; border:none; cursor:pointer; color:#94a3b8; font-size:1rem;">
                        ✕
                    </button>
                </div>

                <!-- Workspace Selector / Switcher -->
                <?php if ($workspaceId > 0): ?>
                    <div style="padding:1rem 1.5rem; border-bottom:1px solid #1e293b; background:rgba(2,6,23,0.4);" x-data="{ switcherOpen: false }">
                        <span style="display:block; font-size:0.625rem; text-transform:uppercase; letter-spacing:0.1em; color:#475569; font-weight:700;">Workspace</span>
                        
                        <?php if (count($assignedWorkspaces) > 1): ?>
                            <div style="position:relative; margin-top:0.25rem;">
                                <button @click="switcherOpen = !switcherOpen" style="width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; font-size:0.75rem; font-weight:600; color:#e2e8f0; background:rgba(30,41,59,0.6); border-radius:0.5rem; padding:0.375rem 0.625rem; border:1px solid rgba(71,85,105,0.5); cursor:pointer; font-family:inherit;">
                                    <span style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px;">
                                        <?= escape_html($workspaceName) ?>
                                    </span>
                                    <i class="fa-solid fa-chevron-down" style="font-size:8px; color:#94a3b8;"></i>
                                </button>
                                <div x-show="switcherOpen" @click.away="switcherOpen = false" style="position:absolute; left:0; margin-top:0.25rem; width:100%; background:#1e293b; border:1px solid #334155; border-radius:0.5rem; box-shadow:0 10px 15px -3px rgba(0,0,0,0.3); padding:0.25rem 0; z-index:999; display:none;">
                                    <?php foreach ($assignedWorkspaces as $aw): 
                                        $awName = "{$aw['groom_name']} & {$aw['bride_name']}";
                                    ?>
                                        <form action="<?= url('/app/crew/select-workspace') ?>" method="POST" style="margin:0;">
                                            <?= csrf_field() ?>
                                            <input type="hidden" name="workspace_id" value="<?= $aw['id'] ?>">
                                            <button type="submit" style="width:100%; text-align:left; padding:0.5rem 0.75rem; font-size:0.75rem; background:none; border:none; color:#e2e8f0; cursor:pointer; font-family:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" onmouseover="this.style.backgroundColor='rgba(51,65,85,0.5)'" onmouseout="this.style.backgroundColor='transparent'">
                                                <?= escape_html($awName) ?>
                                            </button>
                                        </form>
                                    <?php endforeach; ?>
                                    <hr style="border:none; border-top:1px solid #334155; margin:0.25rem 0;">
                                    <a href="<?= url('/app/crew/weddings') ?>" style="display:block; padding:0.5rem 0.75rem; font-size:0.75rem; color:#f87171; text-decoration:none; font-family:inherit; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" onmouseover="this.style.backgroundColor='rgba(51,65,85,0.5)'" onmouseout="this.style.backgroundColor='transparent'">
                                        <i class="fa-solid fa-arrow-left mr-1"></i> Exit Workspace
                                    </a>
                                </div>
                            </div>
                        <?php else: ?>
                            <span style="display:block; font-size:0.875rem; font-weight:600; color:#e2e8f0; margin-top:0.125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                                <?= escape_html($workspaceName) ?>
                            </span>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>

                <!-- Nav Menu Links -->
                <nav style="padding:1.5rem 1rem; display:flex; flex-direction:column; gap:0.375rem;" role="navigation">
                    <?php if ($workspaceId <= 0): ?>
                        <a href="<?= url('/app/crew/dashboard') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/app/crew/dashboard') !== false) ? 'active' : '' ?>">
                            <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                <i class="fa-solid fa-gauge-high text-inherit"></i>
                            </div>
                            <span>Dashboard</span>
                        </a>

                        <a href="<?= url('/app/crew/weddings') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/app/crew/weddings') !== false) ? 'active' : '' ?>">
                            <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                <i class="fa-solid fa-list-check text-inherit"></i>
                            </div>
                            <span>Wedding List</span>
                        </a>
                    <?php endif; ?>

                    <!-- Wedding Day Menu (RC-013) -->
                    <?php
                    $workspaceId = (int) ($_SESSION['active_workspace_id'] ?? 0);
                    $sidebarEvents = [];
                    if ($workspaceId > 0) {
                        $opModel = new \App\Modules\Operation\OperationModel();
                        $opModel->ensurePilotEventsExist($workspaceId);
                        $opModel->migrateExistingGuestsEvents($workspaceId);
                        
                        $db = \App\Core\Database::getConnection();
                        $stmt = $db->prepare('SELECT id, event_name FROM wedding_events WHERE workspace_id = :workspace_id AND is_deleted = 0 ORDER BY sort_order ASC');
                        $stmt->execute(['workspace_id' => $workspaceId]);
                        $sidebarEvents = $stmt->fetchAll(\PDO::FETCH_ASSOC);
                    }
                    $isOperationActive = (strpos($currentUri, '/operation/') !== false);
                    ?>
                    <?php if ($workspaceId > 0): ?>
                        <div x-data="{ expanded: <?= $isOperationActive ? 'true' : 'false' ?> }">
                            <button @click="expanded = !expanded" class="sidebar-nav-link w-full text-left flex justify-between items-center <?= $isOperationActive ? 'active' : '' ?>">
                                <div class="flex items-center gap-3">
                                    <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                        <i class="fa-solid fa-calendar-check text-inherit"></i>
                                    </div>
                                    <span>Wedding Day</span>
                                </div>
                                <i class="fa-solid fa-chevron-right text-slate-400 transition-transform duration-200 text-[10px]" :class="expanded ? 'rotate-90' : ''"></i>
                            </button>
                            <div x-show="expanded" style="display: none; padding-left: 1.5rem; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem;" class="flex">
                                <?php foreach ($sidebarEvents as $se):
                                    $role = \App\Core\Session::get('role_snapshot') === 'crew' ? 'crew' : 'couple';
                                    $isActive = (strpos($currentUri, "/operation/event/{$se['id']}/") !== false || strpos($currentUri, "/operation/event/{$se['id']}?") !== false || substr($currentUri, -strlen("/operation/event/{$se['id']}")) === "/operation/event/{$se['id']}");
                                ?>
                                    <a href="<?= url("/app/{$role}/operation/event/{$se['id']}/checkin") ?>" class="sidebar-nav-link py-1.5 text-xs <?= $isActive ? 'active' : '' ?>">
                                        <span>•</span> <span><?= escape_html($se['event_name']) ?></span>
                                    </a>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <!-- Guests parent menu with submenu items -->
                        <?php 
                        $isGuestsActive = (strpos($currentUri, '/guests') !== false || strpos($currentUri, '/whatsapp-queue') !== false); 
                        $role = \App\Core\Session::get('role_snapshot') === 'crew' ? 'crew' : 'couple';
                        ?>
                        <div x-data="{ expanded: <?= $isGuestsActive ? 'true' : 'false' ?> }">
                            <button @click="expanded = !expanded" class="sidebar-nav-link w-full text-left flex justify-between items-center <?= $isGuestsActive ? 'active' : '' ?>">
                                <div class="flex items-center gap-3">
                                    <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                        <i class="fa-solid fa-users text-inherit"></i>
                                    </div>
                                    <span>Guest</span>
                                </div>
                                <i class="fa-solid fa-chevron-right text-slate-400 transition-transform duration-200 text-[10px]" :class="expanded ? 'rotate-90' : ''"></i>
                            </button>
                            <div x-show="expanded" 
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 -translate-y-1"
                                 x-transition:enter-end="opacity-100 translate-y-0"
                                 x-transition:leave="transition ease-in duration-100"
                                 x-transition:leave-start="opacity-100 translate-y-0"
                                 x-transition:leave-end="opacity-0 -translate-y-1"
                                 style="display: none; padding-left: 1.5rem; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem;" class="flex">
                                <a href="<?= url("/app/{$role}/guests") ?>" class="sidebar-nav-link py-1.5 text-xs <?= ($currentUri === "/app/{$role}/guests" || (strpos($currentUri, '/guests/import') === false && strpos($currentUri, '/guests/create') === false && strpos($currentUri, '/guests/edit') === false && strpos($currentUri, "/app/{$role}/guests") !== false)) ? 'active' : '' ?>">
                                    <span>•</span> <span>Guest List</span>
                                </a>
                                <a href="<?= url("/app/{$role}/guests/create") ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, "/app/{$role}/guests/create") !== false) ? 'active' : '' ?>">
                                    <span>•</span> <span>Add Guest</span>
                                </a>
                                <a href="<?= url("/app/{$role}/guests/import") ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, "/app/{$role}/guests/import") !== false) ? 'active' : '' ?>">
                                    <span>•</span> <span>Import Excel</span>
                                </a>
                                <a href="<?= url("/app/{$role}/engagement/whatsapp-queue") ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, "/app/{$role}/engagement/whatsapp-queue") !== false) ? 'active' : '' ?>">
                                    <span>•</span> <span>WhatsApp Sending</span>
                                </a>
                            </div>
                        </div>
                    <?php endif; ?>
                </nav>
            </div>

            <!-- Footer / Logout area -->
            <div style="padding:1rem; border-top:1px solid #1e293b; background:rgba(2,6,23,0.2); display:flex; flex-direction:column; gap:0.5rem;">
                <a href="<?= url('/app/crew/settings') ?>" class="sidebar-footer-link flex items-center gap-2">
                    <i class="fa-solid fa-key"></i> <span>Change Password</span>
                </a>
                <button type="button" @click="logoutModalOpen = true" class="sidebar-footer-btn w-full text-left flex items-center gap-2">
                    <i class="fa-solid fa-right-from-bracket"></i> <span>Logout</span>
                </button>
            </div>

        </aside>

        <!-- ── Main Content Area ── -->
        <div class="portal-main">
            
            <!-- Top Navigation Bar -->
            <header class="portal-topbar" role="banner">
                <!-- Hamburger for mobile -->
                <button @click="mobileOpen = true" class="mobile-hamburger" style="background:none; border:none; cursor:pointer; font-size:1.25rem; color:#64748b; padding:0.5rem; border-radius:0.5rem;">
                    <i class="fa-solid fa-bars"></i>
                </button>
                
                <!-- Workspace breadcrumb -->
                <div style="font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.075em; color:#64748b; display:flex; align-items:center; gap:0.5rem;">
                    <?php if ($workspaceId > 0): ?>
                        <span><?= escape_html($workspaceName) ?></span>
                        <span style="color:#cbd5e1;">/</span>
                    <?php endif; ?>
                    <a href="<?= url('/app/crew/weddings') ?>" class="hover:underline" style="color: var(--brand-rose-gold); text-decoration: none;"><?= escape_html($roleName) ?> Portal</a>
                </div>

                <!-- Right: Profile dropdown -->
                <div style="position:relative;">
                    <button @click="profileOpen = !profileOpen"
                            style="background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:0.75rem;">
                        <div style="text-align:right;">
                            <div style="font-size:0.75rem; font-weight:700; color:#1e293b;"><?= escape_html($displayName) ?></div>
                            <div style="font-size:0.625rem; color:#94a3b8; font-weight:600;"><?= escape_html($roleName) ?></div>
                        </div>
                        <div style="width:2rem; height:2rem; border-radius:50%; color:#ffffff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.875rem;" class="brand-gradient shadow-sm">
                            <?= strtoupper(substr($displayName, 0, 1)) ?>
                        </div>
                    </button>

                    <!-- Dropdown -->
                    <div class="profile-dropdown" x-show="profileOpen" @click.away="profileOpen = false"
                         x-transition:enter="transition ease-out duration-150"
                         x-transition:enter-start="opacity-0 translate-y-1"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-100"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0"
                         style="display:none;">
                        <div style="padding:0.5rem 1rem; border-bottom:1px solid #f1f5f9; margin-bottom:0.25rem;">
                            <p style="font-size:0.625rem; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:0.075em; margin:0;">Signed in as</p>
                            <p style="font-size:0.75rem; font-weight:600; color:#1e293b; margin:0.125rem 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"><?= escape_html($displayName) ?></p>
                        </div>
                        <a href="<?= url('/app/crew/settings') ?>">Change Password</a>
                        <hr style="margin:0.25rem 0; border:none; border-top:1px solid #f1f5f9;">
                            <button type="button" @click="logoutModalOpen = true" style="display:block; width:100%; padding:0.5rem 1rem; font-size:0.75rem; color:#dc2626; font-weight:600; background:none; border:none; cursor:pointer; text-align:left;" onmouseover="this.style.backgroundColor='#fef2f2'" onmouseout="this.style.backgroundColor='transparent'">
                                Logout
                            </button>
                        </form>
                    </div>
                </div>
            </header>

            <!-- Scrollable page contents -->
            <main class="portal-content" id="main-content" role="main">
                <?php include ROOT_PATH . '/app/views/components/flash.php'; ?>
                <div class="fade-in">
                    <?= $content ?>
                </div>
            </main>

        <!-- Standardized Logout Confirmation Modal (RC-015) -->
        <div 
            class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4" 
            style="display: none;" 
            x-show="logoutModalOpen"
            @keydown.escape.window="logoutModalOpen = false"
            @click.self="logoutModalOpen = false"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            role="dialog"
            aria-modal="true"
            aria-labelledby="modal-title-logout"
        >
            <div class="bg-white rounded-2xl max-w-sm w-full p-6 shadow-2xl space-y-6">
                <div class="text-center space-y-2">
                    <span class="text-4xl block">👋</span>
                    <h3 id="modal-title-logout" class="text-sm font-bold text-slate-800">Confirm Logout</h3>
                    <p class="text-xs text-slate-500 leading-relaxed">Are you sure you want to end your current session and exit the workspace?</p>
                </div>
                
                <form action="<?= url('/logout') ?>" method="POST" class="flex gap-3 m-0">
                    <input type="hidden" name="_csrf" value="<?= escape_html(\App\Core\Csrf::getToken()) ?>">
                    <button type="button" @click="logoutModalOpen = false" class="btn btn-secondary flex-1 py-2 text-xs font-bold">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary flex-1 py-2 text-xs font-bold text-white">
                        Logout
                    </button>
                </form>
            </div>
        </div>

    </div>

    <!-- Alpine.js -->
    <script src="/assets/js/app.js" defer></script>

</body>
</html>
