<script>
    function load_details(entry_id) {
        $('.cards-list-group-item.active').removeClass('active');
        $('#list_' + entry_id).addClass('active');
        $(document).ready(function () {
            ajax_helpers.post_json({'data': {'button': '{{ details_button_action_name }}', 'entry_id': entry_id}});
        });
    }
</script>
<div class="{{ card_css_class }}" id="{{ card.code }}" data-title="">
    <div class="card-header">
        <div class="d-flex align-items-center">
            <h5 class="mr-auto">{{ card.title }}</h5>
            {{ card.menu.render }}
        </div>
    </div>
    {{ card.tab_menu.render }}

    <div class="{{ card_body_css_class }}" id="{{ card.code }}_body" {% if card_body_css_style %}style="{{ card_body_css_style }}"{% endif %}>
        <div id="{{ card.code }}_tree"></div>
        <script>
            $('#{{ card.code }}_tree').jstree({
                'core': {
                    'data': {{ data|safe }},
                    'themes': {{ tree_themes|safe }}
                }{% if tree_plugins %}, 'plugins':{{ tree_plugins|safe }}{% endif %}
            });
            $('#{{ card.code }}_tree').on("changed.jstree", function (e, data) {
                if (data.selected.length > 0) {
                    if (data.node !== undefined) {
                        {% if show_details_for_parents %}
                            load_details(data.selected[0])
                        {% else %}
                        let has_children = data.node.children.length > 0;
                        if (!has_children) {
                            load_details(data.selected[0])
                        }
                        {% endif %}
                    }
                }
         });
        $('#{{ card.code }}_tree').on("ready.jstree", function (e, data) {
            $('#{{ card.code }}_tree').jstree(true).get_node('{{ selected_id }}', true).children('.jstree-anchor').focus();
        });
        load_details('{{ selected_id }}')
        </script>
    </div>

    {% if card.footer %}
        <div class="card-footer">
            <small style="text-align: left">{{ card.footer|safe }}</small>
        </div>
{% endif %}

</div>