<div layout="column" layout-wrap layout-margin layout-align="center center">
    <h3 class="md-headline" translate>messenger.RECEIVER_AVATAR</h3>
    <avatar-area
            on-change="ctrl.controllerModel.avatarController.onChangeAvatar"
            enable-clear="true">
    </avatar-area>
</div>
<md-card>
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline" translate>messenger.GROUP_NAME</span>
        </md-card-title-text>
    </md-card-title>
    <md-card-content>
        <md-input-container class="md-block" >
            <input
                    aria-label="group name"
                    translate-attr="{'aria-label': 'messenger.GROUP_NAME'}"
                    ng-model="ctrl.controllerModel.name"
                    ng-disabled="ctrl.isSaving()"
                    ng-keypress="ctrl.keypress($event)"
                    autofocus>
        </md-input-container>
    </md-card-content>
</md-card>
<md-card>
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline" translate>messenger.GROUP_MEMBERS</span>
        </md-card-title-text>
    </md-card-title>
    <md-card-content>
        <ul class="member-list">
            <member-list-editor
                    eee-members="ctrl.controllerModel.members",
                    eee-placeholder="ctrl.controllerModel.addContactPlaceholder"
                    eee-on-change="ctrl.controllerModel.onChangeMembers" />
        </ul>
    </md-card-content>
</md-card>

