{% if available_types()[filetype]['allowed']|length > 1 and filetype not in ['device', 'document-compressor', 'image-compressor', 'pdf'] %}
<section class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-8">
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Quickly access{% endtrans %}</h3>
            <p class="text-gray-500 dark:text-gray-400">{% trans ft=filetype %}Hey! Use quickly some of popular {{ft}} converters{% endtrans %}.</p>
        </div>

        <div class="quick-access-tools hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {% for type in filetypes[filetype]['ext'] %}
                    {% if ext_supported(type) %}
                    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                        <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
                            <h4 class="font-bold text-gray-900 dark:text-white text-sm">{{type|upper}} {% trans %}Converter{% endtrans %}</h4>
                        </div>
                        <div class="p-4">
                            <div class="grid grid-cols-2 gap-2">
                                {% for k, i in available_types().items() %}
                                    {% if (type in i['allowed']) %}
                                        {% for ext in i['ext'] %}
                                            {% if ext != type and ext|length == 3 %}
                                            <a href="{{ full_url(filetype=filetype|lower, input_format=type|lower, output_format=ext|lower) }}" class="px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-primary dark:hover:text-primary-light transition-all">{{type|upper}} {% trans %}to{% endtrans %} {{ext|upper}}</a>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>

        <div class="text-center mt-6">
            <button class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-accent hover:bg-accent-dark text-white font-medium transition-all show-more-btn" data-testid="button-show-more">
                <i class="fa fa-chevron-down text-xs"></i> {% trans %}Show more{% endtrans %}
            </button>
        </div>
    </div>
</section>
{% endif %}