{% load i18n %}
{# Restviews Grid based on bootstrap3 #}

<div class="row" data-bind="with: {{ grid }}">
    <div class="hidden alert"
         id="{{ grid }}Alert">
    </div>
    <div class="row">
        <div class="col-sm-8">
            <span data-bind="if: searchingEnabled">
                <input type="text" class="form-control input-sm"
                       id="rv_search{{ grid }}"
                       placeholder="{% trans "Search" %}">
            </span>
        </div>
        <div class="col-sm-2">
            {# Include pagination #}
            {% include "restviews/bootstrap3/pagination.html" %}
        </div>
        <div class="col-sm-2">

            <!-- ko if: globalActions().length <= 3 -->

            <div class="btn-group btn-group-sm pull-right">

                <!-- ko foreach: globalActions() -->

                <button type="button" class="btn"
                        onclick="rv.triggerAction(this)"
                        data-bind="
                                html: label,
                                css: addClass,
                                attr: {
                                    'data-action': action,
                                    'data-grid': '{{ grid }}'
                                }
                            "></button>

                <!-- /ko -->

            </div>

            <!-- /ko -->

            <!-- ko if: globalActions().length > 3 -->

            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    {% trans "Actions" %} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">


                    <!-- ko foreach: globalActions() -->

                    <li>
                        <a href="#"
                           onclick="rv.triggerAction(this)"
                           data-bind="
                                html: label,
                                attr: {
                                    'data-action': action,
                                    'data-grid': '{{ grid }}'
                                }
                            "
                            ></a>
                    </li>

                    <!-- /ko -->

                </ul>
            </div>

            <!-- /ko -->

        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover" data-bind="if: canView">

            {# Header #}

            <thead>
            <tr>

                <!-- ko foreach: fieldsView -->

                <!-- ko ifnot: hidden -->

                <th data-bind="
                    attr: {
                        'data-fieldName': _field,
                        'data-gridName': '{{ grid }}',
                        'id': 'rv_header{{ grid }}' + _field
                    }
                " style="cursor: pointer">
                    <span data-bind="
                        text: label,
                        attr: {
                            'data-fieldName': _field,
                            'data-gridName': '{{ grid }}'
                        }
                    ">

                    </span>

                    <!-- ko if: _field == $parent.orderingField() -->

                    <!-- ko if: $parent.orderingAsc() -->

                    <span class="glyphicon glyphicon-chevron-up"
                        data-bind="
                            attr: {
                                'data-fieldName': _field,
                                'data-gridName': '{{ grid }}'
                            }
                        ">

                    </span>

                    <!-- /ko -->

                    <!-- ko ifnot: $parent.orderingAsc() -->

                    <span class="glyphicon glyphicon-chevron-down"
                          data-bind="
                            attr: {
                                'data-fieldName': _field,
                                'data-gridName': '{{ grid }}'
                            }
                        ">

                    </span>

                    <!-- /ko -->

                    <!-- /ko -->

                </th>

                <!-- /ko -->

                <!-- /ko -->

                <th>
                    &nbsp;
                </th>

            </tr>
            </thead>

            {# Data rows #}

            <tbody data-bind="foreach: data">
            <tr>

                <!-- ko foreach: $parent.fieldsView -->

                <!-- ko ifnot: hidden -->

                <td style="white-space: pre-wrap"
                    data-bind="text: $parent[_field]">
                </td>

                <!-- /ko -->

                <!-- /ko -->

                {# Actions #}

                <td>

                    <div class="pull-right">

                        <!-- ko foreach: $parent.actions -->

                        <button
                            type="button"
                            class="btn btn-xs"
                            data-bind="
                                html: label,
                                css: addClass,
                                attr: {
                                    'data-action': action,
                                    'data-item': ko.toJSON($parent,null,2),
                                    'data-grid': '{{ grid }}'
                                }
                            "
                            onclick="rv.triggerAction(this)">

                        </button>

                        <!-- /ko -->

                    </div>

                </td>

            </tr>
            </tbody>
        </table>
    </div>

</div>