{% set path_array = current_path | split(pat="/") %}
{% set taxonomy = path_array[1] %}
{% set category = path_array[2] %}
{% if path_array | length < 4%}
{% set category = "All" %}
{% endif %}



<div class="left-0 z-50 border border-gray-200 bg-gray-100 my-6 w-full rounded-md">
    <header class="flex flex-wrap container mx-auto pb-0 sm:px-0 transition-all transition-500">
        <div class="flex justify-between px-4 sm:p-0">
            <div class="ml-8 inline-flex flex-shrink-0">
                <span class="flex text-base items-center capitalize">
                    Filter:
                </span>
            </div>
        </div>
        <nav class="inline-flex md:order-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
            <ul class="list-none sm:flex justify-left capitalize transition-all transition-500 ">
                <li class="flex items-center">
                    <div class="relative">
                        <button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link">
                            <span class="text-base capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
                            <svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                        </button>
                        <div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
                            <div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700">
                                <a data-v-21fd5df0="" href="/people" class="text-gray-700 cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                                    All
                                </a>
                                {% set taxonomy = get_taxonomy(kind="memberships") %}
                                {% set categories = taxonomy.items %}
                                {% for category in categories %}
                                    {% set path = category.name | slugify %}
                                    {% set fullpath = "/memberships/" ~ path %}
                                    <a href="{{fullpath}}" class="text-gray-700 cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                                        {{category.name}}
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
    </header>
</div>