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

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

<div class="summary greedy row" ko.css.visible="dataReady">
    <section class="card c4 column">
        <div class="row content-middle hpad greedy">
            <span class="c5 push-next">Endpoint Groups:</span>
            <span class="c7 text-right">{{groupCount}}</span>
        </div>
        <hr/>
        <div class="row content-middle hpad greedy">
            <span class="c5 push-next">Endpoint Count:</span>
            <span class="c7 text-right">{{endpointCount}}</span>
        </div>
    </section>
    <section class="c4 column hpad-double push-both">
        <div class="row content-middle push-next-half">
            <h2 class="heading3 greedy push-next">Endpoint Groups Size</h2>
            <p class="remark content-middle" ko.visible="lastUpdate">
                <svg-icon class="icon-small" params="name: 'clock'"></svg-icon>
                Updated: {{lastUpdate}}
            </p>
        </div>
        <chartjs class="greedy groups-chart" params="
            type: 'bar',
            options: chart.options,
            data: chart.data
        "></chartjs>
    </section>
    <section class="c4 card column">
        <div class="row content-middle hpad greedy">
            <div class="column">
                <p class="heading3">{{cpuUsage}}</p>
                <p>
                    CPU Utilization
                </p>
            </div>
        </div>
        <hr />
        <div class="row content-middle hpad greedy">
            <div class="column">
                <p class="heading3">{{memoryUsage}}</p>
                <p>
                    Memory Utilization
                </p>
            </div>
        </div>
    </section>
</div>
