<div class="flex">
    <div id="tag-wrapper-w-{{ workout_id }}">
        {{ render_partial('partials/workout_tags_list.html', tags=tags)}}
    </div>
    <span id="tag-form-show-w-{{ workout_id }}" class="cursor-pointer" _="on click 
            remove .hidden from #tag-form-w-{{ workout_id }}
            then remove .hidden from #tag-form-hide-w-{{ workout_id }}
            then add .hidden">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="w-6 h-6" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
        </svg>
    </span>
    <span id="tag-form-hide-w-{{ workout_id }}" _="on click 
    add .hidden to #tag-form-w-{{ workout_id }}
    then remove .hidden from #tag-form-show-w-{{ workout_id }}
    then add .hidden" class="cursor-pointer hidden">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
        </svg>

    </span>
</div>
<div id="tag-form-w-{{ workout_id }}" class="hidden pt-2 pb-3">

    <span class="text-base font-normal text-gray-500">Add tag to workout</span>

    <div class="flex pt-2 flex-col sm:flex-row pb-2">

        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
                Tag
            </label>
            <div class="relative">
                <div class="w-full">
                    <select multiple name="tag_id"
                        hx-post="{{ url_for('tags.add_tag_to_workout', workout_id=workout_id) }}"
                        hx-target="#tag-wrapper-w-{{ workout_id }}"
                        class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                        _="init js(me)
                            tail.select(me, {
                                search: true,
                                multiple: true,
                                placeholder: 'Select tags',
                            })
                        end">
                        {% for tag in tags %}
                        <option value="{{ tag.tag_id }}" {% if tag.is_selected %}selected{% endif %}>
                            {{
                            tag.tag_name
                            }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                New tag name
            </label>
            <div class="flex">
                <input
                    class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                    type="text" name="tag_name">

                <button type="submit" hx-post="{{ url_for('tags.create_new_tag_for_workout', workout_id=workout_id) }}"
                    hx-include="[name='tag_name']" hx-target="#tag-wrapper-w-{{ workout_id }}"
                    class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-6 h-6" data-darkreader-inline-stroke=""
                        style="--darkreader-inline-stroke: currentColor;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
                    </svg>
                    <span class="sr-only">Search</span>
                </button>
            </div>

        </div>
    </div>
</div>