<div class="">
  <div class="navbar navbar-danger">
    <div class="container-fluid">
      <div class="navbar-header">
        <ul class="navbar-toggle">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="glyphicon glyphicon-option-vertical"></i></a>
            <ul class="dropdown-menu">

              <li class="dropdown-header">Preferences</li>
              <li><a [routerLink]="['/notes']">My Notes</a></li>
              <li><a [routerLink]="['/archive-notes']">Archive Notes</a></li>   
              <li><a href="javascript:void(0)" [routerLink]="['/recycle-bin']">Recycle Bin</a></li>                       
              <li role="separator" class="divider"></li>
              <li>
                <a href="javascript:void(0)" (click)="displayTypeChange()">
                  {{displayList ? 'Grid View' : 'List View'}}
                </a>
              </li>
              <li><a href="javascript:void(0)">Settings</a></li>
              <li><a href="javascript:void(0)" [routerLink]="['/about']">About</a></li>
            </ul>
          </li>
        </ul>
        <a href="javascript:void(0)" class="navbar-brand" [routerLink]="['/notes']">Preserver </a>
        <span class="navbar-brand"><i class="fa fa-angle-right" aria-hidden="true"></i>&nbsp;&nbsp;Recycle Bin</span>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="javascript:void(0)" (click)="displayTypeChange()">
              <i class="{{displayList ? 'fa fa-bars' : 'fa fa-th'}}"></i>
            </a>
          </li>
          <li class="dropdown">
            <a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="glyphicon glyphicon-option-vertical"></i>
            </a>
            <ul class="dropdown-menu">
              <li class="dropdown-header">Preferences</li>
              <li><a href="javascript:void(0)" [routerLink]="['/notes']">My Notes</a></li>
              <li><a href="javascript:void(0)" [routerLink]="['/archive-notes']">Archive Notes</a></li>
              <li><a href="javascript:void(0)" [routerLink]="['/recycle-bin']">Recycle Bin</a></li>              
              <li class="divider"></li>
              <li><a href="javascript:void(0)">Settings</a></li>
              <li><a href="javascript:void(0)" [routerLink]="['/about']">About</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <spinner *ngIf="spinner"></spinner>
  <div class="{{ displayList ? 'container note animate' : 'container note grid-container animate'}}">
    <div *ngFor='let text of notes' class="{{ displayList ? 'panel panel-default ' + text.doc.color : 'panel panel-default grid-item ' + text.doc.color}}" #noteRow [attr.id]="text.doc._id">
      <div class="panel-body my-note module line-clamp">
        <p><strong>{{text.doc?.title}}</strong></p>
        <p> {{text.doc?.note}} </p>
      </div>
      <div class="{{ 'panel-footer ' + text.doc.color}}">
        <ul class="note-footer">
          <li class="dropup">
            <a class="btn btn-link btn-raised"
              title="Delete forever" data-target="#deleteNote" data-toggle="modal" (click)="setDeleteNote(text, noteRow)">
              <i class="fa fa-trash"></i>
            </a>
          </li>
          <li>
            <a class="btn btn-link btn-raised"
              title="Restore" (click)="restoreNote(text, noteRow)">
              <i class="fa fa-undo"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="modal fade" id="{{'note' + text.doc._id}}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
          <div class="{{'modal-content ' + text.doc.color}}">
            <div class="modal-header">
              <h4 class="modal-title">
                <p class=""><strong>{{text.doc.title}}</strong></p>
              </h4>
            </div>
            <div class="modal-body">
              <p class="edit-saved-textera">{{text.doc.note}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="deleteNote">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Delete note forever?</h4>
        </div>
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">CANCEL</button>
          <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" (click)="deleteNote()">DELETE</button>
        </div>
      </div>
    </div>
  </div>
  <simple-notifications [options]="notificationOptions"></simple-notifications>
  <div class="container empty-notes-container" *ngIf="emptyHtmlMsg">
    <div class="empty-notes-icon empty-bin"></div>
    <div class="empty-notes">No notes in Recycle Bin</div>
  </div>
</div>