{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
<turbo-frame id="bookmark-labels-{{ .ID }}" class="group block mb-4">
<form action="{{ urlFor(`/bookmarks`, .ID, `update`) }}" method="post"
 data-controller="turbo-form">
  <input type="hidden" name="_to" value="{{ currentPath }}" />
  <button type="submit" class="hidden"></button>
  <div>
    {{- include "./labels" . -}}
    <div class="flex gap-2 items-center mt-2 print:hidden">
      <div class="relative flex-grow"
       data-controller="autocomplete"
       data-autocomplete-url-value="{{ urlFor(`/api/bookmarks/@complete?type=label`) }}"
       data-autocomplete-item-class="p-2 whitespace-nowrap hf:bg-primary hf:text-white cursor-pointer"
       data-autocomplete-selected-class="bg-primary text-white">
        <input type="text" name="add_labels" placeholder="{{ gettext(`Add a label`) }}"
         class="bg-transparent border-gray-300 border-b p-1 w-full"
         autocapitalize="off"
         data-turbo-empty-submit-end="1"
         data-autocomplete-target="input" />
        <input type="hidden" name="label_id" data-autocomplete-target="hidden"/>
        <ul hidden class="absolute z-50 border shadow bg-gray-50 min-w-full max-w-full max-h-48 overflow-y-auto rounded"
         data-autocomplete-target="results">
        </ul>
      </div>
      <button type="submit"
       class="bg-gray-200 text-white text-sm whitespace-nowrap p-1 rounded
       border border-transparent hf:border-btn-primary-hover
       group-hfw:bg-btn-primary"
      >{{ gettext("Add label") }}</button>
    </div>
  </div>
</form>
</turbo-frame>