{% macro ko_grid_body(call_ids={}, template_ids={}, has_full_body=False) -%}

{%- set include_ids = {} -%}

{%- set builtin_ids = [
    'ko_range_filter',
    'ko_grid_row_click_menu',
    'ko_action_form',
    'ko_grid_filter_choices',
    'ko_grid_filter_popup',
    'ko_grid_search',
    'ko_grid_nav',
    'ko_grid_no_results',
    'ko_grid_table',
    'ko_grid_body',
    'ko_grid_pagination'
] -%}

{% for builtin_id in builtin_ids -%}
    {% if builtin_id not in template_ids -%}
        {# Set built-in builtin_id name when there is no custom template in template_ids. -#}
        {% do template_ids.update({builtin_id: builtin_id}) -%}
    {% endif -%}
    {% set include_builtin = builtin_id not in call_ids or template_ids[builtin_id] != builtin_id -%}
    {# Include the source of template, when there is no another template in call_ids. -#}
    {% do include_ids.update({builtin_id: include_builtin}) -%}
    {% if builtin_id not in call_ids -%}
        {# Standard template should be called. -#}
        {% do call_ids.update({builtin_id: builtin_id}) -%}
        {% if has_full_body and template_ids[builtin_id] == builtin_id -%}
            {# Do not include standard template when has_full_body is True -#}
            {% do include_ids.update({builtin_id: False}) -%}
        {% endif -%}
    {% endif -%}
{% endfor -%}

{% if include_ids['ko_range_filter'] -%}
<script type="text/template" id="{{ template_ids['ko_range_filter'] }}">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row form-group">
                <label data-bind="text: meta.from" class="control-label col-md-4" for="id_range_from"></label>
                <div class="field col-md-6">
                    <input data-bind="textInput: from, attr: fieldAttrs" id="id_range_from" name="range_from">
                </div>
                <label data-bind="text: meta.to" class="control-label col-md-4" for="id_range_to"></label>
                <div class="field col-md-6">
                    <input data-bind="textInput: to, attr: fieldAttrs" id="id_range_to" name="range_to">
                </div>
            </div>
        </div>
    </div>
</script>
{% endif -%}

{% if include_ids['ko_grid_row_click_menu'] -%}
<script type="text/template" id="{{ template_ids['ko_grid_row_click_menu'] }}">
    <div data-bind="foreach: getEnabledActions(lastClickedKoRow, 'click')">
        <button class="btn btn-block" data-bind="css: actionCss(), click: function() { doLastClickedRowAction(); }, text: $data.localName">
        </button>
    </div>
</script>
{% endif -%}

{% if include_ids['ko_action_form'] -%}
<!-- 'ko_action_form' template is not actual template but a sceleton of action template for App.ActionTemplateDialog class. -->
<script type="text/template" id="{{ template_ids['ko_action_form'] }}">
    <div class="panel panel-default">
        <div class="panel-body">
            <form class="ajax-form" enctype="multipart/form-data" method="post" role="form" data-bind="attr: {'data-url': gridActions.getLastActionUrl()}">
                <input type="hidden" name="csrfmiddlewaretoken" data-bind="value: getCsrfToken()">
                <input type="hidden" name="pk_val" data-bind="value: getLastPkVal()">
                <div class="jumbotron">
                    <div class="default-padding">
                        This is the sample template. Copy this template with another id then add your MVVM fields here.
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>
{% endif -%}

{% if include_ids['ko_grid_filter_choices'] -%}
<script type="text/template" id="{{ template_ids['ko_grid_filter_choices'] }}">
{% if template_ids['ko_grid_filter_choices'] == 'ko_grid_breadcrumb_filter_choices' -%}
    <li data-bind="grid_filter">
        <ol class="breadcrumb grid-breadcrumb">
            <li class="bold" data-bind="text: name"></li>
            <!-- ko foreach: choices -->
            <li data-bind="css: {active: is_active()}">
                <a data-bind="css: {bold: is_active()}, text: name, grid_filter_choice, click: onLoadFilter.bind($data)" name="#"></a>
            </li>
            <!-- /ko -->
        </ol>
    </li>
{% else -%}
    <li data-bind="grid_filter, css: {'bg-info': hasActiveChoices()}" class="dropdown">
        <a data-bind="click: onDropdownClick.bind($data)" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span data-bind="text: name"></span> <b class="caret"></b>
            <div data-bind="visible: current_name() != '', text: current_name()"></div>
        </a>
        <ul data-bind="foreach: choices" class="dropdown-menu">
            <li data-bind="css: {active: is_active()}">
                <a data-bind="text: name, grid_filter_choice, click: onLoadFilter.bind($data)" name="#"></a>
            </li>
        </ul>
    </li>
{% endif -%}
</script>
{% endif -%}

{% if include_ids['ko_grid_filter_popup'] -%}
<script type="text/template" id="{{ template_ids['ko_grid_filter_popup'] }}">
{% if template_ids['ko_grid_filter_popup'] == 'ko_grid_breadcrumb_filter_popup' -%}
    <li data-bind="grid_filter">
        <ol class="breadcrumb grid-breadcrumb">
            <li>
                <a data-bind="click: onDropdownClick.bind($data), css: {'bold': hasActiveChoices()}" href="#">
                    <span data-bind="text: name"></span> <b class="caret"></b>
                    <div data-bind="visible: current_name() != '', text: current_name()"></div>
                </a>
            </li>
        </ol>
    </li>
{% else -%}
    <li data-bind="grid_filter, css: {'bg-info': hasActiveChoices()}" class="dropdown">
        <a data-bind="click: onDropdownClick.bind($data)" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span data-bind="text: name"></span> <b class="caret"></b>
            <div data-bind="visible: current_name() != '', text: current_name()"></div>
        </a>
    </li>
{% endif -%}
</script>
{% endif -%}

{% if include_ids['ko_grid_search'] -%}
<script type="text/template" id="{{ template_ids['ko_grid_search'] }}">
    <form data-bind="visible: meta.hasSearch() || actionTypes['button']().length > 0" class="navbar-form navbar-left">
        <div data-bind="if: meta.hasSearch()" class="form-group">
            <input data-bind="textInput: gridSearchDisplayStr, attr: {placeholder: meta.searchPlaceholder}" class="form-control" type="search">
            <button data-bind="click: onSearchReset" class="btn btn-default">{{ _('Clear') }}</button>
        </div>
        <!-- ko foreach: actionTypes['button'] -->
            <button class="btn" data-bind="css: actionCss('button'), click: function() { doAction({}); }">
                <span class="glyphicon" data-bind="css: actionCss('glyphicon')"></span>
                <span data-bind="text: $data.localName"></span>
            </button>
        <!-- /ko -->
    </form>
</script>
{% endif -%}

{% if include_ids['ko_grid_nav'] -%}
<script type="text/template" id="{{ template_ids['ko_grid_nav'] }}">
    <nav class="nav navbar navbar-default">
        <div class="container-fluid grid-controls">
            <ul data-bind="foreach: gridFilters" class="nav navbar-nav">
                <!-- ko if: choices === undefined -->
                <div data-template-id="{{ call_ids['ko_grid_filter_popup'] }}"></div>
                <!-- /ko -->
                <!-- ko if: choices !== undefined -->
                <div data-template-id="{{ call_ids['ko_grid_filter_choices'] }}"></div>
                <!-- /ko -->
            </ul>
            <div data-template-id="{{ call_ids['ko_grid_search'] }}"></div>
        </div>
    </nav>
</script>
{% endif -%}

{% if include_ids['ko_grid_no_results'] -%}
<script language="text/template" id="{{ template_ids['ko_grid_no_results'] }}">
    <div class="panel panel-default">
        <div class="panel-heading">
            {{ _(
                'No %(verbose_name)s found matching the query',
                verbose_name=mark_safe('<span data-bind="text: meta.verboseName"></span>'
            )) }}.
        </div>
    </div>
</script>
{% endif -%}

{% if include_ids['ko_grid_table'] -%}
<script type="text/template" id="{{ template_ids['ko_grid_table'] }}">
    <div data-top="true">
        <div class="table-responsive" <% if (self.get(self, 'vscroll')) { %> style="overflow-y: scroll;" <% } %> >
            <table class="table table-bordered table-hover table-collapse" <% if (self.get(self, 'vscroll')) { %> style="margin-bottom: 0;" <% } %>>
                <thead>
                    <tr>
                        <!-- ko if: options.showSelection -->
                        <th data-bind="if: options.selectMultipleRows" class="grid-glyph-cell">
                            <span data-bind="css: selectAllRowsCss, click: onSelectAllRows" class="halflings glyphicon glyphicon-unchecked"></span>
                        </th>
                        <!-- /ko -->
                        <!-- ko foreach: actionTypes['glyphicon'] -->
                        <th class="grid-glyph-cell"></th>
                        <!-- /ko -->
                        <!-- ko foreach: gridColumns -->
                        <th>
                            <!-- ko if: isSortedColumn() -->
                            <a data-bind="
                                text: name,
                                grid_order_by,
                                click: onSwitchOrder,
                                css: orderCss
                            " class="halflings-before" name="#"></a>
                            <!-- /ko -->
                            <!-- ko if: !isSortedColumn() -->
                            <span data-bind="text: name"></span>
                            <!-- /ko -->
                        </th>
                        <!-- /ko -->
                    </tr>
                </thead>
                <% if (self.get(self, 'vscroll')) { %>
            </table>
        </div>
        <div class="table-responsive vscroll" style="overflow-y: scroll;">
            <table class="table table-bordered table-hover table-collapse">
                <% } %>
                <tbody data-bind="foreach: {data: gridRows, afterRender: afterRowRender.bind($data) }">
                    <tr data-bind="grid_row, css: rowCss">
                        <!-- ko if: $parent.options.showSelection -->
                        <td data-bind="click: onSelect" class="grid-glyph-cell">
                            <span data-bind="css: selectionCss" class="halflings glyphicon"></span>
                        </td>
                        <!-- /ko -->
                        <!-- ko foreach: $parent.actionTypes['glyphicon'] -->
                        <td class="grid-glyph-cell" data-bind="click: function() { doAction({gridRow: $parent}); }">
                            <!-- ko if: $parent.observeEnabledAction($data) -->
                            <span data-bind="css: actionCss(), attr: {title: $data.localName}" class="halflings glyphicon pointer"></span>
                            <!-- /ko -->
                        </td>
                        <!-- /ko -->
                        <!-- ko foreach: $parent.gridColumns -->
                        <td data-bind="
                            click: $parent.onRowClick.bind($parent),
                            grid_row_value: $parent.displayValues[field],
                            attr: {index: $index, 'data-caption': name},
                            css: columnCss
                        "></td>
                        <!-- /ko -->
                    </tr>
                </tbody>
                <tfoot class="jumbotron default-padding" data-bind="visible: gridRows().length === 0">
                    <tr>
                        <td data-bind="attr: {colspan: totalColumns()}">
                            <div data-template-id="{{ call_ids['ko_grid_no_results'] }}"></div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</script>
{% endif -%}

{% if include_ids['ko_grid_body'] -%}
<script type="text/template" id="{{ template_ids['ko_grid_body'] }}">
    <div <% if (self.get(self, 'show_title')) { %> class="panel panel-primary" <% } %>>
        <% if (self.get(self, 'show_title')) { %>
        <div data-bind="text: meta.verboseNamePlural" class="panel-heading"></div>
        <div class="panel-body">
        <% } %>
            <!-- ko if: meta.hasSearch() || gridFilters().length > 0 || actionTypes['button']().length > 0 -->
            <div data-template-id="{{ call_ids['ko_grid_nav'] }}"></div>
            <!-- /ko -->
            <div data-template-id="{{ call_ids['ko_grid_table'] }}"></div>
        <% if (self.get(self, 'show_pagination')) { %>
            <div data-template-id="{{ call_ids['ko_grid_pagination'] }}"></div>
        </div>
        <% } %>
    </div>
</script>
{% endif -%}

{% if include_ids['ko_grid_pagination'] -%}
<script type="text/template" id="{{ template_ids['ko_grid_pagination'] }}">
    <div data-bind="visible: options.alwaysShowPagination || gridTotalPages() > 1" class="pagination-wrapper default-padding">
        <ul data-bind="foreach: gridPages" class="pagination">
            <li data-bind="css:{active: isActive}">
                <a data-bind="text:title, click: onPagination" name="#"></a>
            </li>
        </ul>
    </div>
</script>
{% endif -%}

{% endmacro -%}
{% if _render_ -%}
    {% if not call_ids is defined -%}
        {% set call_ids={} -%}
    {% endif -%}
    {% if not template_ids is defined -%}
        {% set template_ids={} -%}
    {% endif -%}
    {% if not has_full_body is defined -%}
        {% set has_full_body = False -%}
    {% endif -%}
    {{ ko_grid_body(call_ids=call_ids, template_ids=template_ids, has_full_body=has_full_body) }}
{% endif -%}
