{{#main-content}}
<div class="widget-box transparent">
    {{#grid-header}}
        <li>
            {{#link-to 'customer-status.create'}}
                <i class="ace-icon fa fa-plus-circle bigger-110 green"></i>
                Create Customer Status
            {{/link-to}}
        </li>
    {{/grid-header}}

    <div class="widget-body">
        <!-- #section:custom/scrollbar -->
        <div class="widget-main no-padding table-responsive no-border">
            <table class="table table-striped table-bordered table-hover dataTable" style="border: 1px solid #ddd;">
                <thead class="thin-border-bottom">
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            <i class="ace-icon fa fa-sticky-note-o bigger-110 hidden-480"></i>
                            Remark
                        </th>
                        <th>
                            <i class="ace-icon fa fa-exchange bigger-110 hidden-480"></i>
                            Enabled
                        </th>
                        <th>
                            <i class="ace-icon fa fa-cogs bigger-110 hidden-480"></i>
                            Settings
                        </th>
                    </tr>
                </thead>

                <tbody>
                    {{#each model.data as |it|}}
                    <tr>
                        <td>
                            {{it.name}}
                        </td>
                        <td>
                            {{editable-cell model=it field='note'}}
                        </td>
                        <td>
                            {{status-cell model=it enabledText='TRUE' disabledText='FALSE'}}
                        </td>
                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                {{status-toggle-button model=it}}
                                {{#link-to 'customer-status.edit' it.id class='btn btn-xs btn-info' data-rel="tooltip" title='Edit'}}
                                    <i class="ace-icon fa fa-pencil bigger-120"></i>
                                {{/link-to}}
                                {{#if (not-eq model.data.firstObject.id it.id)}}
                                <button class="btn btn-xs btn-purple" data-rel="tooltip" title="Move Up" {{action (route-action 'moveUp' it)}}>
                                    <i class="ace-icon fa fa-arrow-up bigger-120"></i>
                                </button>
                                {{/if}}
                                {{#if (not-eq model.data.lastObject.id it.id)}}
                                <button class="btn btn-xs" data-rel="tooltip" title="Move Down" {{action (route-action 'moveDown' it)}}>
                                    <i class="ace-icon fa fa-arrow-down bigger-120"></i>
                                </button>
                                {{/if}}
                            </div>
                            <div class="hidden-md hidden-lg">
                                <div class="inline pos-rel">

                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                        <li>
                                            {{status-toggle-button model=it iconOnly=true}}
                                        </li>
                                        <li>
                                            {{#link-to 'customer-status.edit' it.id class='tooltip-info' data-rel='tooltip' title='Edit'}}
                                                <span class="blue">
                                                    <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                                </span>
                                            {{/link-to}}
                                        </li>
                                        <li>
                                        {{#if (not-eq model.data.firstObject.id it.id)}}
                                        <a class="tooltip-info" title="Move Up" {{action (route-action 'moveUp' it)}}>
                                            <i class="ace-icon fa fa-arrow-up bigger-120"></i>
                                        </a>
                                        {{/if}}
                                        {{#if (not-eq model.data.lastObject.id it.id)}}
                                        <a class="tooltip-info" title="Move Down" {{action (route-action 'moveDown' it)}}>
                                            <i class="ace-icon fa fa-arrow-down bigger-120"></i>
                                        </a>
                                        {{/if}}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
        {{pagination-bar}}
    </div>
</div>
{{/main-content}}