/**
 * Vendor Layout Templates
 * Header and Sidebar specific to Vendor Dashboard
 */

window.vendorLayoutTemplates = {

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

    /**
     * Vendor Sidebar
     */
    sidebar: () => `
        <aside class="vendor-sidebar" :class="{ 'open': menuOpen }">
            <nav class="sidebar-nav">
                <a href="/vendor/dashboard.html"
                   class="nav-item"
                   :class="{ 'active': isActive('dashboard') }">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>Dashboard</span>
                </a>
                <a href="/vendor/products.html"
                   class="nav-item"
                   :class="{ 'active': isActive('products') }">
                    <i class="fas fa-box"></i>
                    <span>Products</span>
                </a>
                <a href="/vendor/orders.html"
                   class="nav-item"
                   :class="{ 'active': isActive('orders') }">
                    <i class="fas fa-shopping-bag"></i>
                    <span>Orders</span>
                </a>
                <a href="/vendor/customers.html"
                   class="nav-item"
                   :class="{ 'active': isActive('customers') }">
                    <i class="fas fa-users"></i>
                    <span>Customers</span>
                </a>
                <a href="/vendor/settings.html"
                   class="nav-item"
                   :class="{ 'active': isActive('settings') }">
                    <i class="fas fa-cog"></i>
                    <span>Settings</span>
                </a>
            </nav>
        </aside>
    `
};