{% load static %}
<style>
    .sidebar {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    /* Sidebar nav icons */
    .sidebar-nav .nav-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    .sidebar-nav a {
        display: flex;
        align-items: center;
    }
    
    .sidebar-nav .nav-text {
        white-space: nowrap;
    }
    
    .sidebar-footer .footer-icon {
        display: none;
        width: 24px;
        height: 24px;
    }
    
    /* Mobile/narrow screen styles - icon only sidebar */
    @media (max-width: 768px) {
        .sidebar {
            width: 50px !important;
            min-width: 50px !important;
            max-width: 50px !important;
            padding: 16px 0 0 0 !important;
            box-sizing: border-box !important;
        }
        
        .sidebar .group-selector {
            display: none !important;
        }
        
        .sidebar-nav li {
            margin: 12px 0 0 0 !important;
            text-align: center;
        }
        
        .sidebar-nav a {
            justify-content: center;
            padding: 8px 4px !important;
        }
        
        .sidebar-nav .nav-icon {
            width: 22px;
            height: 22px;
            margin-right: 0;
        }
        
        .sidebar-nav .nav-text {
            display: none !important;
        }
        
        .sidebar-footer {
            padding: 10px 4px !important;
        }
        
        .sidebar-footer a {
            font-size: 0 !important;
        }
        
        .sidebar-footer .footer-icon {
            display: inline-block !important;
            width: 22px;
            height: 22px;
        }
    }
    
    /* Also apply for mobile user agents (detected via JS) */
    body.is-mobile .sidebar {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        padding: 16px 0 0 0 !important;
        box-sizing: border-box !important;
    }
    
    body.is-mobile .sidebar .group-selector {
        display: none !important;
    }
    
    body.is-mobile .sidebar-nav li {
        margin: 12px 0 0 0 !important;
        text-align: center;
    }
    
    body.is-mobile .sidebar-nav a {
        justify-content: center;
        padding: 8px 4px !important;
    }
    
    body.is-mobile .sidebar-nav .nav-icon {
        width: 22px;
        height: 22px;
        margin-right: 0;
    }
    
    body.is-mobile .sidebar-nav .nav-text {
        display: none !important;
    }
    
    body.is-mobile .sidebar-footer {
        padding: 10px 4px !important;
    }
    
    body.is-mobile .sidebar-footer a {
        font-size: 0 !important;
    }
    
    body.is-mobile .sidebar-footer .footer-icon {
        display: inline-block !important;
        width: 22px;
        height: 22px;
    }
</style>

<!-- Mobile User Agent Detection -->
<script>
    (function() {
        const mobileUserAgents = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
        if (mobileUserAgents.test(navigator.userAgent)) {
            document.body.classList.add('is-mobile');
        }
    })();
</script>

{% if user.is_authenticated and "AI Admin" in user_groups_dict.250.roles %}
    {{ datapathaiadmin|json_script:"datapathaiadmin" }}
{% endif %}
{% if user.is_authenticated and user_groups|length > 1 %}
<div class="group-selector">
    <label for="group-select">Select company:</label>
    <div class="select-wrapper">
        <select id="group-select" class="group-select">
            <option value="">All Companies</option>
            {% for group in user_groups %}
            <option value="{{ group.id }}" data-codename="{{ group.codename }}" company-features="{{ group.features }}" company-roles="{{ group.roles }}">
                {{ group.name }}
            </option>
            {% endfor %}
        </select>
    </div>
</div>
{% elif user.is_authenticated and user_groups|length == 1%}
<select hidden id="group-select" class="group-select">
    {% for group in user_groups %}
    <option value="{{ group.id }}" data-codename="{{ group.codename }}" company-feature="{{ group.features }}" company-roles="{{ group.roles }}">
        {{ group.name }}
    </option>
    {% endfor %}
</select>
{% endif %}

<nav class="sidebar-nav">
    <ul>
        <li>
                <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                </svg>
                <span class="nav-text">Dashboard</span>
            </a>
        </li>
        <li>
                <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
                </svg>
                <span class="nav-text">Trends</span>
            </a>
        </li>
        {% if user.is_authenticated %}
            {% if "Procurement" in user_groups_dict.250.roles %}
                <li>
                        <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                        </svg>
                        <span class="nav-text">Shipment Tracking</span>
                    </a>
                </li>
            {% endif %}
            {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access or "AI Admin" in user_groups_dict.250.roles %}
                <li>
                        <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h0m6 0h0m-5 4h4"></path>
                        </svg>
                        <span class="nav-text">Jarvis AI</span>
                    </a>
                </li>
            {% endif %}
        {% endif %}
        <li>
                <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
                <span class="nav-text">Support</span>
            </a>
        </li>
    </ul>
</nav>

<script>
    // Initialize global AbortController and request version early
    // so they're available before any widgets try to use them
    window.groupChangeAbortController = new AbortController();
    window.currentGroupRequestVersion = 0;
    
    document.addEventListener('DOMContentLoaded', function() {
        const groupSelect = document.getElementById('group-select');
        if (groupSelect) {
            // Debounce timer for group selection changes
            let groupChangeDebounceTimer = null;
            const DEBOUNCE_DELAY = 300; // milliseconds
            
            groupSelect.addEventListener('change', function() {
                const selectedGroupId = this.value;
                
                // Store the selection in localStorage immediately
                if (selectedGroupId) {
                    localStorage.setItem('selectedGroupId', selectedGroupId);
                } else {
                    localStorage.removeItem('selectedGroupId');
                }
                
                // Clear any pending debounced event
                if (groupChangeDebounceTimer) {
                    clearTimeout(groupChangeDebounceTimer);
                }
                
                // Abort any pending API requests from previous group selection
                // This prevents stale data from overwriting current data
                if (window.groupChangeAbortController) {
                    window.groupChangeAbortController.abort();
                }
                // Create a new AbortController for the new group selection
                window.groupChangeAbortController = new AbortController();
                
                // Increment the request version to invalidate any in-flight requests
                window.currentGroupRequestVersion++;
                
                // Dispatch a custom debounced event after delay
                // This allows widgets to cancel/restart their API calls
                groupChangeDebounceTimer = setTimeout(function() {
                    // Dispatch custom event that widgets can listen for
                    const event = new CustomEvent('groupChanged', {
                        detail: { 
                            groupId: selectedGroupId,
                            timestamp: Date.now(),
                            requestVersion: window.currentGroupRequestVersion
                        }
                    });
                    document.dispatchEvent(event);
                }, DEBOUNCE_DELAY);
            });
            
            // Restore previous selection if available
            const savedGroupId = localStorage.getItem('selectedGroupId');
            if (savedGroupId) {
                groupSelect.value = savedGroupId;
                // Dispatch groupChanged event so widgets load data for the restored company
                // Use setTimeout to ensure this runs after widgets have registered their listeners
                setTimeout(function() {
                    const event = new CustomEvent('groupChanged', {
                        detail: { 
                            groupId: savedGroupId,
                            timestamp: Date.now(),
                            requestVersion: window.currentGroupRequestVersion
                        }
                    });
                    document.dispatchEvent(event);
                }, 50);
            }
        }
    });
</script>

<div class="sidebar-footer" style="margin-top: auto; padding: 16px; border-top: 1px solid #5a6b7c; text-align: center; position: sticky; bottom: 0; background: #435364;">
        <svg class="footer-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
        </svg>
        Submit Feedback
    </a>
</div>