<script>

    var last_loaded_entry_id = null;

    function load_details(entry_id) {
        last_loaded_entry_id = entry_id;
        $('.cards-list-group-item.active').removeClass('active');
        $('#list_' + entry_id).addClass('active');
        $(document).ready(function () {
            {% if modal %}
                django_modal.send_inputs({'button': '{{ details_button_action_name }}', 'entry_id': entry_id})
            {% else %}
                ajax_helpers.post_json({'data': {'button': '{{ details_button_action_name }}', 'entry_id': entry_id}});
            {% endif %}
        });
    }

    function load_empty_details() {
        last_loaded_entry_id = null;
        $('.cards-list-group-item.active').removeClass('active');
        $(document).ready(function () {
            {% if modal %}
                django_modal.send_inputs({'button': '{{ details_empty_button_action_name }}'})
            {% else %}
                ajax_helpers.post_json({'data': {'button': '{{ details_empty_button_action_name }}'}});
            {% endif %}
        });
    }

    $(document).ready(function () {
         $( "#list_{{ selected_id }}" ).focus();
    });

    ajax_helpers.command_functions.load_details = function (command) {
        var entry_id = last_loaded_entry_id;
        if (typeof command.entry_id !== "undefined") {
            entry_id = command.entry_id;
        }
        if(entry_id == null) {
            load_empty_details(entry_id);
        } else {
            load_details(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>
    <div class="{{ card_body_css_class }}" id="{{ card.code }}_body" {% if card_body_css_style %}style="{{ card_body_css_style }}"{% endif %}>
    {% for entry in entries %}
        <a class="{{ card_link_css_class }}" id="list_{{ entry.pk }}"
           href="javascript:load_details({{ entry.pk }})">
            <div class="row">
                <div class="col-sm-12">
                    <h4 class="list-group-item-heading {{ entry.class }}">
                        {% if entry.colour %}<i class="fa fa-square"
                                                style="color: #{{ entry.colour }};opacity: 1;"></i>{% endif %}{{ entry.name }}
                    </h4>
                </div>
            </div>
        </a>
        {% if selected_id == entry.pk %}
            <script>load_details({{ entry.pk }})</script>
        {% endif %}
        {% empty %}
        <div class="list-group-item">
            <div class="alert alert-warning">{{ empty_list_message }}</div>
        </div>

        <script>
            $(document).ready(function () {load_empty_details();});
        </script>

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

</div>