<vn-auto-search
    model="model">
</vn-auto-search>
<vn-data-viewer
    model="model"
    class="vn-w-sm">
    <vn-card>
    <vn-list class="separated">
    <a
        ng-repeat="row in model.data track by row.id"
        ui-sref="account.acl.edit(::{id: row.id})"
        translate-attr="{title: 'Edit ACL'}"
        class="vn-item search-result">
        <vn-item-section>
            <h6>{{::row.model}}.{{::row.property}}</h6>
            <vn-label-value
                label="Role" 
                value="{{::row.principalId}}">
            </vn-label-value>
            <vn-label-value
                label="Access type" 
                value="{{::row.accessType}}">
            </vn-label-value>
            <vn-label-value
                label="Permission" 
                value="{{::row.permission}}">
            </vn-label-value>
        </vn-item-section>
        <vn-item-section side>
            <vn-icon-button
                vn-click-stop="deleteAcl.show(row)"
                vn-tooltip="Delete"
                icon="delete">
            </vn-icon-button>
        </vn-item-section>
    </a>
    </vn-list>
    </vn-card>
</vn-data-viewer>
<a ui-sref="account.acl.create"
    vn-tooltip="New ACL"
    vn-bind="+"
    fixed-bottom-right>
    <vn-float-button icon="add"></vn-float-button>
</a>
<vn-confirm
    vn-id="deleteAcl"
    on-accept="$ctrl.onDelete($data)"
    question="Are you sure you want to continue?"
    message="ACL will be removed">
</vn-confirm>