<div class="message-container" ng-class="{'expanded': tabCtrl.navigationCollapsed}">
  <div class="message">
    <div class="row">
      <div class="toggle-navigation-container detail-page">
        <a href class="collapse-navigation-link ion-navicon"
           ng-click="tabCtrl.navigationCollapsed=!tabCtrl.navigationCollapsed"></a>
      </div>
      <button ui-sref="components.mail.label({label : detailCtrl.label})"  type="button" class="back-button btn btn-default btn-with-icon"><i
          class="ion-chevron-left"></i>Back
      </button>
    </div>
    <div class="person-info row">
      <div class="col-lg-4 col-md-12  no-padding">
        <img ng-src="{{detailCtrl.mail.name.split(' ')[0] | profilePicture}}" class="human-picture">

        <div class="name">
          <h2 class="name-h">{{detailCtrl.mail.name.split(' ')[0]}}</h2>

          <h2 class="name-h second-name">{{detailCtrl.mail.name.split(' ')[1]}}</h2>

          <div>
            <span class="mail-tag tag label {{detailCtrl.mail.tag}}">{{detailCtrl.mail.tag}}</span>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-xs-12 no-padding">
        <div class="contact-info phone-email">
          <div>
            <i class="ion-iphone"></i>
            <span class="phone">777-777-7777</span>
          </div>
          <div>
            <i class="ion-email"></i>
            <span class="email">{{detailCtrl.mail.email}}</span>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 col-xs-12 no-padding">
        <div class="contact-info position-address">
          <div>
            <span class="position">{{detailCtrl.mail.position}}</span>
          </div>
          <div>
            <span class="address">12 Nezavisimosti st. Vilnius, Lithuania</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
    </div>
    <div class="line"></div>
    <div class="message-details">
      <span class="subject">{{detailCtrl.mail.subject}} </span>
      <span class="date">• {{detailCtrl.mail.date | date : 'h:mm a MMMM d '}}</span>
    </div>
    <div class="line"></div>
    <div ng-bind-html="detailCtrl.mail.body" class="message-body">

    </div>
    <div class="line"></div>
    <div class="attachment" ng-show="detailCtrl.mail.attachment">
      <span class="file-links">1 Attachment - <a href>View</a> | <a href>Download</a></span>
      <div>
        <i class="file-icon ion-document"></i>
        <span class="file-name">{{detailCtrl.mail.attachment}}</span>
      </div>
    </div>
    <div class="line" ng-show="detailCtrl.mail.attachment"></div>
    <div class="answer-container">
      <button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button>
      <button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><i class="ion-forward"></i>Forward</button>
      <button type="button" class="btn btn-with-icon"><i class="ion-printer"></i>Print</button>
      <button type="button" class="btn btn-with-icon"><i class="ion-android-remove-circle"></i>Spam</button>
      <button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button>
    </div>

  </div>
  <div ng-show="!detailCtrl.mail">
    <h5 ng-class="text-center">Nothing to show</h5>
  </div>
</div>