
<div ng-controller="MailListCtrl">
  <!-- header -->
  <div class="wrapper bg-light lter b-b">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-sm btn-bg btn-default"><i class="fa fa-chevron-left"></i></button>
      <button type="button" class="btn btn-sm btn-bg btn-default"><i class="fa fa-chevron-right"></i></button>
    </div>
    <div class="btn-toolbar">
      <div class="btn-group dropdown">
        <button class="btn btn-default btn-sm btn-bg dropdown-toggle" data-toggle="dropdown">
          <span class="dropdown-label">Filter</span>                    
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu text-left text-sm">
          <li><a ui-sref="app.mail.list({fold:'unread'})">Unread</a></li>
          <li><a ui-sref="app.mail.list({fold:'starred'})">Starred</a></li>
        </ul>
      </div>
      <div class="btn-group">
        <button class="btn btn-sm btn-bg btn-default" data-toggle="tooltip" data-placement="bottom" data-title="Refresh" data-original-title="" title=""><i class="fa fa-refresh"></i></button>
      </div>
    </div>
  </div>
  <!-- / header -->

  <!-- list -->
  <ul class="list-group list-group-lg no-radius m-b-none m-t-n-xxs">
    <li ng-repeat="mail in mails | filter:fold" ng-class="labelClass(mail.label)" class="list-group-item clearfix b-l-3x">
      <a ui-sref="app.page.profile" class="avatar thumb pull-left m-r">
        <img ng-src="{{mail.avatar}}">
      </a>
      <div class="pull-right text-sm text-muted">
        <span class="hidden-xs">{{ mail.date | fromNow }}</span>
        <i class="fa fa-paperclip ng-hide m-l-sm" ng-show="{{mail.attach}}"></i>
      </div>
      <div class="clear">
        <div><a ui-sref="app.mail.detail({mailId:mail.id})" class="text-md">{{mail.subject}}</a><span class="label bg-light m-l-sm">{{mail.label}}</span></div>
        <div class="text-ellipsis m-t-xs">{{mail.content | limitTo:100}}</div>
      </div>      
    </li>
  </ul>
  <!-- / list -->
</div>