{% set columns_visibility = h.tables_get_columns_visibility_from_request(table.name) %}

<div class="modal fade columns-modal" id="columns-modal-{{ table.id }}" tabindex="-1" role="dialog"
    aria-labelledby="columns-modal-label-{{ table.id }}" data-bs-backdrop="false">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="columns-modal-label-{{ table.id }}">{{ _("Column visibility") }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="mb-3">
                    <p class="text-muted">{{ _("Select which columns to display in the table") }}</p>
                </div>

                <div class="d-flex gap-2 mt-3 mb-3">
                    <button class="btn btn-default" id="select-all-columns-{{ table.id }}" type="button">
                        <i class="fa fa-eye"></i> {{ _("Show all") }}
                    </button>
                    <button class="btn btn-default" id="deselect-all-columns-{{ table.id }}" type="button">
                        <i class="fa fa-eye-slash"></i> {{ _("Hide all") }}
                    </button>
                </div>

                <div id="columns-container-{{ table.id }}" style="max-height: 300px; overflow: auto" class="list-group list-group-flush overflow-y-auto">
                    {% for column in table.columns %}
                        {% if column.field != h.tables_column_actions_field() %}
                            <label class="list-group-item d-flex align-items-center gap-2">
                                <input
                                    type="checkbox"
                                    class="form-check-input column-toggle"
                                    data-field="{{ column.field }}"
                                    {% if columns_visibility.get(column.field, column.visible) %}checked{% endif %}
                                >
                                <span class="flex-grow-1">{{ column.title or column.field }}</span>
                            </label>
                        {% endif %}
                    {% endfor %}
                </div>

                <div id="column-actions-{{ table.id }}" class="d-flex gap-2 justify-content-end mt-3">
                    <button class="btn btn-default" id="reset-columns-{{ table.id }}" type="button" data-bs-dismiss="modal">
                        {{ _("Reset") }}
                    </button>

                    <button class="btn btn-primary" id="apply-columns-{{ table.id }}" type="button" data-bs-dismiss="modal">
                        {{ _("Apply") }}
                    </button>
                </div>
            </div> <!-- modal-body -->
        </div>
    </div>
</div>