{# Container for the tags partial, needed for HTMX swapping #}
<div id="tags-container" class="flex w-full flex-wrap justify-center items-center animate-fadeIn space-x-2">

    {# Display Existing Tags #}
    {% for t in tags %}
    <div data-te-chip-init data-te-ripple-init
        class="[word-wrap: break-word] my-1 flex h-8 cursor-pointer items-center justify-between rounded-full border border-gray-300 bg-gray-100 py-0 px-3 text-sm font-normal text-gray-700 shadow-none transition-opacity duration-300 ease-linear hover:border-gray-400 hover:shadow-sm dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-200"
        data-te-ripple-color="dark">
        {# Tag Name (Clickable to filter) #}
        <span class="pr-2" hx-get="{{ url_for('tags.goto_tag') }}"
            hx-vals='{"filter": "{{ t.tag_filter }}", "person_id": "{{ person_id | default("", true) }}"}'
            hx-target="#container" hx-push-url="true">{{ t.tag_name }}</span>

        {# Delete Button #}
        <span
            class="ml-1 cursor-pointer text-gray-400 hover:text-gray-600 dark:text-neutral-400 dark:hover:text-neutral-100"
            hx-delete="{{ url_for('tags.delete_tag', tag_id=t.tag_id) }}" hx-target="#tags-container" {# Target the
            container to refresh the list #} hx-swap="outerHTML" {# Replace the whole container #}
            hx-confirm="Are you sure you want to delete the '{{ t.tag_name }}' tag?"
            hx-vals='{"person_id": "{{ person_id | default("", true) }}", "current_filter": "{{ request.query_string | default("", true) }}"}'>
            {# Pass context if needed by backend #}
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="h-3 w-3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </span>
    </div>
    {% endfor %}

    {# Add Tag Section - Initially Hidden Button, reveals Form #}
    <div id="add-tag-section" class="my-1">
        {# Show Add Button #}
        <button id="show-add-tag-form-btn"
            class="inline-block rounded-full bg-blue-500 p-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-600 hover:shadow-lg focus:bg-blue-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-700 active:shadow-lg"
            _="on click toggle .hidden on #add-tag-form then toggle .hidden on me">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-4 h-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
        </button>

        {# Add Tag Form (Initially Hidden) #}
        <form id="add-tag-form" class="hidden flex items-center space-x-1" hx-post="{{ url_for('tags.add_tag') }}"
            hx-target="#tags-container" {# Target the container to refresh the list #} hx-swap="outerHTML" {# Replace
            the whole container #}
            _="on htmx:afterRequest toggle .hidden on #show-add-tag-form-btn then toggle .hidden on me then set me.tag_name.value to ''">
            {# Hide form, show button, clear input after submit #}

            {% if person_id %}
            <input type="hidden" name="person_id" value="{{ person_id }}">
            {% endif %}
            <input type="hidden" name="current_filter" value="{{ request.query_string.decode() | default('', true) }}">
            {# Pass
            context
            if needed #}

            <input type="text" name="tag_name" required
                class="h-8 rounded border border-gray-300 px-2 text-sm focus:border-blue-500 focus:ring-blue-500"
                placeholder="New tag...">
            <button type="submit"
                class="inline-block rounded bg-green-500 px-3 py-1.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-green-600 hover:shadow-lg focus:bg-green-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-700 active:shadow-lg">
                Add
            </button>
            <button type="button"
                class="inline-block rounded bg-gray-400 px-3 py-1.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-gray-500 hover:shadow-lg focus:bg-gray-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-600 active:shadow-lg"
                _="on click toggle .hidden on #show-add-tag-form-btn then toggle .hidden on the closest <form/>">
                Cancel
            </button>
        </form>
    </div>

</div>