<div class="panel panel-default">

<div class="panel-heading">

<a href="" ui-sref="^.list" class="btn btn-xs btn-default"><i class="fa fa-arrow-left"></i></a>

{{ctrl.user.username}}

<small>{{ctrl.user.email}}</small>

<span class="pull-right btn-group">

<a href="" class="btn btn-xs btn-default" ui-sref="^.edit({id: ctrl.user.id})">

<i class="fa fa-pencil"></i>

</a>

<a href="" class="btn btn-xs btn-danger" ui-sref="^.delete({id: ctrl.user.id})">

<i class="fa fa-trash-o"></i>

</a>

</span>

</div>

<div class="panel-body">

<h3 translate>Roles</h3>

<div ng-if="ctrl.user.roles.length">

<ul>

<li ng-repeat="role in ctrl.user.roles">{{role.name}}</li>

</ul>

</div>

<div ng-if="!ctrl.user.roles.length">

<h4>This user has no roles</h4>

</div>

<hr/>

<pre>{{ctrl.user | json}}</pre>

</div>

</div>