{% load datatable_tags %}

    {% if show_pivot_table %}
            <div class="{% if pivot_filter_class %}{{ pivot_filter_class }}{% else %}col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2 float-left{% endif %}">
                <div class="card jms-card">
                    {% filter_control card.extra_card_info.datatable %}
                </div>
            </div>
    {% endif %}
    <div class="{{ card_css_class }}{% if show_pivot_table %} {% if pivot_table_class %}{{ pivot_table_class }}{% else %}col-12 col-sm-6 col-md-7 col-lg-8 col-xl-10 float-left{% endif %}{% endif %}" id="{{ card.code }}_card" {% if card_css_style %}style="{{ card_css_style }}"{% endif %} data-title="">
        <div class="card-header">
            <div class="d-flex align-items-center">
                <h5 class="mr-auto">{{ card.title }}</h5>
                {{ card.menu.render }}
                {% if card.enable_collapse %}
            <div class="section-header-right {% if card.collapsed %} collapsed{% endif %}" data-target="#{{ card.code }}_body" data-toggle="collapse">
                <i class="expandicon"></i>
            </div>
            {% endif %}
            </div>
        </div>
        {{ card.tab_menu.render }}
        <div class="{{ card_body_css_class }}{% if card.enable_collapse %} collapse{% if not card.collapsed %} show{% endif %}{% endif %}" id="{{ card.code }}_body"
             {% if card_body_css_style %}style="{{ card_body_css_style }}"{% endif %}>
                {{ top|safe }}
            {% if show_search_bar and not show_pivot_table %}
                <div class="d-flex">
                    <div class="p-2">{% no_of_results card.extra_card_info.datatable %}</div>
                    <div class="p-2">{% no_of_rows card.extra_card_info.datatable %}</div>
                    <div class="p-2">{% clear_table card.extra_card_info.datatable %}</div>
                    <div class="ml-auto p-2">{% table_search card.extra_card_info.datatable %}</div>
                </div>
            {% endif %}
            {{ card.extra_card_info.datatable.render|safe }}
            {{ bottom|safe }}
        </div>
        {% 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>