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

<section class="pad">
    <div class="row content-middle bucket-policy-summary"
        ko.click="onToggleSection"
    >
        <svg-icon class="push-next"
            params="name: stateIcon.name"
            ko.css="stateIcon.css"
            ko.tooltip="stateIcon.tooltip"
        ></svg-icon>
        <div class="column greedy">
            <h2 class="heading3 greedy">Data Resiliency</h2>
            <p class="row content-middle" ko.visible="!isExpanded()">
                {{resiliencyType}}
                <vr class="push-both-half"></vr>
                {{dataDistribution}}
            </p>
            <p ko.visible="isExpanded">
                The ability of stored objects to recover and continue operating in the case of a failure
            </p>
        </div>
        <button class="btn push-both" ko.click="onEditDataResiliency">
            Edit Data Resiliency
        </button>
        <svg-icon class="icon-small rotate"
            ko.css="{ 'deg-90': !isExpanded() }"
            params="name: 'chevron'"
        ></svg-icon>
    </div>
    <div class="column hpad" ko.expand="isExpanded">
        <property-sheet class="hpad push-prev" params="properties: info">
            <template name="messageWithSeverity">
                <p class="row content-middle" ko.css="css" >
                    {{text}}
                    <!-- ko with: moreInfo -->
                    <more-info-icon class="icon-small push-prev-half" params="
                        severity: severity,
                        tooltip: tooltip
                    "></more-info-icon>
                    <!-- /ko -->
                </p>
            </template>
        </property-sheet>
    </div>
</section>

