<div ng-controller="MyProfileCtrl" ng-init="init()">
    <div class="row">
        <div class="col-lg-12">
            <div id="messages" class="alert alert-{{alertStatus}}" ng-show="messages">
                <span ng-bind="messages"></span>
                <i class="dismiss-messages pull-right glyphicon glyphicon-remove" ng-click="messages = ''"
                   ng-show="messages"></i>
            </div>
            <img class="spinner" src="/img/ajax-loader.gif" ng-show="loading"/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <h3>My Profile</h3>
            <form name="profileForm" novalidate role="form">
                <div class="form-group" ng-class="{'has-warning': profile.displayName != initialProfile.displayName}">
                    <label for="displayName">Display Name </label>
                    <span class="label label-warning"
                          ng-show="profile.displayName != initialProfile.displayName"> Changed</span>
                    <input id="displayName" type="text" name="displayName" ng-model="profile.displayName"
                           class="form-control"/>
                </div>

                <div class="form-group" ng-class="{'has-warning': profile.teeShirtSize != initialProfile.teeShirtSize}">
                    <label for="teeShirtSize">Tee shirt size</label>
                    <span class="label label-warning"
                          ng-show="profile.teeShirtSize != initialProfile.teeShirtSize"> Changed</span>
                    <select id="teeShirtSize" ng-model="profile.teeShirtSize" name="teeShirtSize" ng-options="size for size in teeShirtSizes"
                            class="form-control">
                    </select>
                </div>

                <button ng-click="saveProfile(profileForm)" class="btn btn-primary"
                        ng-disabled="loading">Update profile
                </button>
            </form>
        </div>
    </div>
</div>