<!-- Copyright (C) 2016 NooBaa -->

<div class="fill row" ko.visible="!dataReady()">
    <loading-indicator class="align-middle greedy" params="label: true"></loading-indicator>
</div>

<section class="summary row greedy" ko.css.visible="dataReady">
    <div class="c4 card column push-next">
        <div class="row content-middle pad-double hpad highlight">
            <span class="greedy">Kubernetes pools</span>
            <span>{{hostPoolCount}}</span>
        </div>
        <hr>
        <div class="row content-middle pad-double hpad highlight">
            <span class="greedy">Number of Nodes (Pods)</span>
            <span>{{hostCount}}</span>
        </div>
    </div>
    <div class="c4 card column push-both">
        <div class="row content-middle pad-double hpad highlight">
            <span class="greedy">Cloud Resources</span>
            <span>{{cloudResourceCount}}</span>
        </div>
        <hr>
        <div class="row content-middle pad-double hpad highlight">
            <span class="greedy">Providers</span>
            <span>{{cloudServiceCount}}</span>
        </div>
    </div>
    <div class="c4 card column push-prev">
        <div class="row content-middle pad-double hpad highlight">
            <span class="greedy">Namespace Resources</span>
            <span>{{nsResourceCount}}</span>
        </div>
        <hr>
        <div class="row content-middle pad-double hpad highlight">
            <span class="greedy">Providers</span>
            <span>{{nsServiceCount}}</span>
        </div>
    </div>
</section>



