{# tag_me/templates/tag_me/tag_me_select.html #}
<!-- Main Container -->
<div id='tag-me-select-container-{{ name }}'
     x-data="alpineTagMeMultiSelect({ addTagURL: '{{ add_tag_url }}', permittedToAddTags: {{ permitted_to_add_tags }}, allowMultiple: {{ multiple|yesno:'true,false' }}, autoSelectNewTags: {{ auto_select_new_tags|yesno:'true,false' }}, displayNumberSelected: {{ display_number_selected }}, choices: {{ choices|safe }}, selected: {{ values|safe }}, helpUrl: '{{ help_url|default:"" }}', mgmtUrl: '{{ mgmt_url|default:"" }}' })"
     x-on:click.outside="close()"
     x-on:keydown.prevent.stop.escape="close()"
     x-id="['search-menu-dropdown']"
     role="combobox"
     aria-label="Tag selection"
     :aria-expanded="show"
     class="tm-container">
    <!-- Hidden Input for Form Submission -->
    <input type="hidden" name="{{ name }}" x-model="formValue">
    <!-- Widget Container -->
    <div id="tag-me-select-{{ name }}" class="tm-inner-container">
        <div class="tm-flex-container">
            <!-- Selected Tags Display -->
            <div class="tm-w-full">
                <div class="tm-selected-container">
                    <!-- Tags List + Toggle Button -->
                    <div class="tm-selected-tags-wrapper" @click="toggle()">
                        <!-- Display Selected Tags (up to displayNumberSelected) -->
                        <template x-for="tagName in displayedSelected" :key="tagName">
                            <div class="tm-tag-pill" role="option" aria-selected="true" @click.stop>
                                <div x-text="tagName"
                                     class="tm-text-xs lg:tm-text-base tm-font-normal tm-leading-none tm-max-w-full tm-flex-initial tm-mr-2">
                                </div>
                                <button type="button"
                                        x-on:click.stop="removeTag(tagName)"
                                        class="tm-tag-remove-btn"
                                        :aria-label="'Remove tag: ' + tagName">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="tm-h-4 tm-w-4"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor"
                                         stroke-width="2"
                                         aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                        </template>
                        <!-- "More" Indicator -->
                        <div x-show="overflowCount > 0" class="tm-more-indicator">
                            <div class="tm-text-xs lg:tm-text-base tm-font-normal tm-leading-none tm-max-w-full tm-flex-initial">
                                <span class="tm-more-badge">
                                    <span x-text="overflowCount"></span>
                                </span>
                                more selected
                            </div>
                        </div>
                        <!-- Placeholder Text -->
                        <div x-show="selectedTags.size === 0" class="tm-flex-1">
                            <p class="tm-placeholder">Select Tags</p>
                        </div>
                    </div>
                    <!-- Dropdown Toggle Button -->
                    <div class="tm-toggle-wrapper">
                        <button type="button"
                                x-on:click="toggle()"
                                class="tm-toggle-btn"
                                :aria-expanded="show"
                                aria-controls="tag-me-select-{{ name }}"
                                aria-label="Toggle dropdown menu">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 class="tm-toggle-icon"
                                 x-bind:style="show ? 'transform: rotate(180deg)' : 'transform: rotate(0deg)'"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="currentColor"
                                 stroke-width="2"
                                 aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            <!-- Dropdown Container -->
            <div class="tm-w-full">
                <div x-show="show"
                     x-trap.inert.noscroll="show"
                     x-transition.scale.origin.top.duration.200ms
                     class="tm-dropdown">
                    <div class="tm-flex tm-flex-col tm-w-full">
                        <!-- Search Section -->
                        <div class="tm-search-section">
                            <div class="tm-search-wrapper">
                                <!-- Search Icon -->
                                <div class="tm-search-icon-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="tm-search-icon"
                                         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>
                                <!-- Search Input -->
                                <input id="search-{{ name }}"
                                       type="text"
                                       name="search-{{ name }}"
                                       autocomplete="off"
                                       x-model.debounce.300ms="search"
                                       @keydown.backspace="if($event.target.value === '') deselectAll()"
                                       @keydown.arrow-down.prevent="navigateDown()"
                                       @keydown.arrow-up.prevent="navigateUp()"
                                       @keydown.enter.prevent="selectFocused()"
                                       class="tm-search-input"
                                       placeholder="Search tags..."
                                       role="searchbox"
                                       aria-label="Search available tags"
                                       :aria-expanded="show">
                                <!-- Search Bar Menu (Add/Clear/Remove buttons) -->
                                <div class="tm-menu-button-wrapper">{% include "tag_me/tag_me_select_search_bar_menu.html" %}</div>
                            </div>
                        </div>
                        <!-- Options List -->
                        <ul role="listbox"
                            tabindex="0"
                            x-show="!menuShow"
                            x-transition.slide.down.duration.300ms
                            x-cloak
                            class="tm-options-list">
                            <!-- Existing Tags -->
                            <template x-for="(tagName, index) in filteredTags" :key="tagName">
                                <li role="option"
                                    :aria-selected="isSelected(tagName)"
                                    :class="isFocused(tagName) ? 'tm-option-focused' : ''"
                                    class="tm-option-item">
                                    <div x-bind:class="isSelected(tagName) ? 'tm-option-content-selected' : ''"
                                         @click="toggleTag(tagName)"
                                         class="tm-option-content">
                                        <div x-bind:class="isSelected(tagName) ? 'tm-option-inner-selected' : ''"
                                             class="tm-option-inner">
                                            <div class="tm-option-text-wrapper">
                                                <div x-text="tagName" class="tm-option-text"></div>
                                                <!-- Checkmark for Selected -->
                                                <span class="tm-option-checkmark" x-show="isSelected(tagName)">
                                                    <svg class="tm-checkmark-icon"
                                                         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>