<form id="bookmarkForm" name="vm.bookmarkForm" novalidate>
  <button type="submit" class="d-none" tabindex="-1"></button>
  <div class="header-panel clearfix">
    <h2 data-ng-if="vm.bookmark.displayUpdateForm">{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_Title_Edit)
      }}</h2>
    <h2 data-ng-if="!vm.bookmark.displayUpdateForm">{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_Title_Add)
      }}</h2>
    <button class="btn btn-icon btn-close"
      title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_Close_Label) }}"
      data-ng-click="vm.events.bookmarkPanel_Close_Click()" tabindex="1000">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
      <span class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Button_Close_Label) }}</span>
    </button>
  </div>
  <div class="form-group">
    <label for="bookmarkTitle" class="sr-only">{{
      vm.platform.GetConstant(vm.globals.Constants.Bookmark_TitleField_Label) }}</label>
    <input type="text" name="bookmarkTitle" data-ng-model="vm.bookmark.current.title" class="form-control"
      data-ng-class="{ 'focused': vm.bookmark.displayUpdateForm }" maxlength="255" autocomplete="off"
      placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_TitleField_Label) }}">
  </div>
  <div class="form-group" data-ng-class="{ 
      'btn-icon-container': vm.utility.IsMobilePlatform(vm.platformName) && vm.bookmarkForm.bookmarkUrl.$dirty,
      'has-error': vm.bookmarkForm.bookmarkUrl.$invalid
    }">
    <label for="bookmarkUrl" class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_UrlField_Label)
      }}</label>
    <input type="text" class="form-control" name="bookmarkUrl" placeholder="URL" data-ng-model="vm.bookmark.current.url"
      data-ng-change="vm.events.bookmarkForm_BookmarkUrl_Change()" maxlength="2000" autocapitalize="off"
      autocorrect="off" spellcheck="false" required
      placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_UrlField_Label) }}">
    <button class="btn btn-icon" data-ng-if="vm.utility.IsMobilePlatform(vm.platformName)"
      data-ng-show="vm.bookmark.current.url && vm.bookmarkForm.bookmarkUrl.$dirty"
      title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_UpdateBookmarkProperties_Label) }}"
      data-ng-click="vm.events.bookmarkForm_GetMetadata_Click()">
      <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
    </button>
    <div class="validation" data-ng-if="vm.bookmark.current && vm.bookmarkForm.bookmarkUrl.$error.required">
      {{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_BookmarkForm_Required_Label) }}
    </div>
    <div class="validation" data-ng-if="vm.bookmark.current && vm.bookmarkForm.bookmarkUrl.$error.Exists">
      {{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_BookmarkForm_Exists_Label) }}
    </div>
  </div>
  <div class="form-group textarea-container">
    <label for="bookmarkDescription" class="sr-only">{{
      vm.platform.GetConstant(vm.globals.Constants.Bookmark_DescriptionField_Label) }}</label>
    <textarea class="form-control" name="bookmarkDescription" rows="3" data-ng-model="vm.bookmark.current.description"
      data-ng-keydown="vm.events.bookmarkForm_BookmarkDescription_Change()"
      placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_DescriptionField_Label) }}"></textarea>
  </div>
  <div class="mobile-landscape">
    <div class="form-group tags-input-container btn-icon-container">
      <label for="bookmarkTags" class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_TagsField_Label)
      }}</label>
      <input type="text" class="form-control" name="bookmarkTags"
        placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_TagsField_Description) }}…" maxlength="50"
        data-ng-model="vm.bookmark.tagText" data-ng-change="vm.events.bookmarkForm_BookmarkTags_Change()"
        data-ng-keydown="vm.events.bookmarkForm_BookmarkTags_KeyDown($event)" data-ng-trim="false" autocapitalize="off"
        autocomplete="off" autocorrect="off">
      <div class="lookahead-container">
        <span class="measure" data-ng-bind-html="vm.bookmark.tagTextMeasure"></span>
        <span class="lookahead" data-ng-bind-html="vm.bookmark.tagLookahead" data-ng-show="vm.bookmark.tagLookahead"
          data-ng-click="vm.events.bookmarkForm_BookmarkTags_Lookahead_Click ()"></span>
      </div>
      <button class="btn btn-icon" data-ng-show="vm.bookmark.current.tags.length > 0"
        title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_ClearTags_Label) }}"
        data-ng-click="vm.events.bookmarkForm_BookmarkTags_ClearAll_Click()">
        <i class="fas fa-trash-alt" aria-hidden="true"></i>
      </button>
    </div>
    <div class="form-group tags-container clearfix" data-ng-show="vm.bookmark.current.tags.length > 0">
      <button class="badge badge-pill" data-ng-repeat="tag in vm.bookmark.current.tags track by $index"
        data-ng-click="vm.events.bookmarkForm_RemoveTag_Click(tag)">
        <span>{{ tag }}</span>
        <i class="fas fa-times" aria-hidden="true"></i>
        <span class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Button_DeleteTag_Label) }}</span>
      </button>
    </div>
  </div>
  <div class="buttons">
    <button type="button" class="btn btn-default" data-ng-class="{ 'focused': !vm.bookmark.displayUpdateForm }"
      data-ng-if="!vm.bookmark.displayUpdateForm"
      data-ng-disabled="(vm.bookmark.addButtonDisabledUntilEditForm && !vm.bookmarkForm.$dirty) || vm.bookmarkForm.$invalid"
      data-ng-click="vm.events.bookmarkForm_CreateBookmark_Click()">
      {{ vm.platform.GetConstant(vm.globals.Constants.Button_AddBookmark_Label) }}
    </button>
    <button type="button" class="btn btn-default" data-ng-if="vm.bookmark.displayUpdateForm"
      data-ng-disabled="!vm.bookmarkForm.$dirty || vm.bookmarkForm.$invalid"
      data-ng-click="vm.events.bookmarkForm_UpdateBookmark_Click()">
      {{ vm.platform.GetConstant(vm.globals.Constants.Button_Update_Label) }}
    </button>
    <button type="button" class="btn btn-default"
      data-ng-if="vm.utility.IsMobilePlatform(vm.platformName) && vm.bookmark.displayUpdateForm"
      data-ng-click="vm.events.bookmarkForm_ShareBookmark_Click(vm.bookmark.current)">
      {{ vm.platform.GetConstant(vm.globals.Constants.Button_Share_Label) }}
    </button>
    <button type="button" class="btn btn-default btn-delete-bookmark" data-ng-if="vm.bookmark.displayUpdateForm"
      data-ng-click="vm.events.bookmarkForm_DeleteBookmark_Click()">
      {{ vm.platform.GetConstant(vm.globals.Constants.Button_Delete_Label) }}
    </button>
  </div>
</form>