<!-- Copyright (C) 2016 NooBaa -->
<div class="pad card-shadow row content-middle">
    <div class="column greedy push-next-half">
        <div class="row content-middle">
            <h2 class="heading3 push-next">Buckets using this {{subject}}: {{bucketCount}}</h2>
            <p class="remark content-middle" ko.visible="dataReady">
                <svg-icon class="icon-small" params="name: 'clock'"></svg-icon>
                Updated: {{lastUpdateTime}}
            </p>
        </div>
        <p>The following buckets are using this {{subject}} as part of their placement policy</p>
    </div>
    <toggle-group params="
        options: viewOptions,
        selected: ko.pc(selectedView, onView, $component)
    "></toggle-group>
</div>

<!-- ko if: selectedView.eq('TABLE') -->
<resource-distribution-table class="column greedy" params="
    resourceType: resourceType,
    resourceName: resourceName
"></resource-distribution-table>
<!-- /ko -->

<!-- ko if: selectedView.eq('CHART') -->
<resource-distribution-chart class="column greedy" params="
    resourceType: resourceType,
    resourceName: resourceName
"></resource-distribution-chart>
<!-- /ko -->

