<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Product Finder</title>
    <link rel="stylesheet" href="{{ url_for('products.serve_css', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Product Finder</h1>
        </div>
        
        <div class="user-info-bar" id="userInfoBar">
            <span id="userLocationInfo"></span>
            <a href="{{ url_for('auth.logout') }}" class="logout-btn" title="Logout" 
               onclick="return confirm('Are you sure you want to log out?');" 
               style="background: none; border: none; cursor: pointer; font-size: 16px; text-decoration: none; display: inline-block; padding: 8px 12px;">🚪</a>
        </div>
        
        <div class="breadcrumb" id="breadcrumb">
            Start
        </div>

        <!-- Search Bar Component -->
        <div class="search-container" id="searchContainer" style="display: none;">
            <div class="search-wrapper">
                <div class="search-input-wrapper">
                    <input type="text" 
                           id="searchInput" 
                           class="search-input" 
                           placeholder="Search for products... (e.g., Storm Window)"
                           autocomplete="off">
                    <button class="search-btn search-btn-action" id="searchGoBtn" onclick="handleSearchGo()">Search / Go</button>
                    <div class="search-dropdown" id="searchDropdown"></div>
                </div>
            </div>
        </div>

        <div id="content">
            <!-- Content will be dynamically loaded here -->
        </div>
    </div>

    <script>
        // Base URL for API calls
        const BASE_URL = '';
        
        // Load user session info
        async function loadUserInfo() {
            try {
                const response = await fetch('/api/session');
                const data = await response.json();
                
                if (data.status === 'success') {
                    const locationNames = {
                        'LINDS': 'Lindsborg',
                        'IOLA': 'Iola',
                        'KC': 'Kansas City',
                        'BMD': 'BMD'
                    };
                    
                    const currentLoc = locationNames[data.currentLocation] || data.currentLocation;
                    const canChangeLocation = data.accessibleLocations && data.accessibleLocations.length > 1;
                    
                    let locationDisplay;
                    if (canChangeLocation) {
                        locationDisplay = `<a href="{{ url_for('auth.select_location_page') }}" style="color: #6a4c93; text-decoration: none; font-weight: 500; cursor: pointer;" 
                                              onmouseover="this.style.textDecoration='underline'" 
                                              onmouseout="this.style.textDecoration='none'"
                                              title="Click to change location">📍 ${currentLoc}</a>`;
                    } else {
                        locationDisplay = `📍 ${currentLoc}`;
                    }
                    
                    let manageProductsLink = '';
                    if (data.permissions && data.permissions.manage_products) {
                        manageProductsLink = ` | <a href="{{ url_for('products.product_manager') }}" style="color: #6a4c93; text-decoration: none; font-weight: 500; cursor: pointer;" 
                                                  onmouseover="this.style.textDecoration='underline'" 
                                                  onmouseout="this.style.textDecoration='none'"
                                                  title="Manage Products">Manage Products</a>`;
                    }
                    
                    document.getElementById('userLocationInfo').innerHTML = 
                        `👤 ${data.username} | ${locationDisplay}${manageProductsLink}`;
                }
            } catch (error) {
                console.error('Error loading user info:', error);
            }
        }

        // Load user info when page loads
        loadUserInfo();
    </script>
    <script>
        // Pass BASE_URL to script.js by setting it as a window variable
        window.APP_BASE_URL = '';
        // Set data path for the quiz
        window.DATA_PATH = '{{ url_for("products.serve_data", filename="") }}';
        // Set initial product if provided via URL
        window.INITIAL_PRODUCT = '{{ initial_product or "" }}';
    </script>
    <script src="{{ url_for('products.serve_js', filename='script.js') }}"></script>
</body>
</html>
