/**
 * Admin Layout Templates
 * Header and Sidebar specific to Admin Portal
 */

window.adminLayoutTemplates = {

    /**
     * Admin Header
     */
    header: () => `
        <header class="admin-header">
            <div class="header-left">
                <button @click="toggleMenu()" class="menu-toggle">
                    <i class="fas fa-bars"></i>
                </button>
                <h1 class="header-title">Admin Portal</h1>
            </div>
            <div class="header-right">
                <span class="user-name" x-text="user?.username || 'Admin'"></span>
                <button @click="confirmLogout()" class="btn-logout">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </button>
            </div>
        </header>
    `,

    /**
     * Admin Sidebar
     */
    sidebar: () => `
        <aside class="admin-sidebar" :class="{ 'open': menuOpen }">
            <nav class="sidebar-nav">
                <a href="/admin/dashboard.html"
                   class="nav-item"
                   :class="{ 'active': isActive('dashboard') }">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>Dashboard</span>
                </a>
                <a href="/admin/vendors.html"
                   class="nav-item"
                   :class="{ 'active': isActive('vendors') }">
                    <i class="fas fa-store"></i>
                    <span>Vendors</span>
                </a>
                <a href="/admin/users.html"
                   class="nav-item"
                   :class="{ 'active': isActive('users') }">
                    <i class="fas fa-users"></i>
                    <span>Users</span>
                </a>
                <a href="/admin/marketplace.html"
                   class="nav-item"
                   :class="{ 'active': isActive('marketplace') }">
                    <i class="fas fa-shopping-cart"></i>
                    <span>Marketplace</span>
                </a>
                <a href="/admin/monitoring.html"
                   class="nav-item"
                   :class="{ 'active': isActive('monitoring') }">
                    <i class="fas fa-chart-line"></i>
                    <span>Monitoring</span>
                </a>
            </nav>
        </aside>
    `
};