{# Replenishment Heatmap Controls Partial #}
{# Toggle between heatmap and table view, date range selection #}

<div class="repl-controls">
    {# View Mode Selector #}
    <div class="repl-mode-selector mb-3">
        <button type="button" class="repl-mode-btn active" data-view="heatmap">
            <i class="fa fa-map me-1"></i>Heatmap
        </button>
        <button type="button" class="repl-mode-btn" data-view="table">
            <i class="fa fa-table me-1"></i>Table
        </button>
    </div>

    {# Date Range #}
    <div class="repl-date-range mb-3">
        <label>Date Range</label>
        <div class="repl-date-inputs">
            <input type="date" id="date-start" class="form-control form-control-sm" title="Start Date">
            <input type="date" id="date-end" class="form-control form-control-sm" title="End Date">
        </div>
        <div class="form-text small mt-1">
            <i class="fa fa-info-circle me-1"></i>
            Categories with replenishment history use their reset date as start.
        </div>
    </div>

    {# Quick Presets #}
    <div class="repl-date-presets mb-3">
        <div class="btn-group btn-group-sm w-100" role="group">
            <button type="button" class="btn btn-outline-secondary" data-preset="7d">7 Days</button>
            <button type="button" class="btn btn-outline-secondary active" data-preset="default">Default</button>
            <button type="button" class="btn btn-outline-secondary" data-preset="14d">14 Days</button>
            <button type="button" class="btn btn-outline-secondary" data-preset="30d">30 Days</button>
        </div>
    </div>

    {# Apply Button #}
    <button type="button" class="btn btn-primary btn-sm w-100" id="btn-apply-filters">
        <i class="fa fa-filter me-1"></i>Apply Filters
    </button>
</div>