<div ng-controller="AppCtrl" ng-cloak>

  <md-toolbar class="md-theme-light">
    <h2 class="md-toolbar-tools">
      <span>Full Bleed</span>
    </h2>
  </md-toolbar>

  <md-content>
    <md-list>
      <md-list-item class="md-3-line" ng-repeat="item in messages">
        <div class="md-list-item-text">
          <h3>{{item.what}}</h3>
          <h4>{{item.who}}</h4>
          <p>{{item.notes}}</p>
        </div>
        <md-button class="md-secondary">Respond</md-button>
        <md-divider ng-if="!$last"></md-divider>
      </md-list-item>
    </md-list>
  </md-content>

  <md-toolbar class="md-theme-light">
    <h2 class="md-toolbar-tools">
      <span>Inset</span>
    </h2>
  </md-toolbar>

  <md-content>
    <md-list>
      <md-list-item class="md-3-line" ng-repeat="item in messages">
        <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
        <div class="md-list-item-text">
          <h3>{{item.what}}</h3>
          <h4>{{item.who}}</h4>
          <p>{{item.notes}}</p>
        </div>
        <md-divider md-inset ng-if="!$last"></md-divider>
      </md-list-item>
    </md-list>
  </md-content>
</div>
