{% import "buttons.html" as buttons %}

<article class="wrapper"
         data-show-on="NON_EMPTY_COLUMN_FILTER_SELECTED"
         data-hide-on="EMPTY_COLUMN_FILTER_SELECTED">
    <div class="flex wrapper-vert">
        <div class="box">
        <pre id="selected-columns-display" data-manager="SelectedColumnsDisplay"></pre>
        {{ buttons.copybutton("selected-columns-display") }}
        </div>
    </div>
    <button type="button"
            class="margin-r-s"
            data-test="deselect-all-columns"
            data-manager="DeselectAllColumns">Deselect all</button>
    <button type="button"
            data-test="select-all-columns"
            data-manager="SelectAllVisibleColumns">Select all</button>

    <div class="column-summary-group">
        {% for column in summary.columns %}
        {% set col_id="col_{}".format(loop.index0) %}
        {% include "column-summary.html" %}
        {% endfor %}
    </div>
</article>

{% include "no-filter-matches.html" %}
