<div ng-if="ctrl.controllerModel.access.canChangeAvatar"
	 layout="column" layout-wrap layout-margin layout-align="center center">

	<h3 class="md-headline" translate>messenger.RECEIVER_AVATAR</h3>

		<avatar-area
				load-avatar="ctrl.controllerModel.avatarController.loadAvatar"
				on-change="ctrl.controllerModel.avatarController.onChangeAvatar"
				color="ctrl.controllerModel.contact.color"
				enable-clear="true">
		</avatar-area>
</div>

<md-card>
	<md-card-content>
		<md-input-container class="md-block" ng-if="ctrl.controllerModel.access.canChangeFirstName">
			<label>{{ctrl.controllerModel.firstNameLabel}}</label>
			<input ng-disabled="ctrl.isSaving()" ng-model="ctrl.controllerModel.firstName" ng-keypress="ctrl.keypress($event)" maxlength="256">
		</md-input-container>

		<md-input-container class="md-block" ng-if="ctrl.controllerModel.access.canChangeLastName">
			<label translate>messenger.LAST_NAME</label>
			<input ng-disabled="ctrl.isSaving()" ng-model="ctrl.controllerModel.lastName" ng-keypress="ctrl.keypress($event)" maxlength="256">
		</md-input-container>
	</md-card-content>
</md-card>
