<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Finder</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Product Finder</h1>
            <div class="user-info-bar" id="userInfoBar">
                <span id="userLocationInfo"></span>
                <button onclick="logout()" class="logout-btn">Logout</button>
            </div>
        </div>
        
        <div class="breadcrumb" id="breadcrumb">
            Start
        </div>

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

    <script>
        // Base URL for API calls (supports subdirectory deployments)
        const BASE_URL = '{{ base_url }}';
        
        // Load user session info
        async function loadUserInfo() {
            try {
                const response = await fetch(BASE_URL + '/api/session');
                const data = await response.json();
                
                if (data.status === 'success') {
                    const locationNames = {
                        'LINDS': 'Lindsborg',
                        'IOLA': 'Iola',
                        'KC': 'KC',
                        'BMD': 'BMD'
                    };
                    
                    const currentLoc = locationNames[data.currentLocation] || data.currentLocation;
                    document.getElementById('userLocationInfo').textContent = 
                        `👤 ${data.username} | 📍 ${currentLoc}`;
                }
            } catch (error) {
                console.error('Error loading user info:', error);
            }
        }

        async function logout() {
            if (confirm('Are you sure you want to log out?')) {
                try {
                    await fetch(BASE_URL + '/api/logout', { method: 'POST' });
                    window.location.href = BASE_URL + '/login?message=' + encodeURIComponent('Successfully logged out');
                } catch (error) {
                    window.location.href = BASE_URL + '/login';
                }
            }
        }

        // 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 = BASE_URL;
    </script>
    <script src="{{ url_for('serve_js', filename='script.js') }}"></script>
</body>
</html>
