<!-- Define component with preselected options -->
{# elementId must be the same as select id #}
<script>
function getCookie(name) {
  var cookieValue = null;
  if (document.cookie && document.cookie != '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) == (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}
</script>
<div
  id='tag-me-select-container-{{ name }}'
  x-data="alpineTagMeMultiSelect(
  {
  addTagURL: '{{ add_tag_url }}',
  elementId: 'id_{{ name }}',
  permittedToAddTags: {{ permitted_to_add_tags }},
  allowMultipleSelect: {{ allow_multiple_select }},
  autoSelectNewTags: {{ auto_select_new_tags }},
  search:'',
  selected: {{ values }},
  })"
  x-on:keydown.prevent.stop.alt="close()"
  x-on:click.outside="close()"
  x-on:keydown.prevent.stop.excape="close()"
  tabindex=0
  class="w-full"

>
  <!-- Select Options -->
  <select
    id='id_{{ name }}'
    name='{{ name }}'
    x-bind:value="selectedValues()"
    class="hidden"
  >
    {% for tag in choices %}
    <option
      value='{{ tag }}'
      data-search='{{ tag }}'
    >
      {{ tag }}
    </option>
    {% endfor %}
  </select>

  <!-- original code by https://github.com/alexpechkarev/alpinejs-multiselect/ -->

  <div 
    id="tag-me-select-{{ name }}"
    class="w-full flex flex-col items-center mx-auto"
  >

    <!-- Selected Tags -->
    <input
      name="js_{{ name }}[]"
      type="hidden"
      x-bind:value="selectedValues()"
    >
    <div
      class="inline-block relative w-full"
    >
      <div
        class="flex flex-col items-center relative"
      >
        <!-- Selected elements container -->
        <div class="w-full">
          <div class="my-2 p-1 flex border border-gray-200 bg-white rounded-md">
            <div
              x-on:click="toggle()"
              class="flex flex-auto flex-wrap"
            >
              <!-- iterating over selected elements -->
              <template
                x-for="(option,index) in selectedElms"
                :key="option.value"
              >
                <div
                  x-show="index < {{  display_number_selected }}"
                  class="flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full text-indigo-700 bg-indigo-100 border border-indigo-300 "
                >
                  <div
                    x-model="selectedElms[option]"
                    x-text="option.text"
                    class="text-xs font-normal leading-none max-w-full flex-initial"
                  >

                  </div>
                  <div class="flex flex-auto flex-row-reverse">
                    <div
                      x-on:click.stop="remove(index,option)"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6 ml-2"
                        fill="none"
                        viewBox="0 0 24 24" stroke="currentColor"
                        stroke-width="2"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                        ></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </template>
              <!-- More than display number selected -->
              <div
                x-show="selectedElms.length > {{  display_number_selected }}"
                class="flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full text-indigo-700 bg-indigo-100 border border-indigo-300 "
              >
                <div
                  class="text-xs font-normal h-6 flex justify-center items-center leading-none max-w-full flex-initial"
                >
                  <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-indigo-200 text-pink-800 mr-2"
                  >
                    <span
                      x-text="selectedElms.length -2"
                    >
                    </span>
                  </span>
                  more selected
                </div>
              </div>
              <!-- None items selected -->
              <div
                x-show="selectedElms.length == 0"
                class="flex-1">
                <p
                  class="cursor-pointer bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-400"
                >
                  Select Tags
                </p>
              </div>
            </div>
            <!-- Drop down toggle with icons-->
            <div
              class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200"
            >
              <button
                type="button"
                x-on:click="toggle()"
                class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none"
              >
                <svg
                  x-show="!isOpen()"
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-4 w-4" fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M19 9l-7 7-7-7"
                  >
                  </path>
                </svg>
                <svg
                  x-show="isOpen()"
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-4 w-4"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M5 15l7-7 7 7"
                  >
                  </path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <!-- Dropdown container -->
        <div class="w-full">
          <div
            x-show.transition.origin.top="isOpen()"
            x-trap="isOpen()"
            class="absolute shadow-lg top-100 bg-white z-40 w-full lef-0 rounded max-h-80"
          >
            <div class="flex flex-col w-full">

              <div class="px-2 py-4 border-b-2">
                <!-- Search input-->
                <div class="mt-1 relative rounded-md shadow-sm">
                  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5 text-gray-400"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                      ></path>
                    </svg>
                  </div>
                  <input
                    id="search-{{ name }}"
                    type="text"
                    name="search-{{ name }}"
                    autocomplete="off"
                    x-model.debounce.750ms="search"
                    @keyup.escape.prevent.stop="clearSearch()"
                    @keyup.delete.prevent.stop="deselectTag()"
                    class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 sm:text-sm border border-indigo-300 rounded-md h-10"
                    placeholder=""
                  >
                  <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                    <kbd 
                      x-show="canAddNewTag && permittedToAddTags" 
                      x-on:click="createNewTag()"
                      class="inline-flex items-center border border-gray-200 rounded px-2 text-sm font-sans font-medium text-gray-400 mr-2"
                    > 
                      Add 
                    </kbd> 
                    <kbd 
                      x-on:click="clearSearch()"
                      class="inline-flex items-center border border-gray-200 rounded px-2 text-sm font-sans font-medium text-gray-400 mr-2"  
                    >
                      Clear
                    </kbd>
                    <kbd  
                      x-on:click="deselectTag()"
                      class="inline-flex items-center border border-gray-200 rounded px-2  text-sm font-sans font-medium text-gray-400"
                    >
                      Remove
                    </kbd>
                  </div>
                </div>
              </div>
              <!-- Options container -->
              <ul 
                tabindex="-1" 
                role="listbox" 
                @keyup.delete="deselectTag()"
                class="z-10 mt-0 w-full bg-white shadow-lg max-h-80 rounded-md py-0 text-base ring-1 ring-black ring-opacity-5 focus:outline-none  overflow-y-auto sm:text-sm"
              >
                <template 
                  x-for="(option,index) in options" 
                  :key="option.text">
                  <li 
                    role="option"
                    class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-3">
                    <div 
                      x-bind:class="option.selected ? 'bg-indigo-100' : ''"
                      @click="select(index,$event)"
                      class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-slate-100">
                      <div 
                        x-bind:class="option.selected ? 'border-indigo-600' : ''"
                        class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                        <div class="w-full items-center flex">
                          <div 
                            x-model="option"
                            x-text="option.text"
                            class="mx-2 leading-6">
                          </div>
                          <span
                            class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
                            x-show="option.selected">

                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 20 20" fill="currentColor"
                              aria-hidden="true">
                              <path fill-rule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                            </svg>
                          </span>
                        </div>
                      </div>
                    </div>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
