{% macro format_selector_content(available_filetypes) %}
<div class="flex flex-col h-full text-gray-800 dark:text-gray-200">
    <!-- Search -->
    <div class="p-3 border-b border-gray-200 dark:border-gray-700">
        <div class="relative">
            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
            <input type="text" 
                   class="format-search w-full pl-9 pr-3 py-2 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" 
                   placeholder="{{ _('Search formats...') }}"
                   autocomplete="off">
        </div>
    </div>

    <!-- Categories Tabs -->
    <div class="flex border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide">
        <!-- Regular converter categories -->
        {% for category_id, category in available_filetypes.items() %}
        {% if category.category is not defined or category.category != 'tool' %}
        <button class="category-tab px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 border-transparent text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                data-category="{{ category_id }}">
            <i class="{{ category['icon-class'] }} mr-1"></i>
            {{ category.title }}
        </button>
        {% endif %}
        {% endfor %}
        
        <!-- Tool Categories (compressors) -->
        {% for category_id, category in available_filetypes.items() %}
        {% if category.category is defined and category.category == 'tool' %}
        <button class="category-tab px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 border-transparent text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors"
                data-category="{{ category_id }}">
            <i class="{{ category['icon-class'] }} mr-1"></i>
            {{ category.title }}
        </button>
        {% endif %}
        {% endfor %}
        
        <!-- Hash Tools -->
        {% for category_id, category in available_hashtypes.items() %}
        <button class="category-tab px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 border-transparent text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
                data-category="{{ category_id }}">
            <i class="{{ category['icon-class'] }} mr-1"></i>
            {{ category.title }}
        </button>
        {% endfor %}
    </div>

    <!-- Formats Grid -->
    <div class="overflow-y-auto p-3 max-h-[300px]">
        <!-- Regular converter formats -->
        {% for category_id, category in available_filetypes.items() %}
        {% if category.category is not defined or category.category != 'tool' %}
        <div class="format-category {% if loop.first %}active-category{% else %}hidden{% endif %}" data-category-content="{{ category_id }}">
            <div class="grid grid-cols-3 gap-1">
                {% for format in category.ext | sort %}
                <button class="format-item px-2 py-1.5 text-xs font-mono font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:border-blue-300 dark:hover:border-blue-700 hover:text-blue-700 dark:hover:text-blue-300 transition-all"
                        data-format="{{ format }}"
                        data-category="{{ category_id }}"
                        data-filetype="{{ category_id }}">
                    {{ format }}
                </button>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endfor %}
        
        <!-- Tool formats (compressors) -->
        {% for category_id, category in available_filetypes.items() %}
        {% if category.category is defined and category.category == 'tool' %}
        <div class="format-category hidden" data-category-content="{{ category_id }}">
            <div class="grid grid-cols-3 gap-1">
                {% for format in category.ext | sort %}
                <button class="format-item px-2 py-1.5 text-xs font-mono font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-orange-50 dark:hover:bg-orange-900/30 hover:border-orange-300 dark:hover:border-orange-700 hover:text-orange-700 dark:hover:text-orange-300 transition-all"
                        data-format="{{ format }}"
                        data-category="{{ category_id }}"
                        data-filetype="{{ category_id }}">
                    {{ format }}
                </button>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endfor %}
        
        <!-- Hash formats -->
        
    </div>
</div>

<!-- CSS for active category -->
<style>
    .format-category.active-category {
        display: block !important;
    }
    .format-category.active-category.hidden {
        display: none !important;
    }
    html:not(.dark) .category-tab.active,
    html:not(.dark) .category-tab[aria-selected="true"] {
        color: #1d4ed8 !important;
        border-bottom-color: #3b82f6 !important;
    }
    .dark .category-tab.active,
    .dark .category-tab[aria-selected="true"] {
        color: #93c5fd !important;
        border-bottom-color: #60a5fa !important;
    }
</style>
{% endmacro %}