<ul uk-accordion="multiple: true">
  <li class="uk-open">
    <a class="uk-accordion-title" href="#">
      {{t "alexandria.document-details.tags.title"}}
    </a>

    <div class="uk-accordion-content">
      {{#if this.tags.length}}
        <div class="uk-margin-bottom">
          {{#each this.tags as |tag|}}
            <span
              class="tag uk-text-small {{if tag.selectedByAll 'tag--active'}}"
              data-test-tag={{tag.id}}
            >
              {{tag.emberModel.name}}
              <button
                type="button"
                uk-close
                {{set-style color=(if tag.selectedByAll "white" "black")}}
                {{on "click" (fn this.removeTag tag)}}
              ></button>
            </span>
          {{/each}}
        </div>
      {{/if}}

      <form class="uk-flex" {{on "submit" this.addTagFromForm}}>
        <input
          class="uk-input uk-form-small uk-width-1-2 uk-margin-small-right"
          autocomplete="off"
          name="tag"
          type="text"
          value={{this.tagValue}}
          aria-label="Tag value"
          {{on "input" (perform this.onInput)}}
          data-test-tag-input
        />
        <button
          class="uk-button uk-button-primary uk-button-small uk-width-1-2"
          type="submit"
          data-test-tag-add
        >
          {{t "alexandria.document-details.tags.add"}}
        </button>
      </form>

      {{#if this.suggestedTags.isLoading}}
        <UkSpinner />
      {{else}}
        <div class="uk-margin-small-top">
          {{#each this.suggestedTags.value as |tag|}}
            <a
              href="#"
              class="tag uk-text-small"
              {{on "click" (fn this.addTagSuggestion tag)}}
              data-test-tag-existing={{tag.id}}
            >
              {{tag.name}}
            </a>
          {{/each}}
        </div>
      {{/if}}
    </div>
  </li>
</ul>