<script type="text/x-handlebars-template">

    <div>

        <div class="alpaca-array-toolbar" {{#compare options.toolbarStyle "button"}} btn-group{{/compare}}>

        {{#each arrayToolbarActions}}

            {{#compare ../options.toolbarStyle "link"}}
            <a href="#" class="alpaca-array-toolbar-action" data-array-toolbar-action="{{action}}">{{{label}}}</a>
            {{/compare}}

            {{#compare ../options.toolbarStyle "button"}}
            <button class="alpaca-array-toolbar-action btn {{../view.styles.button}}" data-array-toolbar-action="{{action}}">
                {{#if this.iconClass}}
                <i class="{{iconClass}}"></i>
                {{/if}}
                {{#if label}}{{{label}}}{{/if}}
            </button>
            {{/compare}}

        {{/each}}

        </div>

        <table>

            <!-- table headers -->
            <thead>
                <tr>
                    {{#each options.fields}}
                    <th>{{{label}}}</th>
                    {{/each}}

                    <th>Actions</th>
                </tr>
            </thead>

            <!-- table body -->
            <tbody>
            {{#each items}}
                <tr>
                    {{#each data}}
                    <td>{{{.}}}</td>
                    {{/each}}

                    <!-- actions cell -->
                    <td>
                        <div class="alpaca-array-item-actions btn-group">
                            {{#each ../arrayItemActions}}
                            <button class="alpaca-array-item-action {{../../view.styles.button}}" data-array-item-action="{{action}}">
                                {{#if iconClass}}
                                <i class="{{iconClass}}"></i>
                                {{/if}}
                                {{#if label}}{{{label}}}{{/if}}
                            </button>
                            {{/each}}
                        </div>
                    </td>
                </tr>
            {{/each}}
            </tbody>

        </table>
    </div>

</script>