{% macro format_selector(available_filetypes) %}
<div class="flex flex-col h-full text-gray-800 dark:text-gray-200">
    <!-- Search Bar -->
    <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.5 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 border-0 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>

    <!-- Two Column Layout -->
    <div class="flex flex-row h-full">
        <!-- Left Column - Categories (30% width) -->
        <div class="w-1/3 border-r border-gray-200 dark:border-gray-700 overflow-y-auto max-h-[400px] bg-gray-50 dark:bg-gray-900/50">
            <!-- Regular converter categories -->
            {% for category_id, category in available_filetypes.items() %}
            {% if category.category is not defined or category.category != 'tool' %}
            <button class="category-item w-full text-left px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-colors {% if loop.first %}bg-blue-50 dark:bg-gray-800 text-blue-700 dark:text-blue-300 font-semibold{% endif %}"
                    data-category="{{ category_id }}">
                <span class="flex items-center justify-between">
                    <span>
                        <i class="{{ category['icon-class'] }} mr-2 text-blue-500 dark:text-blue-400"></i>
                      {{ category.title | replace('Converter', '') | replace('converter', '') }}
                    </span>
                    <i class="fas fa-chevron-right text-xs text-gray-400 {% if not loop.first %}opacity-0{% endif %}"></i>
                </span>
            </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-item w-full text-left px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-colors"
                    data-category="{{ category_id }}">
                <span class="flex items-center justify-between">
                    <span>
                        <i class="{{ category['icon-class'] }} mr-2 text-orange-500 dark:text-orange-400"></i>
                       {{ category.title | replace('Converter', '') | replace('converter', '') }}
                    </span>
                    <i class="fas fa-chevron-right text-xs text-gray-400 opacity-0"></i>
                </span>
            </button>
            {% endif %}
            {% endfor %}
        </div>

        <!-- Right Column - Formats (70% width) -->
        <div class="w-2/3 overflow-y-auto p-4 max-h-[400px]">
            <!-- 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 not loop.first %}hidden{% endif %}" data-category-content="{{ category_id }}">
                <div class="flex flex-wrap gap-2">
                    {% for format in category.ext | sort %}
                    <button class="format-item px-3 py-2 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-md hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:border-blue-400 dark:hover:border-blue-700 hover:text-blue-700 dark:hover:text-blue-300 transition-all shadow-sm"
                            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="flex flex-wrap gap-2">
                    {% for format in category.ext | sort %}
                    <button class="format-item px-3 py-2 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-md hover:bg-orange-50 dark:hover:bg-orange-900/30 hover:border-orange-400 dark:hover:border-orange-700 hover:text-orange-700 dark:hover:text-orange-300 transition-all shadow-sm"
                            data-format="{{ format }}"
                            data-category="{{ category_id }}"
                            data-filetype="{{ category_id }}">
                        {{ format }}
                    </button>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

<style>
    .category-item.active {
        background-color: #eff6ff;
        color: #1d4ed8;
        font-weight: 600;
    }
    .dark .category-item.active {
        background-color: #1f2937;
        color: #93c5fd;
    }
    .category-item.active .fa-chevron-right {
        opacity: 1 !important;
        color: #3b82f6;
    }
    .dark .category-item.active .fa-chevron-right {
        color: #60a5fa;
    }
    .format-category {
        display: block;
    }
    .format-category.hidden {
        display: none;
    }
</style>
{% endmacro %}