<div class="controls">
  <button ng-click="remove(selected)" class="btn-icon">&#xe005;</button>
  <button ng-click="openWriter(selected)" class="btn-icon">&#xe002;</button>
  <button ng-click="openWriter()" class="btn-icon">&#xe006;</button>
</div><!--/.controls-->

<div class="view-read">
  <div class="headers">
    <p class="subject" ng-click="closeReadMode()">{{selected.subject || 'No subject'}}</p>
    <p class="date">{{selected.sentDate | date:'EEEE, MMM d, yyyy h:mm a'}}</p>
    <p class="address">From: <span class="label">{{selected.from[0].name || selected.from[0].address}}</span></p>
    <p class="address">To: <span class="label" ng-repeat="t in selected.to">{{t.address}} </span></p>
    <div ng-switch="selected.cc !== undefined">
      <p class="address" ng-switch-when="true">
        CC: <span class="label" ng-repeat="t in selected.cc">{{t.address}} </span>
      </p>
    </div>
  </div><!--/.headers-->

  <div class="seperator-line"></div>

  <div class="body" ng-switch="selected.html === true">
    <!-- sandbox untrusted markup from html emails in an iframe. The "allow-same-origin" attribute is required to dynamically adjust the height of the iframe. Script execution is not allowed. -->
    <iframe ng-switch-when="true" sandbox="allow-same-origin" srcdoc="{{selected.body}}" seamless frame-load></iframe>

    <!-- Render parts of a text only email in paragraphs for easier styling -->
    <p ng-repeat="part in selected.bodyDisplayParts track by $index">
      <span ng-switch="part.length !== 0">
        <span ng-switch-when="true">{{part}}</span>
      </span>
    </p>
  </div><!--/.body-->
</div><!--/.view-read-->