<!-- 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="c6 column card push-next-half">
        <div class="greedy hpad row content-middle">
            <svg-icon class="push-next"
                ko.css="state.css"
                params="name: state.icon"
            ></svg-icon>
            <span class="heading3">{{state.text}}</span>
        </div>
        <hr />
        <div class="greedy hpad row content-middle">
            <span class="c6 highlight push-next">{{name}}</span>
            <span class="c6 text-right">
                <span ko.tooltip="descTooltip">
                    {{descText}}
                </span>
            </span>
        </div>
        <hr />
        <div class="greedy hpad row content-middle" >
            <span class="c6 highlight push-next">Last Modified:</span>
            <span class="c6 text-right">{{lastModified}}</span>
        </div>
    </section>

    <section class="c6 column card push-prev-half">
        <div class="greedy hpad row content-middle">
            <span class="c6 highlight push-next">Runtime:</span>
            <span class="c6 text-right">{{runtime}}</span>
        </div>
        <hr />
        <div class="greedy hpad row content-middle">
            <span class="c6 highlight push-next">Code Size (Zip):</span>
            <span class="c6 text-right">{{codeSize}}</span>
        </div>
        <hr />
        <div class="greedy hpad row content-middle">
            <span class="c6 highlight push-next">Memory Size:</span>
            <span class="c6 text-right">{{memorySize}}</span>
        </div>
    </section>
</div>
