<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="users.user.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
      <!-- project -->
      <projector-button model="user" default-projector-id="defaultProjectorId">
      </projector-button>
      <!-- edit -->
      <a os-perms="users.can_manage" ng-click="openDialog(user)"
          class="btn btn-default btn-sm"
          title="{{ 'Edit' | translate}}">
        <i class="fa fa-pencil"></i>
      </a>
    </div>
    <h1>{{ user.get_short_name() }}</h1>
    <h2 translate>Participant</h2>
  </div>
</div>

<div class="details">
  <div class="user_details form-group">
    <fieldset>
      <legend translate>Personal data</legend>
      <label translate>Structure level</label>
        {{ user.structure_level }}
      <label translate>Groups</label>
        <div ng-repeat="group in user.groups_id">
          {{ (groups | filter: {id: group})[0].name | translate }}
        </div>
      <label translate>Participant number</label>
        {{ user.number }}
      <label translate>About me</label>
        <div ng-bind-html="user.about_me | trusted"></div>
    </fieldset>

    <fieldset os-perms="users.can_manage">
      <legend translate>Administrative data</legend>
      <label translate>Username</label>
        {{ user.username }}
      <label translate>Comment</label>
        <div class="white-space-pre-line">{{ user.comment }}</div>
    </fieldset>
  </div>
</div>
