{# Replenishment Table View Partial #}
{# PRD F5: Ranked list of categories needing replenishment #}

<div class="repl-table-view">
    <div class="repl-table-header">
        <div class="repl-table-title">
            <h5 class="mb-0">Categories Needing Attention</h5>
        </div>
        <div class="repl-table-actions">
            {# Toggle: Needs Attention vs Show All #}
            <div class="form-check form-switch me-3">
                <input class="form-check-input" type="checkbox" id="toggle-show-all">
                <label class="form-check-label small" for="toggle-show-all">Show All Categories</label>
            </div>

            {# Filter: Onsite Only #}
            <div class="form-check form-switch me-3">
                <input class="form-check-input" type="checkbox" id="toggle-onsite-only">
                <label class="form-check-label small" for="toggle-onsite-only">Onsite Bins Only</label>
            </div>

            {# Minimum Score Filter #}
            <div class="input-group input-group-sm" style="width: 150px;">
                <span class="input-group-text">Min Score</span>
                <input type="number" class="form-control" id="filter-min-score" value="0" min="0" step="1">
            </div>

            {# Batch Create Tasks Button #}
            <button type="button" class="btn btn-primary btn-sm ms-3" id="btn-batch-create-tasks" disabled>
                <i class="fa fa-tasks me-1"></i>Create Tasks (<span id="selected-count">0</span>)
            </button>
        </div>
    </div>

    <div class="repl-table-container">
        <table class="table table-hover table-sm" id="replenishment-table">
            <thead class="table-light">
                <tr>
                    <th style="width: 40px;">
                        <input type="checkbox" class="form-check-input" id="select-all-categories" title="Select All">
                    </th>
                    <th>Category</th>
                    <th class="text-end" style="width: 80px;">Sold</th>
                    <th class="text-end" style="width: 80px;">Bought</th>
                    <th class="text-end" style="width: 90px;">Net Depl.</th>
                    <th class="text-end" style="width: 90px;">Rack Units</th>
                    <th class="text-end" style="width: 80px;">
                        <span class="sortable active" data-sort="score">Score <i class="fa fa-sort-down"></i></span>
                    </th>
                    <th style="width: 150px;">Recommended Bin</th>
                    <th style="width: 100px;">Location</th>
                    <th style="width: 100px;">Actions</th>
                </tr>
            </thead>
            <tbody id="replenishment-table-body">
                {# Rows populated by JavaScript #}
                <tr class="repl-table-loading">
                    <td colspan="10" class="text-center py-4">
                        <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
                        Loading categories...
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    {# Empty State #}
    <div class="repl-table-empty" id="table-empty-state" style="display: none;">
        <div class="text-center py-5">
            <i class="fa fa-check-circle fa-3x text-success mb-3"></i>
            <h5>All Categories Adequately Stocked</h5>
            <p class="text-muted">No categories currently need replenishment attention.</p>
        </div>
    </div>

    {# Table Footer with Pagination #}
    <div class="repl-table-footer">
        <div class="repl-table-info">
            Showing <span id="showing-count">0</span> of <span id="total-count">0</span> categories
        </div>
        <div class="repl-table-pagination">
            <nav aria-label="Table pagination">
                <ul class="pagination pagination-sm mb-0" id="table-pagination">
                    {# Pagination populated by JavaScript #}
                </ul>
            </nav>
        </div>
    </div>
</div>

{# Row Template (used by JavaScript) #}
<template id="category-row-template">
    <tr data-category-code="">
        <td>
            <input type="checkbox" class="form-check-input category-checkbox" data-code="">
        </td>
        <td>
            <div class="category-name fw-medium"></div>
            <small class="text-muted category-code"></small>
        </td>
        <td class="text-end items-sold">--</td>
        <td class="text-end items-bought">--</td>
        <td class="text-end net-depletion">--</td>
        <td class="text-end rack-units">--</td>
        <td class="text-end">
            <span class="badge score-badge">--</span>
        </td>
        <td>
            <span class="recommended-bin">--</span>
        </td>
        <td>
            <span class="bin-location">--</span>
        </td>
        <td>
            <button type="button" class="btn btn-sm btn-outline-primary btn-create-task" title="Create Task">
                <i class="fa fa-plus"></i>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary btn-mark-replenished" title="Mark Replenished">
                <i class="fa fa-check"></i>
            </button>
        </td>
    </tr>
</template>