div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controller="satis-dropdown" data-satis-dropdown-page-size-value=@page_size data-satis-dropdown-url-value=url data-satis-dropdown-url-params-value=(options[:url_params]||{}).to_json data-satis-dropdown-chain-to-value=@chain_to data-satis-dropdown-free-text-value=@free_text data-satis-dropdown-needs-exact-match-value="#{@needs_exact_match ? 'true' : 'false'}" data-satis-dropdown-is-multiple-value="#{options[:input_html][:multiple] || false}"
  - selection = [nil]
  - if options[:input_html][:value].present?
    - selection = options_for_select(options_array(options[:input_html][:value]))

  = form.select(attribute, selection, {}, options[:input_html].except(:multiple).reverse_merge(class: 'hidden', multiple: options[:input_html][:multiple] || false))

  .flex.flex-col
    div.hidden.py-1 data-satis-dropdown-target="pills"
    .flex.flex-col.items-center
      .w-full.sts-dropdown
        .h-12.p-1.flex.rounded
          .flex.flex-auto.flex-wrap
            / Input where you can search
            input.p-1.px-2.appearance-none.outline-none.w-full.sts-dropdown-input.text-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
          div
            / Reset button
            - unless @reset_button == false
              button.cursor-pointer.w-6.h-full.flex.items-center.text-gray-400.outline-none.focus:outline-none type="button" data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset focus->satis-dropdown#focus" tabindex="-1"
                i.fas.fa-xmark
          - unless @toggle_button == false
            .text-gray-300.w-8.py-1.pl-2.pr-1.flex.items-center.dark:border-gray-700
              / Up/down chevrons
              button.cursor-pointer.w-6.h-6.text-gray-600.outline-none.opacity-50.focus:outline-none type="button" data-action="click->satis-dropdown#toggleResultsList focus->satis-dropdown#focus" data-satis-dropdown-target="toggleButton" tabindex="-1"
                i.hidden.fas.fa-chevron-up
                i.fas.fa-chevron-down

    template data-satis-dropdown-target="selectedItemsTemplate"

    / Container for results
    .hidden.container.sts-dropdown-results.shadow.dark:text-gray-300.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
      .flex.flex-col.w-full data-satis-dropdown-target="items"
        - options[:collection]&.each do |item|
          - data_attrs = item.try(:third) ? item.third : {}
          div data-satis-dropdown-target="item" data-satis-dropdown-item-value=item.send(value_method) data-satis-dropdown-item-text=item.send(text_method) data-action="click->satis-dropdown#select" *data_attrs
            - if custom_item_html?
                = item_html(item)
            - else
              .cursor-pointer.w-full.sts-dropdown-results-items
                .flex.w-full.items-center.p-2.pl-2
                  .w-full.items-center.flex
                    .mx-2.-mt-1
                      span = item.send(text_method)


  template data-satis-dropdown-target="pillTemplate"
    span.inline-flex.items-center.rounded.bg-primary-200.px-2.py-1.text-xs.font-medium.text-gray-600.mr-1.mt-1 data-satis-dropdown-target="pill"
      button.inline-flex.items-center.justify-center.w-5.h-5.ml-1 data-action="click->satis-dropdown#removePill"
        svg.w-3.h-3 xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor"
          path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"