{# tag_me/templates/tag_me/tag_me_select_search_bar_mobile.html #}
{% comment %}
  MOBILE SEARCH BAR ACTIONS - CONTEXT AWARE
  Shows ONE big, clear action button based on current state
  Priority: Creating > Can Add > Has Search > Has Selected Tags
{% endcomment %}
<!-- Context-Aware Action Button (Mobile) -->
<div class="tm:relative">
    <!-- PRIORITY 1: Loading/Creating Tag -->
    <div x-show="isCreatingTag"
         class="tm:inline-flex tm:items-center tm:px-2"
         x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 scale-90"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-90">
        <svg class="tm:animate-spin tm:h-6 tm:w-6 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>
    <!-- PRIORITY 2: Add Tag Button (when can add new tag) -->
    <button type="button"
            x-show="canAddTag && !isCreatingTag"
            x-transition:enter="transition ease-out duration-150"
            x-transition:enter-start="opacity-0 scale-90"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-90"
            @click.stop="openBottomSheet()"
            class="tm:inline-flex tm:items-center tm:justify-center tm:w-[44px] tm:h-[44px] tm:text-text-on-primary tm:bg-primary-base tm:rounded-lg tm:transition-all tm:duration-150 hover:tm:bg-primary-hover tm:active:scale-95 tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-focus-ring tm:focus:ring-offset-2 tm:focus:ring-offset-bg-base"
            aria-label="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.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
    </button>
    <!-- PRIORITY 3: Clear Search Button (when search has text) -->
    <button type="button"
            x-show="search.length > 0 && !canAddTag && !isCreatingTag"
            x-transition:enter="transition ease-out duration-150"
            x-transition:enter-start="opacity-0 scale-90"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-90"
            @click.stop="clearSearch()"
            class="tm:inline-flex tm:items-center tm:justify-center tm:w-[44px] tm:h-[44px] tm:text-text-secondary tm:bg-bg-hover tm:rounded-lg tm:transition-all tm:duration-150 hover:tm:bg-bg-hover hover:tm:text-text-primary tm:active:scale-95 tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-focus-ring tm:focus:ring-offset-2 tm:focus:ring-offset-bg-base"
            aria-label="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.5">
            <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>
    <!-- PRIORITY 4: Remove All Tags Button (when tags selected and no search) -->
    <button type="button"
            x-show="selectedTags.size > 0 && search.length === 0 && !canAddTag && !isCreatingTag"
            x-transition:enter="transition ease-out duration-150"
            x-transition:enter-start="opacity-0 scale-90"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-90"
            @click.stop="deselectAll()"
            class="tm:relative tm:inline-flex tm:items-center tm:justify-center tm:w-[44px] tm:h-[44px] tm:p-2 tm:text-text-secondary tm:bg-bg-hover tm:rounded-lg tm:transition-all tm:duration-150 hover:tm:bg-bg-hover hover:tm:text-text-primary tm:active:scale-95 tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-focus-ring tm:focus:ring-offset-2 tm:focus:ring-offset-bg-base"
            :aria-label="'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.5">
            <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>
        <!-- Badge showing count -->
        <span class="tm:absolute tm:-top-0.5 tm:-right-0.5 tm:inline-flex tm:items-center tm:justify-center tm:px-1.5 tm:py-0.5 tm:text-[10px] tm:font-bold tm:leading-none tm:text-text-on-primary tm:bg-primary-base tm:rounded-full tm:min-w-[1rem]"
              x-text="selectedTags.size"></span>
    </button>
</div>
{% comment %}
TEMPLATE MIGRATION NOTES - MOBILE SEARCH BAR
=============================================
Date: November 18, 2025
Migrated by: Claude

MAPPING DECISIONS:

LOADING SPINNER (Priority 1):
- text-indigo-500 dark:text-indigo-400 → text-primary-base (brand color)

ADD TAG BUTTON (Priority 2 - Primary Action):
- bg-indigo-600 → bg-primary-base (primary brand background)
- hover:bg-indigo-500 → hover:bg-primary-hover
- text-white → text-text-on-primary (white text on colored background)
- focus:ring-indigo-500 → focus:ring-focus-ring
- focus:ring-offset-white dark:focus:ring-offset-gray-800 → focus:ring-offset-bg-base

CLEAR SEARCH BUTTON (Priority 3 - Secondary Action):
- bg-gray-200 dark:bg-gray-700 → bg-bg-hover (elevated but not primary)
- text-gray-600 dark:text-gray-300 → text-text-secondary
- hover:bg-gray-300 dark:hover:bg-gray-600 → hover:bg-bg-hover (same, reinforces state)
- hover:text-gray-900 dark:hover:text-white → hover:text-text-primary

REMOVE ALL TAGS BUTTON (Priority 4 - Secondary Action):
- Same mapping as Clear Search button (consistent secondary action styling)
- Badge uses: bg-primary-base + text-text-on-primary (MD3 contrast pairing)

MOBILE-SPECIFIC PATTERNS:

1. TOUCH TARGETS:
   - All buttons: w-[44px] h-[44px] (meets 44px minimum touch target)
   - Larger than desktop (desktop: p-2, mobile: explicit 44px)

2. BUTTON HIERARCHY:
   - Primary action (Add): Full primary color bg-primary-base
   - Secondary actions (Clear, Remove): Subtle bg-bg-hover
   - Visual weight difference is more pronounced on mobile

3. ACTIVE STATE:
   - active:scale-95 - Provides tactile feedback on touch
   - Not present on desktop (mouse hover is sufficient)

4. TRANSITIONS:
   - Scale transitions (opacity-0 scale-90) for appearing/disappearing
   - Smoother than fade alone for single-button context switching

5. CONTEXT-AWARE PRIORITY:
   Priority 1: Loading (user feedback during async)
   Priority 2: Add (primary action when available)
   Priority 3: Clear (when user has typed but can't add)
   Priority 4: Remove (when tags selected but no search)

DESIGN PATTERN NOTES:

Mobile uses STRONGER visual differentiation than desktop:
- Desktop: All buttons use subtle text colors with shared hover bg
- Mobile: Primary gets full color background, secondary gets bg tint
- Rationale: Single button at a time = needs clear affordance
- Larger touch target = more visual weight = supports stronger styling

GAPS / CONSIDERATIONS:
- bg-hover token works well for secondary mobile buttons
- Consider: --color-button-secondary-bg if you want different treatment
- Current mapping: Secondary buttons use same surface level as hover states
- This works because they're active elements, not passive surfaces

ALL CHANGES: Only class="" attributes modified. No Alpine.js, HTML structure, or other attributes changed.
{% endcomment %}