<at-panel>
    <at-panel-heading
        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
        hide-dismiss="true"
        badge="{{ instanceGroupCount }}">
    </at-panel-heading>

    <at-panel-body>
        <div class="at-List-toolbar">
            <smart-search
                class="at-List-search"
                django-model="instance_groups"
                base-path="instance_groups"
                iterator="instance_group"
                list="list"
                dataset="instance_group_dataset"
                collection="collection"
                search-tags="searchTags">
            </smart-search>
            <div class="at-List-toolbarAction">
                <button
                    type="button"
                    ui-sref="instanceGroups.add"
                    class="at-Button--add"
                    id="button-add"
                    ng-show="vm.isSuperuser"
                    aw-tool-tip="{{vm.tooltips.add}}"
                    data-placement="top"
                    aria-haspopup="true"
                    aria-expanded="false">
                </button>
            </div>
        </div>

        <at-list results="instance_groups">
            <at-row ng-repeat="instance_group in instance_groups"
                ng-class="{'at-Row--active': (instance_group.id === vm.activeId)}">

                <div class="at-Row-items">
                    <at-row-item
                        header-value="{{ instance_group.name }}"
                        header-link="/#/instance_groups/{{ instance_group.id }}">
                    </at-row-item>

                    <div class="at-Row--inline">
                        <at-row-item
                            label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INSTANCES') }}"
                            label-link="/#/instance_groups/{{ instance_group.id }}/instances"
                            value="{{ instance_group.instances }}"
                            inline="true"
                            badge="true">
                        </at-row-item>
                        <at-row-item
                            label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"
                            label-state="instanceGroups.jobs({instance_group_id: {{ instance_group.id }}, job_search: {status__in: ['running,waiting']}})"
                            value="{{ instance_group.jobs_running }}"
                            inline="true"
                            badge="true">
                        </at-row-item>
                        <at-row-item
                            label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_TOTAL_JOBS') }}"
                            label-state="instanceGroups.jobs({instance_group_id: {{ instance_group.id }}})"
                            value="{{ instance_group.jobs_total }}"
                            inline="true"
                            badge="true">
                        </at-row-item>
                    </div>
                </div>

                <div class="at-Row-actions">
                    <capacity-bar label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED_CAPACITY') }}" capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar>
                    <at-row-action icon="fa-trash" ng-click="vm.deleteInstanceGroup(instance_group)" ng-if="vm.rowAction.trash(instance_group)">
                    </at-row-action>
                </div>
            </at-row>
        </at-list>
    </at-panel-body>
    <paginate
        base-path="instance_groups"
        iterator="instance_group"
        dataset="instance_group_dataset"
        collection="instance_groups"
        query-set="instance_group_queryset">
    </paginate>
</at-panel>

