{# Sidebar Navigation - Left side menu for workspace #}

<nav class="workspace-sidebar" id="workspaceSidebar">
    {# Quick Actions - replaces FAB #}
    <div class="nav-section">
        <div class="nav-section-title">Quick Actions</div>

        <button type="button" class="nav-item nav-action" id="addBuyButton" title="Add Buy">
            <i class="fa fa-plus"></i>
            <span>Add Buy</span>
        </button>

        <button type="button" class="nav-item nav-action" id="clockInButton" title="Clock In">
            <i class="fa fa-user-plus"></i>
            <span>Clock In</span>
        </button>

        {# Comeback Cash Quick Redeem - requires permission #}
        {% if user.checkAccess('uri_comeback_cash') %}
        <button type="button" class="nav-item nav-action" id="comebackCashRedeemButton" title="Redeem Comeback Cash" data-bs-toggle="modal" data-bs-target="#comebackCashRedeemModal">
            <i class="fa fa-ticket"></i>
            <span>Redeem Coupon</span>
        </button>
        {% endif %}

        {# FiveStars Loyalty Lookup - only if FiveStars is configured #}
        {% if fiveStarsEnabled|default(false) %}
        <button type="button" class="nav-item nav-action" id="fiveStarsLookupButton" title="FiveStars Lookup" data-bs-toggle="modal" data-bs-target="#fiveStarsModal">
            <i class="fa fa-star"></i>
            <span>FiveStars</span>
        </button>
        {% endif %}
    </div>

    <div class="nav-divider"></div>

    <div class="nav-section">
        <div class="nav-section-title">Operations</div>

        {# Queue and Workbook use SPA navigation (no page reload) #}
        <a href="/{{ store.typeNum }}/" class="nav-item spa-nav {{ activePage == 'queue' ? 'active' : '' }}" data-view="queue" data-url="/{{ store.typeNum }}/">
            <i class="fa fa-list"></i>
            <span>Queue</span>
            {% if embedded_chat_enabled|default(false) %}
            <span class="badge bg-danger rounded-pill chat-nav-badge" id="chatBadgeQueue" style="display:none;">0</span>
            {% endif %}
        </a>

        <a href="/{{ store.typeNum }}/workbook/" class="nav-item spa-nav {{ activePage == 'workbook' ? 'active' : '' }}" data-view="workbook" data-url="/{{ store.typeNum }}/workbook/">
            <i class="fa fa-book"></i>
            <span>Workbook</span>
        </a>

        {# Completed Buys uses SPA navigation #}
        <a href="/{{ store.typeNum }}/completed/" class="nav-item spa-nav {{ activePage == 'completed' ? 'active' : '' }}" data-view="completed" data-url="/{{ store.typeNum }}/completed/">
            <i class="fa fa-check-circle"></i>
            <span>Completed Buys</span>
        </a>

        {# Print Log uses SPA navigation #}
        <a href="/{{ store.typeNum }}/printLog/" class="nav-item spa-nav {{ activePage == 'printlog' ? 'active' : '' }}" data-view="printlog" data-url="/{{ store.typeNum }}/printLog/">
            <i class="fa fa-print"></i>
            <span>Buy Log</span>
        </a>

        {# Help Center uses SPA navigation #}
        <a href="/{{ store.typeNum }}/support/" class="nav-item spa-nav {{ activePage == 'support' ? 'active' : '' }}" data-view="support" data-url="/{{ store.typeNum }}/support/">
            <i class="fa fa-question-circle"></i>
            <span>Help Center</span>
        </a>
    </div>

    {# Collapse toggle at bottom #}
    <div class="sidebar-toggle" id="sidebarToggle" title="Toggle sidebar">
        <i class="fa fa-chevron-left"></i>
        <span>Collapse</span>
    </div>
</nav>