{% macro plot_grid(array_element, subitem, active_subitem, rows, cols, plot_titles, max_plots_row, plot_errors=None,
plot_keys=None) %}

<div id="page-content-wrapper">
    <div class="container-flex px-3 xyz">

        {% for title in plot_titles %}
        {% set idx = loop.index0 %}
        {% set plot_key = plot_keys[idx] %}
        {% if idx % max_plots_row == 0 %}
        <div class="row mb-3">
            {% endif %}

            <div class={% if cols<=2 %}"col-lg-6 col-md-12 mb-3"{% endif %} {% if cols>2 %}"col-xl-4 col-lg-6 col-md-12
                mb-3"{% endif %}>
                <div class="badger" data-badger-left="{{ title }}" data-badger-right="CRITERIA">
                    {% set plot_has_error = plot_errors and plot_errors.get(plot_key) %}
                    {# Mark invalid plots so plot.js can skip overwriting the server error. #}
                    <div {% if plot_has_error %}id="plot-error-{{ plot_key }}" data-plot-error{% else
                        %}id="plot-{{ plot_key }}" data-plot-key="{{ plot_key }}" {% endif %}> {# style="height:
                        300px;"
                        #}
                        {% if plot_has_error %}
                        <div class="plot-error">
                            Plot configuration error: {{ plot_errors.get(plot_key) }}
                        </div>
                        {% else %}
                        <h5 class="card-text placeholder-text">
                            Placeholder for {{ array_element }} {{ subitem }} plot {{ title
                            }}
                        </h5>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% if idx % max_plots_row == max_plots_row - 1 %}
        </div> {% endif %}
        {% endfor %}

    </div>
</div>

{% endmacro %}