<div class="">
  <div class="navbar navbar-default">
    <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;Notes</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>
  <div class="container">
      <div class="panel panel-default note-editor animated bounceInDown">
        <div class="panel-body">
          <div class="form-group label-floating" *ngIf="inputFocusClass">
             <input type="text" class="form-control" placeholder="Title" [(ngModel)]="draft.title" >
          </div>          
          <div class="form-group label-floating">
             <textarea class="form-control" #textarea autosize placeholder="Write a note" [(ngModel)]="draft.note" (focus)="_setInputFocus(true)"></textarea>
          </div>
          <div class="form-group" *ngIf="inputFocusClass">
            <button class="btn btn-primary btn-sm pull-right" (click)="saveNote($event, textarea)">Save</button>
          </div>
        </div>
      </div>
  </div>
  <spinner *ngIf="spinner"></spinner>
  <div class="{{ displayList ? 'container note animate' : 'container note grid-container animate'}}" [dragula]='"another-bag"' [dragulaModel]='notes'>
    <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 data-toggle="modal" [attr.data-target]="'#note' + text.doc._id" (click)="editModalNoteClick(text)">
        <div class="panel-body my-note module line-clamp">
          <p><strong>{{text.doc.title}}</strong></p>
          <p> {{text.doc.note}} </p>
        </div>
      </div>
      <div class="{{ 'panel-footer ' + text.doc.color}}">
        <ul class="note-footer">
          <li><a href="javascript:void(0)" class="btn btn-link btn-raised"
             title="Archive" (click)="makeArchive(text, noteRow)">
            <i class="fa fa-download"></i>        
          </a></li>
          <li class="dropup">
            <a data-target="#" class="btn btn-link btn-raised dropup"
              title="Color" data-toggle="dropdown">
              <i class="fa fa-th-large"></i>
            </a>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)" (click)="setNoteColor('label-default', text)" class="btn btn-default btn-fab-mini"><i class=""></i></a></li>
              <li><a href="javascript:void(0)" (click)="setNoteColor('label-primary', text)" class="btn btn-primary btn-fab-mini"><i class=""></i></a></li>
              <li><a href="javascript:void(0)" (click)="setNoteColor('label-success', text)" class="btn btn-success btn-fab-mini"><i class=""></i></a></li>
              <li><a href="javascript:void(0)" (click)="setNoteColor('label-info', text)" class="btn btn-info btn-fab-mini"><i class=""></i></a></li>
              <li><a href="javascript:void(0)" (click)="setNoteColor('label-warning', text)" class="btn btn-warning btn-fab-mini"><i class=""></i></a></li>
              <li><a href="javascript:void(0)" (click)="setNoteColor('label-danger', text)" class="btn btn-danger btn-fab-mini"><i class=""></i></a></li>
              <li><a href="javascript:void(0)" (click)="setNoteColor('label-darkgray', text)" class="btn btn-darkgray btn-fab-mini"><i class=""></i></a></li>
              <li><a href="javascript:void(0)" (click)="setNoteColor('label-primary-old', text)" class="btn btn-primary-old btn-fab-mini"><i class=""></i></a></li>              
            </ul>
          </li>
          <li><a href="javascript:void(0)" class="btn btn-link btn-raised"
             title="Delete" (click)="deleteNote(text, noteRow)">
            <i class="fa fa-trash"></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 edit-saved ' + text.doc.color}}">
            <div class="modal-header">
              <h4 class="modal-title">
                <div class="form-group label-floating">
                <input type="text" class="form-control edit-saved-input" placeholder="Title" [(ngModel)]="editNoteDraft.title" [value]="text.doc.title ? text.doc.title : ''" >
                </div>                
              </h4>
            </div>
            <div class="modal-body">
              <textarea class="form-control edit-saved-textera" #editSavedTextarea modaleditorautosize placeholder="Write a note" [(ngModel)]="editNoteDraft.note" [value]="text.doc?.note"></textarea>              
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" (click)="updateModalNote(text)">Done</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <simple-notifications [options]="notificationOptions"></simple-notifications>
  <div class="container empty-notes-container" *ngIf="emptyHtmlMsg">
    <h3 class="empty-notes-icon empty-notes-main"><i class="fa fa-file-text-o fa-5x"></i></h3>
    <div class="empty-notes">Notes that you add appear here</div>
  </div>
</div>
