/**
 * Shop Layout Templates
 * Header and Navigation specific to Customer-Facing Shop
 */

window.shopLayoutTemplates = {

    /**
     * Shop Header
     */
    header: () => `
        <header class="shop-header">
            <div class="shop-header-top">
                <a href="/shop/home.html" class="shop-logo" x-text="vendor?.name || 'Shop'"></a>

                <!-- Search Bar -->
                <div class="shop-search">
                    <form @submit.prevent="handleSearch()" class="search-form">
                        <input type="text"
                               x-model="searchQuery"
                               class="search-input"
                               placeholder="Search products...">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>

                <!-- Actions -->
                <div class="shop-actions">
                    <button @click="goToCart()" class="cart-button">
                        <i class="fas fa-shopping-cart"></i>
                        <span x-show="cartCount > 0"
                              x-text="cartCount"
                              class="cart-count">
                        </span>
                    </button>
                    <a href="/shop/account/login.html" class="btn btn-outline">
                        <i class="fas fa-user"></i> Account
                    </a>
                </div>
            </div>

            <!-- Navigation -->
            <nav class="shop-nav">
                <a href="/shop/home.html"
                   class="shop-nav-item"
                   :class="{ 'active': isActive('home') }">
                    Home
                </a>
                <a href="/shop/products.html"
                   class="shop-nav-item"
                   :class="{ 'active': isActive('products') }">
                    Products
                </a>
                <a href="/shop/categories.html"
                   class="shop-nav-item"
                   :class="{ 'active': isActive('categories') }">
                    Categories
                </a>
                <a href="/shop/about.html"
                   class="shop-nav-item"
                   :class="{ 'active': isActive('about') }">
                    About
                </a>
            </nav>
        </header>
    `,

    /**
     * Shop Account Sidebar
     */
    accountSidebar: () => `
        <aside class="account-sidebar">
            <nav>
                <a href="/shop/account/orders.html"
                   class="account-nav-item"
                   :class="{ 'active': isActive('orders') }">
                    <i class="fas fa-shopping-bag"></i>
                    <span>My Orders</span>
                </a>
                <a href="/shop/account/profile.html"
                   class="account-nav-item"
                   :class="{ 'active': isActive('profile') }">
                    <i class="fas fa-user"></i>
                    <span>Profile</span>
                </a>
                <a href="/shop/account/addresses.html"
                   class="account-nav-item"
                   :class="{ 'active': isActive('addresses') }">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>Addresses</span>
                </a>
                <button @click="confirmLogout()"
                        class="account-nav-item"
                        style="width: 100%; text-align: left; background: none; border: none; cursor: pointer;">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>Logout</span>
                </button>
            </nav>
        </aside>
    `
};