<at-panel>
    <at-panel-heading hide-dismiss="true">
        {{ vm.strings.get('list.PANEL_TITLE') }}
        <span class="badge List-titleBadge">
            {{ instanceGroupCount }}
        </span>
    </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"
                    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="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="Running Jobs"
                            label-link="/#/instance_groups/{{ instance_group.id }}/jobs"
                            value="{{ instance_group.jobs_running }}"
                            inline="true"
                            badge="true">
                        </at-row-item>
                    </div>
                </div>

                <div class="at-Row-actions">
                    <capacity-bar label-value="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="instance_group.name !== 'tower'">
                    </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>

