<!-- hbox layout -->
<div class="hbox hbox-auto-xs bg-light " ng-init="
  app.settings.asideFixed = true;
  app.settings.asideDock = false;
  app.settings.container = false;
  app.hideAside = false;
  app.hideFooter = true;
  " ng-controller="NoteCtrl">
  <!-- column -->
  <div class="col w-lg lt b-r">
    <div class="vbox">
      <div class="wrapper">
        <a href class="pull-right btn btn-sm btn-info m-t-n-xs" ng-click="createNote()">New</a>
        <div class="h4">Notes</div>
      </div>
      <div class="wrapper b-t m-t-xxs">
        <div class="input-group">
          <span class="input-group-addon input-sm"><i class="fa fa-search"></i></span>
          <input type="text" class="form-control input-sm" placeholder="search" ng-model="query">
        </div>
      </div>
      <div class="row-row">
        <div class="cell scrollable hover">
          <div class="cell-inner">
            <div class="padder">
              <div class="list-group">
                <a ng-repeat="note in notes | filter:query | orderBy:'date':true" class="list-group-item b-l-{{note.color}} b-l-3x hover-anchor" ng-class="{'hover': note.selected }" ng-click="selectNote(note)">
                  <span ng-click='deleteNote(note)' class="pull-right text-muted hover-action"><i class="fa fa-times"></i></span>
                  <span class="block text-ellipsis">{{ note.content ? note.content : 'Empty note' }}</span>
                  <small class="text-muted">{{ note.date | fromNow }}</small>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /column -->

  <!-- column -->
  <div class="col">
    <div class="vbox">
      <div class="wrapper bg-light lt b-b">
        <span class="text-muted">Created on:</span> <span>{{ note.date  | date:'MMM-dd-yyyy H:mm' }}</span>
        <div class="m-l inline dropdown" dropdown>
          <a class="v-middle pos-rlt inline bg-{{note.color}}" dropdown-toggle style="width:16px;height:16px;top:-2px"></a>
          <div class="dropdown-menu animated fadeInUp w wrapper">
            <a ng-repeat="color in colors" class="inline m-xs bg-{{color}}" style="width:18px;height:18px" ng-click=" note.color = color "></a>
          </div>
        </div>
      </div>
      <div class="row-row">
        <div class="cell">
          <div class="cell-inner">
            <textarea class="form-control no-radius no-border no-bg wrapper-lg text-md" style="height:100%;" ng-model="note.content">
            </textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /column -->
</div>
<!-- /hbox layout -->