{# Backstock Summary Panel - Today's backstock activity #}
<div class="workbook-backstock-panel content-card">
    <div class="card-header" data-bs-toggle="collapse" data-bs-target="#backstockContent">
        <h3><i class="fa fa-archive"></i> Backstock Activity</h3>
        <div class="card-header-actions">
            <a href="/{{ store.typeNum }}/backstock/" class="btn btn-link btn-sm" title="View backstock">
                <i class="fa fa-external-link"></i>
            </a>
            <i class="fa fa-chevron-down toggle-icon"></i>
        </div>
    </div>

    <div class="card-body collapse show" id="backstockContent">
        {# Loading state #}
        <div class="loading-state" id="backstockLoadingState">
            <i class="fa fa-spinner fa-spin"></i> Loading...
        </div>

        {# Stats summary #}
        <div class="backstock-stats" id="backstockStats" style="display: none;">
            <div class="stat-item added">
                <i class="fa fa-plus-circle"></i>
                <span class="stat-label">Added</span>
                <span class="stat-value" id="backstockAddedCount">0</span>
            </div>
            <div class="stat-item pulled">
                <i class="fa fa-arrow-circle-up"></i>
                <span class="stat-label">Pulled</span>
                <span class="stat-value" id="backstockPulledCount">0</span>
            </div>
            <div class="stat-item emptied">
                <i class="fa fa-trash"></i>
                <span class="stat-label">Emptied</span>
                <span class="stat-value" id="backstockEmptiedCount">0</span>
            </div>
        </div>

        {# Empty state #}
        <div class="empty-state" id="backstockEmptyState" style="display: none;">
            <i class="fa fa-archive"></i>
            <p>No backstock activity today</p>
        </div>
    </div>
</div>

<style>
.backstock-stats {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
}
.stat-item {
    text-align: center;
    padding: 10px 15px;
}
.stat-item i { font-size: 20px; display: block; margin-bottom: 5px; }
.stat-item.added i { color: #27ae60; }
.stat-item.pulled i { color: #3498db; }
.stat-item.emptied i { color: #e74c3c; }
.stat-label { font-size: 11px; text-transform: uppercase; color: #666; display: block; }
.stat-value { font-size: 24px; font-weight: bold; }
</style>