{% if available_types()[filetype]['allowed']|length > 1 and filetype not in ['device', 'document-compressor', 'pdf', 'archive','webservice'] %}
<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 %}Use some of the popular converters quickly{% endtrans %}.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <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">{% trans fmt=fileformat|upper %}Convert to {{ fmt }}{% endtrans %}</h4>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-2">
                        {%- for allow in available_types()[filetype]['allowed'] if fileformat|lower != allow|lower -%}
                        <a href="{{ full_url(filetype=filetype|lower, input_format=allow|lower, output_format=fileformat|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">{{ allow|upper }} {% trans %}to{% endtrans %} {{ fileformat|upper }}</a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <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">{% trans fmt=fileformat|upper %}Convert from {{ fmt }}{% endtrans %}</h4>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-2">
                        {%- for allow in available_types()[filetype]['allowed'] if fileformat|lower != allow|lower -%}
                        <a href="{{ full_url(filetype=filetype|lower,  input_format=fileformat|lower, output_format=allow|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">{{ fileformat|upper }} {% trans %}to{% endtrans %} {{ allow|upper }}</a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}

{% if available_types()[filetype]['allowed']|length > 1 and (filetype == 'document-compressor' or filetype == 'archive' or filetype == 'webservice' or filetype == 'device' ) %}
<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 %}Use some of the popular converters quickly{% endtrans %}.</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <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">{% trans fmt=fileformat|upper %}Convert to {{ fmt }}{% endtrans %}</h4>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-2">
                        {%- for allow in available_types()[filetype]['allowed'] if fileformat|lower != allow|lower -%}
                        <a href="{{ full_url(filetype=filetype|lower, input_format=allow|lower, output_format=fileformat|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">{{ allow|upper }} {% trans %}to{% endtrans %} {{ fileformat|upper }}</a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% else %}

{% if available_types()[filetype]['allowed']|length > 1 and (filetype == '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 %}Use some of the popular converters quickly{% endtrans %}.</p>
        </div>
        
        <!-- PDF Tools Grid - Similar to image layout -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {%- for tool in available_types()[filetype]['client_side_tools'] -%}
            {% if tool_meta is defined %}{% set tool_info = tool_meta[tool] if tool in tool_meta else {"title": tool|replace("-"," ")|title, "desc": "", "icon": "fa-file-pdf"} %}{% else %}{% set tool_info = {"title": tool|replace("-"," ")|title, "desc": "", "icon": "fa-file-pdf"} %}{% endif %}
            <a href="{{ full_url(path='/do/' ~ tool, filetype=filetype|lower) }}" 
               class="group flex flex-col items-center p-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:shadow-lg hover:border-primary/20 dark:hover:border-primary-light/20 transition-all duration-300">
                <div class="w-16 h-16 flex items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10 group-hover:from-primary/20 group-hover:to-secondary/20 dark:group-hover:from-primary-light/20 dark:group-hover:to-secondary-light/20 transition-all duration-300 mb-4">
                    <i class="fa-solid {{ tool_info.icon }} text-2xl text-primary dark:text-primary-light"></i>
                </div>
                <h4 class="text-sm font-semibold text-gray-900 dark:text-white text-center mb-1">{{ tool_info.title }}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400 text-center line-clamp-2">{{ tool_info.desc }}</p>
            </a>
            {% endfor %}
        </div>

        <!-- Convert to PDF section - filtered to exclude PDF to PDF -->
        {% if available_types()[filetype]['allowed']|length > 1 %}
        <div class="mt-12">
            <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">{% trans %}Convert to PDF{% endtrans %}</h4>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {%- for allow in available_types()[filetype]['allowed'] if fileformat|lower != allow|lower and allow|lower != 'pdf' -%}
               <a href="{{ full_url('/convert/' ~ allow|lower ~ '-to-pdf') }}"
                   class="group flex flex-col items-center p-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:shadow-lg hover:border-primary/20 dark:hover:border-primary-light/20 transition-all duration-300">
                    <div class="w-16 h-16 flex items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10 group-hover:from-primary/20 group-hover:to-secondary/20 dark:group-hover:from-primary-light/20 dark:group-hover:to-secondary-light/20 transition-all duration-300 mb-4">
                        {% if allow|lower in ['jpg', 'jpeg', 'png', 'bmp', 'tiff'] %}
                            <i class="fa-solid fa-file-image text-2xl text-primary dark:text-primary-light"></i>
                        {% elif allow|lower == 'doc' or allow|lower == 'docx' %}
                            <i class="fa-solid fa-file-word text-2xl text-primary dark:text-primary-light"></i>
                        {% elif allow|lower == 'ppt' or allow|lower == 'pptx' %}
                            <i class="fa-solid fa-file-powerpoint text-2xl text-primary dark:text-primary-light"></i>
                        {% elif allow|lower == 'xls' or allow|lower == 'xlsx' %}
                            <i class="fa-solid fa-file-excel text-2xl text-primary dark:text-primary-light"></i>
                        {% elif allow|lower == 'txt' %}
                            <i class="fa-solid fa-file-lines text-2xl text-primary dark:text-primary-light"></i>
                        {% else %}
                            <i class="fa-solid fa-file text-2xl text-primary dark:text-primary-light"></i>
                        {% endif %}
                    </div>
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white text-center mb-1">{{ allow|upper }} to PDF</h4>
                    <p class="text-xs text-gray-500 dark:text-gray-400 text-center">Convert {{ allow|upper }} files to PDF format</p>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</section>
{% endif %}

{% endif %}