{% macro render_statistical_controls(result_id) %}
<div class="row row-cols-auto mb-3">
    <div class="col">
        <button class="btn btn-outline-info" type="button" data-bs-toggle="collapse" data-bs-target="#legend" aria-expanded="false" aria-controls="legend">
            Legend
        </button>
        <div class="collapse" id="legend">
            <div class="card card-body">
                <p><span class="badge highlight-outlier">Outlier</span> Cells highlighted in red indicate outliers detected by IQR method.</p>
                <p><span class="badge highlight-pareto">Pareto</span> Cells highlighted in green indicate top contributors per Pareto principle.</p>
                <p><span class="badge highlight-excluded">Excluded</span> Cells highlighted in light grey are excluded from statistical analysis (calculated rows or excluded categories).</p>
            </div>
        </div>
    </div>
    <div class="col">
        <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#stats-controls" aria-expanded="false" aria-controls="stats-controls">
            Statistical Analysis Controls
        </button>
        <div class="collapse" id="stats-controls">
            <div class="card card-body">
                <div class="mb-3">
                    <h6>Algorithms</h6>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="iqr" id="algorithm-iqr" checked>
                        <label class="form-check-label" for="algorithm-iqr">
                            IQR Outlier Detection
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="pareto" id="algorithm-pareto" checked>
                        <label class="form-check-label" for="algorithm-pareto">
                            Pareto Analysis
                        </label>
                    </div>
                </div>

                <div class="mb-3">
                    <h6>Analysis Direction</h6>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="direction" id="direction-rows" value="rows">
                        <label class="form-check-label" for="direction-rows">
                            Rows
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="direction" id="direction-columns" value="columns" checked>
                        <label class="form-check-label" for="direction-columns">
                            Columns
                        </label>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button id="recalculate-btn" class="btn btn-primary btn-sm">
                        <output class="spinner-border spinner-border-sm d-none" aria-hidden="true"></output>
                        <span>Recalculate</span>
                    </button>
                    <button id="reset-btn" class="btn btn-secondary btn-sm">Reset to Defaults</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endmacro %}