<div class="form">
    <div id="receiver-detail-header" class="detail-header">
        <ng-include src="'partials/messenger.backbutton.html'"></ng-include>
        <div class="header-details">
            <h2 ng-bind-html="ctrl.controllerModel.subject | escapeHtml | emojify"></h2>
        </div>

        <div class="header-buttons">
            <md-progress-circular
                    class="md-accent"
                    ng-show="ctrl.isSaving()"
                    md-diameter="32"></md-progress-circular>
            <md-button
                    class="md-icon-button"
                    ng-show="!ctrl.isSaving()"
                    ng-disabled="!ctrl.controllerModel.isValid()"
                    ng-click="ctrl.save()"
                    translate-attr="{'aria-label': 'common.OK'}">
                <md-icon class="material-icons md-24 md-primary">done</md-icon>
            </md-button>
        </div>
    </div>
    <div class="detail-content">
        <div class="loading-overlay" ng-class="{'active': ctrl.isSaving()}">
            <div>
                <md-progress-circular md-mode="indeterminate"></md-progress-circular>
            </div>
        </div>
        <div ng-include src="'partials/messenger.receiver/' + ctrl.type + '.edit.html'" class="form-content">
        </div>
    </div>
</div>
