<!-- components/oxi-section/grid -->
{{#if @def.pager}}
    <div class="row mb-2">
        <div class="col-12">
            <OxiSection::Grid::Pagination
                @pager={{this.pager}}
                @pages={{this.pages}}
                @pagesizes={{this.pagesizes}}
                @setPage={{this.updatePage}}
            />
        </div>
    </div>
{{/if}}

<div class="oxi-grid table-responsive">
    <table class="table table-sm table-bordered table-striped table-hover {{@def.className}}">
        <thead>
            <tr>
                {{#if this.isBulkable}}
                    <th {{on "click" this.selectAll}} role="button">
                        <span class="oxi-checkbox {{if this.allChecked "checked"}}"></span>
                        {{t 'component.oxisection_grid.select_all'}}
                    </th>
                {{/if}}
                {{#if this.multipleActions}}
                    <th>&nbsp;</th>
                {{/if}}
                {{#each this.formattedColumns as |column|}}
                    {{#if column.sortable}}
                        <th {{on "click" (fn this.sort column.sortPage)}} class="sortable {{if column.isSorted "bg-secondary text-white"}}" role="button">
                            <span>{{column.sTitle}}</span>
                            {{#if column.isSorted}}
                                <div class="btn btn-light btn-sm float-end">
                                    {{#if this.pager.reverse}}
                                        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                                    {{else}}
                                        <span class="glyphicon glyphicon-sort-by-attributes"></span>
                                    {{/if}}
                                </div>
                            {{else}}
                                <div class="btn btn-light btn-sm float-end">
                                    <span class="glyphicon glyphicon-sort-by-attributes text-secondary"></span>
                                </div>
                            {{/if}}
                        </th>
                    {{else}}
                        <th>
                            <span>{{column.sTitle}}</span>
                        </th>
                    {{/if}}
                {{/each}}
            </tr>
        </thead>
        <tbody>
            {{#each this.sortedData as |row|}}
                <tr class="context {{row.className}}" role={{if this.hasAction "button"}}>
                    {{#if this.isBulkable}}
                        <td {{on "click" (fn this.select row)}} role="button">
                            <span class="oxi-checkbox {{if row.checked "checked"}}"></span>
                        </td>
                    {{/if}}
                    {{#if this.multipleActions}}
                        <td>
                            <BsDropdown as |dd|>
                                <dd.toggle><span class="glyphicon glyphicon-cog"></span></dd.toggle>
                                <dd.menu @renderInPlace={{true}} as |ddm|>
                                    {{#each row.actions as |rowAction|}}
                                        <ddm.item>
                                            <OxiBase::Clickable @clickable={{rowAction}} as |clickHandler isLoading|>
                                                <button
                                                    class="dropdown-item" type="button" {{on "click" clickHandler}}
                                                >
                                                    {{rowAction.label}}
                                                    {{#if rowAction.icon}}
                                                        <span class="float-end glyphicon glyphicon-{{rowAction.icon}}"></span>
                                                    {{/if}}
                                                </button>
                                            </OxiBase::Clickable>
                                        </ddm.item>
                                    {{/each}}
                                </dd.menu>
                            </BsDropdown>
                        </td>
                    {{/if}}
                    {{#each row.data as |value|}}
                        {{#if this.hasAction}}
                            {{!-- template-lint-disable require-presentational-children --}}
                            <OxiBase::Clickable @clickable={{row.actions.[0]}} as |clickHandler isLoading|>
                                <td {{on "click" clickHandler}} role="button">
                                    <OxiBase::Formatted @format={{value.format}} @value={{value.value}}/>
                                </td>
                            </OxiBase::Clickable>
                        {{else}}
                            <td>
                                <OxiBase::Formatted @format={{value.format}} @value={{value.value}}/>
                            </td>
                        {{/if}}
                    {{/each}}
                </tr>
           {{else}}
                <tr><td colspan="{{this.formattedColumns.length}}">
                    {{try @def.empty "&nbsp;"}}
                </td></tr>
           {{/each}}
        </tbody>
        {{#if @def.footer}}
            <tfoot>
                <tr><td colspan="{{this.formattedColumns.length}}">
                    {{@def.footer}}
                </td></tr>
            </tfoot>
        {{/if}}
    </table>
</div>

<div class="row">
    <div class="col-lg-6 order-2 order-lg-1">
        <OxiBase::ButtonContainer @buttons={{this.buttons}}/>
    </div>
    <div class="col-lg-6 order-1 order-lg-2">
        {{#if @def.pager}}
            <OxiSection::Grid::Pagination
                @pager={{this.pager}}
                @pages={{this.pages}}
                @pagesizes={{this.pagesizes}}
                @setPage={{this.updatePage}}
                class="mt-3"
            />
        {{/if}}
    </div>
</div>
