bootstrap_5.html.twig

{% extends '@KreyuDataTable/themes/base.html.twig' %}

{# Bootstrap 5 Theme #}
{# @see https://getbootstrap.com/docs/5.0/ #}

{% block table %}
    <div class="table-responsive">
        {% with { table_attr: { class: 'table table-hover align-middle mb-0' }|merge(table_attr|default({})) } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block column_header %}
    {% with {
        active_attr: { class: 'border-bottom border-primary text-primary' },
        label_attr: { class: 'text-decoration-none text-reset d-block w-100 h-100 py-1' },
    } %}
        {{ parent() }}
    {% endwith %}
{% endblock %}

{% block action_bar %}
    {% set display_filter_action = filtration_enabled and filters|length > 0 and filtration_form.children|length > 0 %}
    {% set display_export_action = exporting_enabled and exporters|length > 0 %}

    {% if title or has_active_filters or display_filter_action or display_export_action or personalization_enabled %}
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="card-title mb-0">
                {% if translation_domain is not same as false %}
                    {{ title|trans(title_translation_parameters, translation_domain) }}
                {% else %}
                    {{ title }}
                {% endif %}
            </h6>

            <div class="card-actions">
                <div class="d-flex flex-row gap-1">
                    {% if filtration_enabled and filtration_form and filtration_form.vars.search_fields|length > 0 %}
                        <div>
                            {{ block('action_search') }}
                        </div>
                    {% endif %}

                    {% for action in actions %}
                        <div>
                            {{ data_table_action(action) }}
                        </div>
                    {% endfor %}

                    {% if display_filter_action %}
                        <div>
                            {{ block('action_filter') }}
                        </div>
                    {% endif %}

                    {% if display_export_action %}
                        <div>
                            {{ block('action_export') }}
                            {{ block('export_modal') }}
                        </div>
                    {% endif %}

                    {% if personalization_enabled %}
                        <div>
                            {{ block('action_personalize') }}
                            {{ block('personalization_modal') }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {% if filtration_enabled and filtration_form and filters|length > 0 %}
            <div class="border-bottom collapse" id="{{ filtration_form.vars.id }}__collapse">
                <div class="card-body">
                    {{ data_table_filters_form(filtration_form) }}
                </div>
            </div>
        {% endif %}

        {% if has_active_filters %}
            <div class="card-body border-bottom">
                {{ block('active_filters') }}
            </div>
        {% endif %}
    {% endif %}

    {% if has_batch_actions %}
        {{ block('batch_action_bar', theme) }}
    {% endif %}
{% endblock %}

{% block batch_action_bar %}
    <div class="card-header" hidden data-kreyu--data-table-bundle--batch-target="batchActionBar">
        <div class="d-flex justify-content-between align-items-center">
            {{ block('batch_action_bar_title', theme) }}
            {{ block('batch_action_bar_actions', theme) }}
        </div>
    </div>
{% endblock %}

{% block batch_action_bar_title %}
    {% set wrapper_attr = { class: 'card-title fs-6 fw-normal text-muted mb-0' }|merge(wrapper_attr|default({})) %}

    <div {% with { attr: wrapper_attr } %}{{ block('attributes') }}{% endwith %}>
        {{ 'Selected'|trans({}, 'KreyuDataTable') }}: <span data-kreyu--data-table-bundle--batch-target="selectedCounter">0</span>
    </div>
{% endblock %}

{% block batch_action_bar_actions %}
    <div class="card-actions">
        <div class="d-flex flex-row gap-1">
            {% for action in batch_actions %}
                <div>
                    {{ data_table_action(action) }}
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block action_search %}
    {% form_theme filtration_form with [_self, 'bootstrap_5_layout.html.twig'] %}

    <div class="d-inline-block w-auto">
        {% for child in filtration_form.vars.search_fields %}
            {{ form_widget(child.value, { attr: { form: filtration_form.vars.id } }) }}
        {% endfor %}
    </div>
{% endblock %}

{% block action_filter %}
    {% set attr = {
        'class': 'btn btn-primary',
        'type': 'button',
        'data-bs-toggle': 'collapse',
        'data-bs-target': '#' ~ filtration_form.vars.id ~ '__collapse',
        'aria-expanded': 'false',
        'aria-controls': filtration_form.vars.id ~ '__collapse',
        'title': 'Filter'|trans({}, 'KreyuDataTable'),
    }|merge(attr|default({})) %}

    <button {{ block('attributes') }}>{{ block('action_filter_icon') }}</button>
{% endblock %}

{% block action_filter_icon %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
        <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
    </svg>
{% endblock %}

{% block action_export %}
    {% set attr = {
        'class': 'btn btn-primary',
        'type': 'button',
        'data-bs-toggle': 'modal',
        'data-bs-target': '#' ~ export_form.vars.id ~ '__modal',
        'title': 'Export'|trans({}, 'KreyuDataTable'),
    }|merge(attr|default({})) %}

    <button {{ block('attributes') }}>{{ block('action_export_icon') }}</button>
{% endblock %}

{% block action_export_icon %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-spreadsheet" viewBox="0 0 16 16">
        <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V9H3V2a1 1 0 0 1 1-1h5.5v2zM3 12v-2h2v2H3zm0 1h2v2H4a1 1 0 0 1-1-1v-1zm3 2v-2h3v2H6zm4 0v-2h3v1a1 1 0 0 1-1 1h-2zm3-3h-3v-2h3v2zm-7 0v-2h3v2H6z"/>
    </svg>
{% endblock %}

{% block action_personalize %}
    {% set attr = {
        'class': 'btn btn-primary',
        'type': 'button',
        'data-bs-toggle': 'modal',
        'data-bs-target': '#' ~ personalization_form.vars.id ~ '__modal',
        'title': 'Personalize'|trans({}, 'KreyuDataTable'),
    }|merge(attr|default({})) %}

    <button {{ block('attributes') }}>{{ block('action_personalize_icon') }}</button>
{% endblock %}

{% block action_personalize_icon %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
        <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
        <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
    </svg>
{% endblock %}

{% block filter_clear_button_icon '&times;' %}

{% block filter_clear_all_button_icon %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
    </svg>
{% endblock %}

{% block filter_clear_all_button %}
    {% set attr = {
        'class': 'btn btn-icon btn-outline-danger',
        'href': data_table_filter_clear_url(filters),
        'data-toggle': 'tooltip',
        'data-placement': 'bottom',
        'title': 'Clear all filters'|trans({}, 'KreyuDataTable'),
        'data-turbo-action': 'advance',
    }|merge(attr|default({})) %}

    <a {{ block('attributes') }}>{{ block('filter_clear_all_button_icon') }}</a>
{% endblock %}

{% block filter_clear_button %}
    <a class="btn px-2"
       href="{{ data_table_filter_clear_url(filter) }}"
       data-turbo-action="advance"
       data-toggle="tooltip"
       data-placement="bottom"
       title="{{ 'Clear filter'|trans({}, 'KreyuDataTable') }}"
    >
        <span class="mx-1">
            <strong>{{ filter.vars.label|trans({}, filter.vars.translation_domain) }}</strong>

            {% if filter.vars.operator_selectable %}
                <span class="text-muted">{{ filter.vars.data.operator.label|trans({}, 'KreyuDataTable') }}</span>
            {% endif %}
        </span>

        <span class="">{{ filter.vars.value|trans({}, filter.vars.translation_domain) }}</span>
        <span class="mx-2" aria-hidden="true">{{ block('filter_clear_button_icon') }}</span>
    </a>
{% endblock %}

{% block active_filters %}
    <div class="d-flex flex-wrap gap-1">
        {% if has_active_filters %}
            {{ block('filter_clear_all_button') }}
        {% endif %}

        {% for filter_name, filter_data in filtration_data.filters|default([])|filter(filter => filter.hasValue()) %}
            {% with { filter: filters[filter_name] } %}
                {{ block('filter_clear_button') }}
            {% endwith %}
        {% endfor %}
    </div>
{% endblock %}

{# Filtration #}

{% block kreyu_data_table_filters_form %}
    {% with { form_themes: [_self, 'bootstrap_5_layout.html.twig'] } %}
        {{ parent() }}
    {% endwith %}
{% endblock %}

{% block filtration_form_content %}
    {% with { attr: { class: 'row' } } %}
        {{ parent() }}
    {% endwith %}
{% endblock %}

{% block filtration_form_row %}
    {% with { attr: { class: 'col-12 col-md-6 col-lg-3' }, form_themes: [_self, 'bootstrap_5_layout.html.twig'] } %}
        {{ parent() }}
    {% endwith %}
{% endblock %}

{% block filtration_form_submit %}
    <div class="col-12 col-md-6 col-lg-3">
        <div class="col-form-label">&nbsp;</div>
        {% with { attr: { class: 'btn btn-primary' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{# Personalization #}

{% block kreyu_data_table_personalization_form %}
    {% form_theme form with [_self, 'bootstrap_5_layout.html.twig'] %}

    <div data-controller="kreyu--data-table-bundle--personalization">
        {{ form_start(form) }}
        {% if form._token is defined %}
            {{ form_row(form._token) }}
        {% endif %}

        {{ block('personalization_form_help') }}

        <div class="row my-3">
            {{ block('personalization_form_columns') }}
        </div>

        {{ block('personalization_form_submit') }}
        {{ form_end(form) }}
    </div>
{% endblock %}

{% block personalization_form_help %}
    <div class="alert d-flex align-items-center">
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 8l.01 0" /><path d="M11 12l1 0l0 4l1 0" /></svg>
        </div>
        <span>{{ 'Drag items between columns to show/hide relevant data in the list or change their order'|trans({}, 'KreyuDataTable') }}</span>
    </div>
{% endblock %}

{% block personalization_form_columns %}
    {{ block('personalization_form_visible_columns') }}
    {{ block('personalization_form_hidden_columns') }}
{% endblock %}

{% block personalization_form_visible_columns %}
    <div class="col-6">
        <div class="list-group list-group-flush card">
            <div class="card-header">
                {{ 'Visible columns'|trans({}, 'KreyuDataTable') }}
            </div>

            <ul class="p-2 mb-0"
                data-visible="1"
                data-kreyu--data-table-bundle--personalization-target="visibleColumns"
            >
                {% for child in form.children.columns|filter(child => child.vars.value.visible) %}
                    {{ form_row(child) }}
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}

{% block personalization_form_hidden_columns %}
    <div class="col-6">
        <div class="list-group list-group-flush card">
            <div class="card-header">
                {{ 'Hidden columns'|trans({}, 'KreyuDataTable') }}
            </div>

            <ul class="p-2 mb-0"
                data-visible="0"
                data-kreyu--data-table-bundle--personalization-target="hiddenColumns"
            >
                {% for child in form.children.columns|filter(child => not child.vars.value.visible) %}
                    {{ form_row(child) }}
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}

{% block personalization_form_submit %}
    <div class="text-end">
        <button class="btn btn-primary">{{ 'Apply'|trans({}, 'KreyuDataTable') }}</button>
    </div>
{% endblock %}

{% block personalization_modal %}
    <div class="modal modal-blur fade" id="{{ personalization_form.vars.id ~ '__modal' }}" tabindex="-1" style="display: none;" aria-hidden="true">
        {% block personalization_modal_dialog %}
            <div class="modal-dialog modal-dialog-centered" role="document">
                {% block personalization_modal_content %}
                    <div class="modal-content">
                        {% block personalization_modal_header %}
                            <div class="modal-header">
                                <h5 class="modal-title">
                                    {% block personalization_modal_title %}
                                        {{ 'Personalization'|trans({}, 'KreyuDataTable') }}
                                    {% endblock %}
                                </h5>
                                {% block personalization_modal_header_close_button %}
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                {% endblock %}
                            </div>
                        {% endblock %}
                        {% block personalization_modal_body %}
                            <div class="modal-body">
                                {{ data_table_personalization_form(personalization_form) }}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}

{% block kreyu_data_table_export_form %}
    {% form_theme form with [_self, 'bootstrap_5_layout.html.twig'] %}

    <div>
        {{ form_start(form) }}
        <div class="mb-3">
            {{ form_row(form.filename) }}
        </div>
        <div class="mb-3">
            {{ form_row(form.exporter) }}
        </div>
        <div class="mb-3">
            {{ form_row(form.strategy) }}
        </div>
        <div class="mb-3">
            {{ form_row(form.includePersonalization) }}
        </div>
        <div class="text-end">
            <button class="btn btn-primary">{{ 'Apply'|trans({}, 'KreyuDataTable') }}</button>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}

{% block export_modal %}
    <div class="modal modal-blur fade" id="{{ export_form.vars.name ~ '__modal' }}" tabindex="-1" style="display: none;" aria-hidden="true" data-turbo="false">
        {% block export_modal_dialog %}
            <div class="modal-dialog modal-dialog-centered" role="document">
                {% block export_modal_content %}
                    <div class="modal-content">
                        {% block export_modal_header %}
                            <div class="modal-header">
                                <h5 class="modal-title">
                                    {% block export_modal_title %}
                                        {{ 'Export'|trans({}, 'KreyuDataTable') }}
                                    {% endblock %}
                                </h5>
                                {% block export_modal_header_close_button %}
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                {% endblock %}
                            </div>
                        {% endblock %}
                        {% block export_modal_body %}
                            <div class="modal-body">
                                {{ data_table_export_form(export_form) }}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}

{% block pagination_widget %}
    <div class="card-footer">
        <div class="pagination d-flex gap-3 flex-wrap justify-content-center align-items-center">
            {{ parent() }}
            <div class="d-flex col"></div>
        </div>
    </div>
{% endblock %}

{% block pagination_counters %}
    <div class="d-flex col">{{ parent() }}</div>
{% endblock %}

{% block pagination_controls %}
    <div class="d-flex">{{ parent() }}</div>
{% endblock %}

{% block pagination_page %}
    <div class="page-item">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_page_active %}
    <div class="page-item active">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_first %}
    <div class="page-item">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_first_disabled %}
    <div class="page-item disabled">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_previous %}
    <div class="page-item">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_previous_disabled %}
    <div class="page-item disabled">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_last %}
    <div class="page-item">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_last_disabled %}
    <div class="page-item disabled">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_next %}
    <div class="page-item">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block pagination_next_disabled %}
    <div class="page-item disabled">
        {% with { attr: { class: 'page-link' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}

{% block kreyu_data_table_filter_data_row %}
    <div class="row">
        {{ form_label(form) }}

        <div class="col-12">
            <div class="{{ row_class|default(row_attr.class|default('mb-3')|trim) }} input-group">
                {% if form.operator is defined %}
                    {{ form_widget(form.operator) }}
                {% endif %}
                {{ form_widget(form.value) }}
            </div>
        </div>
    </div>
{% endblock %}

{% block kreyu_data_table_personalization_column_data_label %}
    <label>{{ label|trans(translation_parameters, translation_domain) }}</label>
{% endblock %}

{% block kreyu_data_table_personalization_column_data_row %}
    <li class="list-group-item">
        {{ form_label(form) }}
        {{ form_widget(form.name) }}
        {{ form_widget(form.priority) }}
        {{ form_widget(form.visible) }}
    </li>
{% endblock %}

{% block action_value_icon %}
    <i {% with { attr: icon_attr } %}{{ block('attributes') }}{% endwith %}></i>
{% endblock %}

{% block action_confirmation_modal %}
    {% set modal_status_color_class = {
        'info': 'primary',
        'warning': 'warning',
        'danger': 'danger',
    }[confirmation.type] %}

<div class="modal modal-blur fade" id="{{ confirmation.identifier }}" tabindex="-1" style="display: none;" aria-hidden="true">
    {% block action_confirmation_modal_dialog %}
        <div class="modal-dialog modal-dialog-centered" role="document">
        {% block action_confirmation_modal_content %}
            <div class="modal-content">
            {% block action_confirmation_modal_status %}
                <div class="modal-status bg-{{ modal_status_color_class }}"></div>
            {% endblock %}
            {% block action_confirmation_modal_header %}
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ confirmation.label_title|trans({}, confirmation.translation_domain) }}
                    </h5>
                </div>
            {% endblock %}
            {% block action_confirmation_modal_body %}
                <div class="modal-body py-4">
                    {{ confirmation.label_description|trans({}, confirmation.translation_domain) }}
                </div>
            {% endblock %}
            {% block action_confirmation_modal_footer %}
                <div class="modal-footer">
                    <div class="w-100">
                        <div class="row">
                            <div class="col">
                                {% block action_confirmation_modal_cancel_button %}
                                    <a href="#" class="btn w-100" data-bs-dismiss="modal">
                                        {{ confirmation.label_cancel|trans({}, confirmation.translation_domain) }}
                                    </a>
                                {% endblock %}
                            </div>
                            <div class="col">
                                {% block action_confirmation_modal_confirm_button %}
                                    {% set confirm_button_tag = confirm_button_tag|default('a') %}
                                    {% set confirm_button_attr = {
                                        class: 'w-100 btn btn-' ~ modal_status_color_class
                                    }|merge(confirm_button_attr|default({})) %}

                                    <{{ confirm_button_tag }} {% with { attr: confirm_button_attr } %}{{ block('attributes') }}{% endwith %}>
                                        {{ confirmation.label_confirm|trans({}, confirmation.translation_domain) }}
                                    </{{ confirm_button_tag }}>
                            {% endblock %}
                        </div>
                    </div>
                </div>
                </div>
            {% endblock %}
            </div>
        {% endblock %}
        </div>
    {% endblock %}
    </div>
{% endblock %}

{% block action_value %}
    <div class="d-inline-block" {{ block('attributes') }}>
        {{ parent() }}
    </div>
{% endblock %}

{% block action_link_value %}
    {% set attr = { class: 'text-decoration-none' ~ (label ? ' me-2' : '') }|merge(attr) %}

    {% if confirmation %}
        {% set attr = {
            'data-bs-toggle': 'modal',
            'data-bs-target': '#' ~ confirmation.identifier,
        }|merge(attr) %}

        {% set confirm_button_attr = { href }|merge(confirm_button_attr|default({})) %}

        {% if batch %}
            {% set confirm_button_attr = {
                'data-kreyu--data-table-bundle--batch-target': 'identifierHolder',
            }|merge(confirm_button_attr) %}
        {% endif %}

        {% with { attr, confirm_button_attr } %}{{ block('action_confirmation_modal') }}{% endwith %}
    {% endif %}

    {{ parent() }}
{% endblock %}

{% block action_button_value %}
    {% set attr = {
        class: 'btn btn-primary' ~ (icon_attr and label is same as false ? ' btn-icon' : ''),
    }|merge(attr) %}

    {% if confirmation %}
        {% set attr = {
            'data-bs-toggle': 'modal',
            'data-bs-target': '#' ~ confirmation.identifier,
        }|merge(attr) %}

        {% set confirm_button_attr = { href }|merge(confirm_button_attr|default({})) %}

        {% if batch %}
            {% set confirm_button_attr = {
                'data-kreyu--data-table-bundle--batch-target': 'identifierHolder',
            }|merge(confirm_button_attr) %}
        {% endif %}

        {% with { attr, confirm_button_attr } %}{{ block('action_confirmation_modal') }}{% endwith %}
    {% endif %}

    {{ parent() }}
{% endblock %}

{% block action_form_value %}
    {% set attr = { class: 'd-inline-block' }|merge(attr) %}

    {% set button_attr = {
        class: 'btn btn-primary' ~ (icon_attr and label is same as false ? ' btn-icon' : '')
    }|merge(button_attr) %}

    {% if confirmation %}
        {% with {
            button_tag: 'a',
            button_attr: {
                'type': 'button',
                'data-bs-toggle': 'modal',
                'data-bs-target': '#' ~ confirmation.identifier,
            }|merge(button_attr)
        } %}
            {{ parent() }}
        {% endwith %}

        {% with { confirm_button_tag: 'button', confirm_button_attr: { type: 'submit', form: form_id } } %}
            {{ block('action_confirmation_modal') }}
        {% endwith %}
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{% block sort_arrow_none %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
    </svg>
{% endblock %}

{% block sort_arrow_asc %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
    </svg>
{% endblock %}

{% block sort_arrow_desc %}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
    </svg>
{% endblock %}

{% block kreyu_data_table_date_range_widget %}
    <div class="input-group">
        {{ form_widget(form.from) }}
        <span class="input-group-text">-</span>
        {{ form_widget(form.to) }}
    </div>
{% endblock %}

{% block column_number_value %}
    <div class="text-end">{{ parent() }}</div>
{% endblock %}

{% block column_money_value %}
    <div class="text-end">{{ parent() }}</div>
{% endblock %}

{% block column_checkbox_header %}
    {% set attr = { class: 'text-center' }|merge(attr) %}

    {% with { attr, input_attr: { class: 'form-check-input mt-0' } } %}
        {{ parent() }}
    {% endwith %}
{% endblock %}

{% block column_checkbox_value %}
    {% set wrapper_attr = { class: 'w-100 h-100 text-center' }|merge(wrapper_attr|default({})) %}

    <div {% with { attr: wrapper_attr } %}{{ block('attributes') }}{% endwith %}>
        {% with { input_attr: { class: 'form-check-input' } } %}
            {{ parent() }}
        {% endwith %}
    </div>
{% endblock %}