<div class="new-note">
  <div class="new-note-container">
    <ul class='errors' ng-if="errors">
      <li ng-repeat="error in errors">{{error}}</li>
    </ul>

    <form class="form">
      <fieldset class="form-field">
        <label class="form-label" for="title">Title</label>
        <input class="form-input" name="title" ng-model="note.header" />
      </fieldset>

      <fieldset class="form-field">
        <label class="form-label" for="category">Category</label>
        <select name='category' ng-model='note.CategoryId' ng-options='category.id as category.name for category in categories'></select>
      </fieldset>

      <fieldset class="form-field">
        <label class="form-label" for="link">Link</label>
        <input class="form-input" name="link" ng-model="note.link" />
      </fieldset>

      <fieldset class="form-field">
        <label class="form-label" for="icon"><i class="icon {{note.icon}}"></i>Icon</label>
        <input class="form-input" name="icon" ng-model="note.icon" />
      </fieldset>

      <fieldset class="form-field">
        <label class="form-label" for="description">Description</label>
        <textarea class="form-input" name="description" ng-model="note.description" placeholder="A short description of this note"></textarea>
      </fieldset>

      <fieldset class="form-field">
        <label class="form-label" for="content">Content</label>
        <textarea class="form-input" name="Content"  ng-model="note.content" placeholder="The meat of your note"></textarea>
      </fieldset>

      <button class="btn" ng-click="updateNote(note)" ng-disabled="updating">{{updating ? 'Saving...' : 'Save'}}</button>
    </form>
  </div>
</div>
