{# tag_me/templates/tag_me/tag_me_bottom_sheet.html #}
{% comment %}
  MOBILE BOTTOM SHEET - Add Tag Modal
  Slides up from bottom when user wants to create a new tag
  Has backdrop, drag handle, pre-filled input, and actions
{% endcomment %}
<!-- Bottom Sheet Backdrop -->
<div x-show="bottomSheetShow"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     @click="closeBottomSheet()"
     class="fixed inset-0 bg-black/50 dark:bg-black/50 z-[70]"
     style="display: none"
     x-cloak></div>
<!-- Bottom Sheet Panel -->
<div x-show="bottomSheetShow"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="translate-y-full"
     x-transition:enter-end="translate-y-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="translate-y-0"
     x-transition:leave-end="translate-y-full"
     @click.outside="closeBottomSheet()"
     class="fixed bottom-0 left-0 right-0 z-[80] bg-white dark:bg-gray-800 rounded-t-2xl shadow-2xl border-t border-gray-200 dark:border-white/10 max-h-[80vh] overflow-hidden"
     style="display: none"
     x-cloak>
    <!-- Drag Handle -->
    <div class="flex justify-center pt-3 pb-2">
        <div class="w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
    </div>
    <!-- Content -->
    <div class="px-6 pb-8 overflow-y-auto max-h-[calc(80vh-2rem)]">
        <!-- Header -->
        <div class="text-center mb-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Add New Tag</h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Create and add to your library</p>
        </div>
        <!-- Form -->
        <div class="space-y-4">
            <!-- Tag Name Input -->
            <div>
                <label for="bottom-sheet-tag-name-{{ name }}"
                       class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tag Name</label>
                <input type="text"
                       id="bottom-sheet-tag-name-{{ name }}"
                       x-model="search"
                       @keydown.enter="createNewTag()"
                       @keydown.escape="closeBottomSheet()"
                       x-init="$watch('bottomSheetShow', value => { if(value) setTimeout(() => $el.focus(), 100) })"
                       class="block w-full rounded-lg bg-gray-50 dark:bg-white/5 px-4 py-3 text-base text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-600 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition-colors duration-150"
                       placeholder="Enter tag name...">
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-500">
                    This tag will be added to your library<span x-show="autoSelectNewTags">and automatically selected</span>.
                </p>
            </div>
            <!-- Error Display -->
            <div x-show="tagCreationError"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 -translate-y-2"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 class="p-4 bg-red-50 dark:bg-red-900/50 border border-red-200 dark:border-red-500/50 rounded-lg">
                <div class="flex items-start">
                    <svg class="h-5 w-5 text-red-500 dark:text-red-400 mt-0.5 mr-3 flex-shrink-0"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 20 20"
                         fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                    </svg>
                    <div class="flex-1">
                        <h4 class="text-sm font-medium text-red-800 dark:text-red-300">Error creating tag</h4>
                        <p class="mt-1 text-sm text-red-700 dark:text-red-400"
                           x-text="tagCreationError"></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Actions -->
        <div class="flex gap-3 mt-8">
            <!-- Cancel Button -->
            <button type="button"
                    @click="closeBottomSheet()"
                    :disabled="isCreatingTag"
                    class="flex-1 min-h-[48px] px-4 py-3 text-base font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-lg transition-all duration-150 hover:bg-gray-300 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
                Cancel
            </button>
            <!-- Create Button -->
            <button type="button"
                    @click="createNewTag()"
                    :disabled="isCreatingTag || search.trim().length === 0"
                    class="flex-1 min-h-[48px] px-4 py-3 text-base font-medium text-white bg-indigo-600 rounded-lg transition-all duration-150 hover:bg-indigo-500 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
                <span x-show="!isCreatingTag">Create Tag</span>
                <span x-show="isCreatingTag"
                      class="inline-flex items-center justify-center">
                    <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
                         viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="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>
                    Creating...
                </span>
            </button>
        </div>
    </div>
</div>