{# tag_me/templates/tag_me/tag_me_select_search_bar_desktop.html #}
{% comment %}
  DESKTOP INLINE ACTION BUTTONS
  Icon-only buttons that appear conditionally based on state
  Always visible when relevant (no menu)
{% endcomment %}
<!-- Quick Actions (Desktop Only - Always Visible When Relevant) -->
<div class="tm:flex tm:items-center tm:gap-1">
    <!-- Add Button (Desktop) -->
    <button type="button"
            x-show="canAddTag && !isCreatingTag"
            x-transition.opacity.duration.150ms
            @click.stop="createNewTag()"
            class="tm:relative tm:p-2 tm:text-primary-base tm:rounded tm:transition-colors tm:duration-150 hover:tm:bg-bg-hover hover:tm:text-primary-hover tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-focus-ring tm:focus:ring-offset-1 tm:focus:ring-offset-bg-base"
            title="Add new tag">
        <svg xmlns="http://www.w3.org/2000/svg"
             class="tm:h-5 tm:w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
             stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
    </button>
    <!-- Loading Spinner (Desktop) -->
    <div x-show="isCreatingTag" class="tm:inline-flex tm:items-center tm:px-2">
        <svg class="tm:animate-spin tm:h-5 tm:w-5 tm:text-primary-base"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24">
            <circle class="tm:opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="tm:opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
            </path>
        </svg>
    </div>
    <!-- Clear Search Button -->
    <button type="button"
            x-show="search.length > 0 && !isCreatingTag"
            x-transition.opacity.duration.150ms
            @click.stop="clearSearch()"
            class="tm:relative tm:p-2 tm:text-text-secondary tm:rounded tm:transition-colors tm:duration-150 hover:tm:text-text-primary hover:tm:bg-bg-hover tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-focus-ring tm:focus:ring-offset-1 tm:focus:ring-offset-bg-base"
            title="Clear search">
        <svg xmlns="http://www.w3.org/2000/svg"
             class="tm:h-5 tm:w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
             stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="m6 6 12 12m3-6a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
    </button>
    <!-- Remove All Tags Button -->
    <button type="button"
            x-show="selectedTags.size > 0 && !isCreatingTag"
            x-transition.opacity.duration.150ms
            @click.stop="deselectAll()"
            class="tm:relative tm:p-2 tm:text-text-secondary tm:rounded tm:transition-colors tm:duration-150 hover:tm:text-text-primary hover:tm:bg-bg-hover tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-focus-ring tm:focus:ring-offset-1 tm:focus:ring-offset-bg-base"
            :title="'Remove ' + selectedTags.size + ' tags'">
        <svg xmlns="http://www.w3.org/2000/svg"
             class="tm:h-5 tm:w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
             stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z" />
        </svg>
        <span class="tm:absolute tm:-top-1 tm:-right-1 tm:inline-flex tm:items-center tm:justify-center tm:px-1 tm:py-0.5 tm:text-[10px] tm:font-bold tm:text-text-on-primary tm:bg-primary-base tm:rounded-full tm:min-w-[0.875rem] tm:h-3.5"
              x-text="selectedTags.size"></span>
    </button>
    <!-- Help Icon (Desktop) -->
    <a x-show="helpUrl"
       :href="helpUrl"
       target="_blank"
       class="tm:relative tm:p-2 tm:text-text-secondary tm:rounded tm:transition-colors tm:duration-150 hover:tm:text-text-primary hover:tm:bg-bg-hover tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-focus-ring tm:focus:ring-offset-1 tm:focus:ring-offset-bg-base"
       title="Help">
        <svg xmlns="http://www.w3.org/2000/svg"
             class="tm:h-5 tm:w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
             stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
        </svg>
    </a>
    <!-- Management Icon (Desktop) -->
    <a x-show="mgmtUrl"
       :href="mgmtUrl"
       class="tm:relative tm:p-2 tm:text-text-secondary tm:rounded tm:transition-colors tm:duration-150 hover:tm:text-text-primary hover:tm:bg-bg-hover tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-focus-ring tm:focus:ring-offset-1 tm:focus:ring-offset-bg-base"
       target="_blank"
       title="Tag Management">
        <svg xmlns="http://www.w3.org/2000/svg"
             class="tm:h-5 tm:w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
             stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
        </svg>
    </a>
</div>
{% comment %}
TEMPLATE MIGRATION NOTES - DESKTOP SEARCH BAR
==============================================
Date: November 18, 2025
Migrated by: Claude
MAPPING DECISIONS:
PRIMARY ACTION (Add Button):
- text-indigo-500 dark:text-indigo-400 → text-primary-base (brand color for primary actions)
- hover:text-indigo-600 dark:hover:text-indigo-300 → hover:text-primary-hover
- hover:bg-gray-100 dark:hover:bg-white/10 → hover:bg-bg-hover
- focus:ring-indigo-500 → focus:ring-focus-ring
- focus:ring-offset-white dark:focus:ring-offset-gray-900 → focus:ring-offset-bg-base
SECONDARY ACTIONS (Clear, Remove, Help, Manage):
- text-gray-500 dark:text-gray-400 → text-text-secondary (muted for less emphasis)
- hover:text-gray-700 dark:hover:text-gray-300 → hover:text-text-primary (darkens on hover)
- hover:bg-gray-100 dark:hover:bg-white/10 → hover:bg-bg-hover
- Same focus ring pattern as primary
LOADING SPINNER:
- text-indigo-500 dark:text-indigo-400 → text-primary-base (brand color)
BADGE (Count indicator):
- bg-indigo-500 dark:bg-indigo-500 → bg-primary-base (brand color background)
- text-white → text-text-on-primary (ensures contrast on colored background)
DESIGN PATTERN NOTES:
1. PRIMARY vs ON-PRIMARY:
- text-primary-base: Primary color text/icons on regular backgrounds
- text-text-on-primary: White/high-contrast text ON primary-colored backgrounds
- Example: Badge uses text-on-primary because it has bg-primary-base
- This is MD3's contrast pairing system for accessibility
2. BUTTON HIERARCHY:
- Primary action (Add): Uses primary-base color for prominence
- Secondary actions: Use text-secondary for less emphasis
- All share same hover pattern (bg-hover) for consistency
3. INTERACTION STATES:
- Default: Primary uses primary-base, secondary uses text-secondary
- Hover: Primary darkens to primary-hover, secondary darkens to text-primary
- Background: All use same bg-hover on hover for consistency
- Focus: All use same focus ring pattern
GAPS / CONSIDERATIONS:
- None identified - all states map cleanly to existing semantic tokens
- Button color hierarchy works well with current token set
- MD3 contrast pairing (on-primary) ensures badge accessibility
ALL CHANGES: Only class="" attributes modified. No Alpine.js, HTML structure, or other attributes changed.
{% endcomment %}