<!-- 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 card column">
        <div class="row hpad greedy content-middle">
            <svg-icon class="push-next"
                ko.css="stateIcon().css"
                params="name: stateIcon().name"
            ></svg-icon>
            <span class="greedy">{{stateIcon().tooltip}}</span>
        </div>
        <hr />
        <div class="row hpad greedy content-middle">
            <svg-icon class="push-next"
                ko.css="trustIcon().css"
                params="name: trustIcon().name"
            ></svg-icon>
            <span class="greedy">{{trustIcon().tooltip}}</span>
            <more-info-icon params="tooltip: trustTooltip"></more-info-icon>
        </div>
        <hr />
        <div class="row hpad greedy content-middle">
            <svg-icon class="push-next"
                ko.css="accessibilityIcon().css"
                params="name: accessibilityIcon().name"
            ></svg-icon>
            <span class="greedy">{{accessibilityIcon().tooltip}}</span>
        </div>
    </section>

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

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

    <section class="c3 card column">
        <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>


