{% load django_cards_tags %}
<div class="{{ card_css_class }}" id="{{ card.code }}" data-title="">

    {% if card.title or card.menu %}
    <div class="card-header">
        <div class="d-flex align-items-center">
            <h5 class="mr-auto">{{ card.title }}</h5>
            {{ card.menu.render }}
        </div>
    </div>
    {% endif %}
    {{ card.tab_menu.render }}

    {% if card_body_css_outer_class %}<div class="{{ card_body_css_outer_class }}">{% endif %}
        <div class="{{ card_body_css_inner_class }}">
            {% for group in card.child_card_groups %}
                <div class="{{ group.div_css_class }}">
                    {% for card in group.cards %}
                        <div style="{{ group.div_inner_css }}" class="{{ group.div_inner_css_class }}">
                            {% if group.override_card_context %}
                                {% show_card card override_card_context=group.override_card_context %}
                            {% else %}
                                {{ card.render }}
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    {% if card_body_css_outer_class %}</div>{% endif %}
    {% if card.footer %}
        <div class="card-footer">
            <small style="text-align: left">{{ card.footer|safe }}</small>
        </div>
    {% endif %}
    {% if card.created_modified_dates %}
        <div class="card-footer">
            <small style="text-align: left">Date created: {{ card.created_modified_dates.0 }}<br>Date
                modified: {{ card.created_modified_dates.1 }}
            </small>
        </div>
    {% endif %}
</div>