<vn-data-viewer
    data="$ctrl.classifications"
    class="vn-w-md">
    <vn-card class="vn-pa-md">
    <vn-horizontal
        ng-repeat="classification in $ctrl.classifications track by classification.id"
        class="vn-pb-md insurance"
        style="align-items: center;">
        <vn-one
            class="vn-pa-sm border-solid border-radius"
            ng-class="{'item-hightlight': !classification.finished,'item-disabled': classification.finished}">
            <vn-horizontal style="align-items: center;">
                <vn-none class="vn-px-md">
                    <vn-icon-button
                        ng-if="!classification.finished"
                        icon="lock"
                        vn-tooltip="Close contract"
                        ng-click="$ctrl.closeContract(classification)">
                    </vn-icon-button>
                </vn-none>
                <vn-one class="border-solid-right">
                    <div><vn-label translate>Since</vn-label> {{::classification.started | date:'dd/MM/yyyy'}}</div>
                    <div><vn-label translate>To</vn-label> {{classification.finished | date:'dd/MM/yyyy'}}</div>
                </vn-one>
                <vn-vertical vn-one class="vn-px-md">
                    <vn-horizontal ng-repeat="insurance in classification.insurances track by insurance.id">
                        <vn-one>
                            <vn-label-value label="Credit" 
                                value="{{::insurance.credit}}">
                            </vn-label-value>
                        </vn-one>
                        <vn-one>
                            <vn-label-value label="Grade" 
                                value="{{::insurance.grade}}">
                            </vn-label-value>
                        </vn-one>
                        <vn-one>
                            <vn-label-value label="Date" 
                                value="{{::insurance.created | date:'dd/MM/yyyy' }}">
                            </vn-label-value>
                        </vn-one>
                    </vn-horizontal>
                </vn-vertical>
                <a vn-auto ui-sref="client.card.creditInsurance.insurance.index({classificationId: {{classification.id}}})">
                    <vn-icon-button icon="preview" vn-tooltip="View credits"></vn-icon-button>
                </a>
            </vn-horizontal>
        </vn-one>
    </vn-horizontal>
    </vn-card>
</vn-data-viewer>
<vn-float-button
    ng-if="$ctrl.canCreateNew()"
    vn-acl="insurance"
    vn-acl-action="remove"
    vn-tooltip="New contract"
    fixed-bottom-right
    ui-sref="client.card.creditInsurance.create"
    icon="add"
    vn-bind="+"
    label="Add">
</vn-float-button>
<vn-confirm
    vn-id="close-contract"
    on-accept="$ctrl.returnDialog()"
    question="Close contract"
    message="Are you sure you want to close this contract?">
</vn-confirm>