<vn-auto-search
    model="model">
</vn-auto-search>
<vn-data-viewer
    model="model"
    class="vn-w-sm">
    <vn-card>
        <div class="vn-list separated">
            <a
                ng-repeat="role in model.data track by role.id"
                ui-sref="account.role.card.summary(::{id: role.id})"
                ui-sref-opts="{inherit: false}"
                translate-attr="{title: 'View role'}"
                class="vn-item search-result">
                <vn-item-section>
                    <h6>{{::role.name}}</h6>
                    <div>{{::role.description}}</div>
                </vn-item-section>
                <vn-item-section side>
                    <vn-icon-button
                        vn-click-stop="$ctrl.preview(role)"
                        vn-tooltip="Preview"
                        icon="preview">
                    </vn-icon-button>
                </vn-item-section>
            </a>
        </div>
    </vn-card>
</vn-data-viewer>
<vn-popup vn-id="summary">
    <vn-role-summary role="$ctrl.selectedRole"></vn-role-summary>
</vn-popup>
<a ui-sref="account.role.create"
    ui-sref-opts="{inherit: false}"
    vn-tooltip="New role"
    vn-bind="+"
    vn-acl="it"
    vn-acl-action="remove"
    fixed-bottom-right>
    <vn-float-button icon="add"></vn-float-button>
</a>