<!-- 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="row summary" ko.css.visible="dataReady">
    <section class="c3 column card">
        <p class="greedy hpad row heading3 content-middle">
            <svg-icon class="c2 push-next-half" ko.css="state().css" params="name: state().name"></svg-icon>
            {{state().tooltip}}
        </p>
        <hr />
        <p class="greedy hpad row content-middle">
            <span class="greedy push-next">Nodes (Pods):</span>
            <span>{{hostCount}}</span>
        </p>
        <hr />
        <p class="greedy hpad row content-middle">
            <span class="greedy push-next">Region:</span>
            <span>{{region}}</span>
        </p>
    </section>

    <section class="c6 column push-both">
        <div class="row align-middle">
            <chart-legend class="pad" params="
                items: pieValues,
                caption: 'Kubernetes Pool Usage',
                format: 'size'
            "></chart-legend>

            <pie-chart class="align-middle push-prev" params="
                values: pieValues,
                sumLabel: 'Total',
                format: 'size'
            "></pie-chart>
        </div>
    </section>

    <section class="column c3 card">
        <h3 class="hpad pad-half heading3">{{activitiesTitle}}</h3>
        <hr>
        <p class="remark hpad pad-half push-next">{{activityText}}</p>
        <!-- ko if: hasActivities -->
        <progress-bar class="hpad push-both-quarter" params="
            progress: activityProgress,
            marker: true
        "></progress-bar>
        <p class="remark align-end pad-right">ETA: {{activityEta}}</p>

        <!-- ko if: hasAdditionalActivities -->
            <hr class="push-prev-half">
            <p class="hpad pad-half align-start"
                ko.text="additionalActivitiesMessage"
                ko.tooltip="additionalActivitiesTooltip"
            ></p>
        <!-- /ko -->
        <!-- /ko -->
    </section>
</div>
