<div class="panel-body">
    <h3 translate>Your details</h3>

    <div class="col-xs-6">
        <div class="form-group">
            <label for="username" translate>Username</label>

            <div name="username">{{ User.username }}</div>
        </div>
        <div class="form-group">
            <label for="givenname" translate>Given name</label>

            <div name="givenname">{{ User.givenname }}</div>
        </div>
        <div class="form-group">
            <label for="surname" translate>Surname</label>

            <div name="surname">{{ User.surname }}</div>
        </div>
        <div class="form-group">
            <label for="description" translate>Description</label>

            <div name="description">{{ User.description }}</div>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <label for="email" translate>Email</label>

            <div name="email">
                <a href="mailto:{{ User.email }}">
                    {{ User.email }}</a></div>
        </div>
        <div class="form-group">
            <label for="phone" translate>Phone</label>

            <div name="phone">{{ User.phone }}</div>
        </div>
        <div class="form-group">
            <label for="mobile" translate>Mobile</label>

            <div name="mobile">{{ User.mobile }}</div>
        </div>
    </div>
    <!-- If the user is editable, we show the password form -->
    <form name="setPasswordForm" role="form" validate
          ng-show="User.editable && checkRight('updateuser')">
        <div class="col-xs-12">
            <div class="form-group">
                <label for="password" translate>Password</label>
                <input type="password" name="password" class="form-control"
                       equals="{{ password2 }}"
                       ng-model="User.password"
                       autocomplete="off"
                       placeholder="{{ 'Type a password'|translate }}"
                        >
                <input type="password" name="password2" class="form-control"
                       equals="{{ User.password }}"
                       autocomplete="off"
                       placeholder="{{ 'Repeat password'|translate }}"
                       ng-model="password2">
            </div>
            <div class="text-center">
                <button ng-click="setPassword()"
                        class="btn btn-primary"
                        ng-disabled="setPasswordForm.$invalid">
                    <span class="glyphicon glyphicon-edit"></span>
                    <span translate>set password</span>
                </button>
            </div>
        </div>
    </form>

</div>

