{% extends "base.html" %}
{% from "macros/format_selector_macro.html" import format_selector %}
{% set _page_id = normalize_page_id(filetype=filetype) %}
{% set _cms_title = get_page_content(_page_id, 'title', g.lang_code) %}
{% set _cms_desc = get_page_content(_page_id, 'description', g.lang_code) %}
{% set _cms_heading = get_page_content(_page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = get_page_content(_page_id, 'page_description', g.lang_code) %}
{% set _cms_head_html = get_page_content(_page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = get_page_content(_page_id, 'og_image', g.lang_code) %}
{% set _cms_long_desc = get_page_content(_page_id, 'filetype_long_description', g.lang_code) %}
{% set _cms_filetype_desc = get_page_content(_page_id, 'filetype_description', g.lang_code) %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block title %}
    {% if _cms_title %}
        {{ _cms_title }}
    {% elif request.path in seo %}
        {{ seo[request.path]["title"] }}
    {% else %}
        {% if available_types()[filetype]["category"] == "tool" %}
            {% if fileformat is defined and fileformat != none %}
            {{ _(available_types()[filetype]["_prefix"]) | replace("{}", fileformat) | splitpart(0, '_') }}
            {% else %}
            {{ available_types()[filetype]["type"] }}
            {% endif %}
        {% else %}
            {% if not available_types()[filetype]["_prefix"] %}
                {% trans ft=filetype.capitalize() %}Free Online {{ ft }} Converter{% endtrans %} - Onlineconvert.cc {% if fileformat is not none %} {% trans fmt=fileformat.capitalize() %}to the {{ fmt }}{% endtrans %} {% endif %}
            {% else %}
                {{ _(available_types()[filetype]["_prefix"]) | replace("{}", fileformat) | replace("-", " ") | splitpart(0, '_') }}
            {% endif %}
        {% endif %}
    {% endif %}
{% endblock %}

{% block description %}
    {%- if _cms_desc -%}
        {{ _cms_desc }}
    {%- elif _cms_filetype_desc -%}
        {{ _cms_filetype_desc }}
    {%- elif request.path in seo -%}
        {{ seo[request.path]["description"] }}
    {%- else -%}
        {{ _(filetypes[filetype]['description']) }}
    {%- endif -%}
{% endblock %}

{% block extra_head %}
{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}
{% endblock %}

{% block header_menu %}
<ul class="hidden sm:flex items-center">
    <li class="relative h-full border-l border-r border-gray-200 dark:border-gray-700" data-dropdown="tool-tip">
        <button class="h-full bg-white dark:bg-gray-950 px-3 md:px-5 dropdown-toggle flex items-center gap-1 md:gap-2 text-gray-700 dark:text-gray-200 hover:text-[#00796B] dark:hover:text-[#34D399] font-medium text-sm transition-colors">
            {% if "-compressor" in filetype %}
                {{ filetype|replace("-compressor", " compressor")|title }}
            {% else %}
                {% trans ft=filetype|title %}{{ ft }} Converter{% endtrans %}
            {% endif %}
            <i class="fa fa-chevron-down text-xs transition-transform"></i>
        </button>
        <div class="dropdown-menu-2 hidden absolute top-full -mt-[1px] w-auto min-w-[500px] bg-white dark:bg-gray-900 shadow-2xl dark:shadow-black/30 border border-gray-200 dark:border-gray-700 p-4 z-50 animate-fade-in">
            {% include "shared/items-menu.html" %}
        </div>
    </li>
</ul>
{% endblock %}

{% block content %}
<style>
    #fsSourceDropdown, #fsTargetDropdown { z-index: 9999 !important; }
</style>
{% set _ls_hero_type = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
{% set _hero_img = site.get('hero_bg_image', '') if site is defined else '' %}
{% set _hero_lcl = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
{% set _hero_lcd = (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' %}
<section class="hero-gradient relative overflow-hidden">
        {% if _ls_hero_type == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _ls_hero_type == 'gradient' %}
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
    
    {% endif %}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-stretch">

            <div class="animate-slide-up py-8 md:py-12">
                {% if _cms_heading %}
                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">{{ _cms_heading }}</h1>
                {% elif available_types()[filetype]["category"] == "tool" %}
                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">{{ _(available_types()[filetype]["title"]) }}</h1>
                {% else %}
                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">{% trans ft=filetype.capitalize() %}Online {{ ft }} Converter{% endtrans %}</h1>
                {% endif %}
                <p class="text-lg text-white/90 leading-relaxed">{{ _cms_long_desc if _cms_long_desc else _(filetypes[filetype]['long-description']) }}</p>
            </div>

            {% set _fs_filetypes = selector_types() %}
            <div class="hero-sel-col flex items-center justify-center relative z-50 overflow-visible">
                {% if _ls_hero_type == 'image' and _hero_img %}<div class="hero-col-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>{% endif %}
                <div class="flex items-center justify-center gap-3 flex-wrap relative z-10">
                    <span class="font-semibold text-lg text-white flex-shrink-0">{% trans %}Convert{% endtrans %}</span>
                    <div class="relative min-w-[140px]" id="fs-source-selector">
                        <button type="button" onclick="fsToggleSource()"
                            class="px-4 py-3 bg-white dark:bg-gray-900 border-2 border-white/30 rounded-xl flex items-center justify-between hover:border-blue-500 transition-all group">
                            <span class="text-gray-500 dark:text-gray-400 font-semibold truncate" id="fs-selected-source">...</span>
                            <i class="fas fa-chevron-down text-gray-400 group-hover:text-blue-500 transition-colors ml-2 flex-shrink-0"></i>
                        </button>
                        <div id="fsSourceDropdown"
                             class="absolute mt-2 bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden hidden"
                             style="z-index:9999;"
                             data-filetypes="{{ _fs_filetypes|tojson|forceescape }}">
                            <div class="w-full">{{ format_selector(_fs_filetypes) }}</div>
                        </div>
                    </div>
                    <span class="font-semibold text-lg text-white flex-shrink-0">{% trans %}to{% endtrans %}</span>
                    <div class="relative min-w-[140px]" id="fs-target-selector">
                        <button type="button" onclick="fsToggleTarget()"
                            class="px-4 py-3 bg-white dark:bg-gray-900 border-2 border-white/30 rounded-xl flex items-center justify-between hover:border-green-500 transition-all group">
                            <span class="text-gray-500 dark:text-gray-400 font-semibold truncate" id="fs-selected-target">...</span>
                            <i class="fas fa-chevron-down text-gray-400 group-hover:text-green-500 transition-colors ml-2 flex-shrink-0"></i>
                        </button>
                        <div id="fsTargetDropdown"
                             class="absolute mt-2 bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden hidden"
                             style="z-index:9999;"
                             data-filetypes="{{ _fs_filetypes|tojson|forceescape }}">
                            <div class="w-full">{{ format_selector(_fs_filetypes) }}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{% if _cms_filetype_desc %}
<section class="bg-gray-50 dark:bg-gray-900/50 transition-theme py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <p class="text-gray-600 dark:text-gray-400 leading-relaxed">{{ _cms_filetype_desc }}</p>
    </div>
</section>
{% endif %}

<section class="text-center py-4">
    {% include "shared/ph.html" %}
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

{% if filetype == 'pdf' and tool_meta is defined %}
    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">{% trans %}PDF Tools{% endtrans %}</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
        {% for tool_id, tmeta in tool_meta.items() %}
        <a href="{{ full_url(path='/do/' ~ tool_id, filetype='pdf') }}" class="file-card-hover block p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transition-theme group">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10 flex items-center justify-center text-xl">
                    <i class="fa-solid {{ tmeta.icon }} text-primary dark:text-primary-light"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-start justify-between gap-2">
                        <div>
                            <h3 class="font-semibold text-gray-900 dark:text-white text-sm group-hover:text-primary dark:group-hover:text-primary-light transition-colors">{{ tmeta.title }}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 line-clamp-2 opacity-75">{{ tmeta.desc }}</p>
                        </div>
                        <i class="fa fa-chevron-right text-xs text-gray-400 mt-1 group-hover:text-primary dark:group-hover:text-primary-light transition-colors flex-shrink-0"></i>
                    </div>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>

{% else %}
    {% set _cst = filetypes[filetype].get('client_side_tools', []) | map('lower') | list %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for type in filetypes[filetype]['ext'] %}
        {% if type|lower not in _cst %}
        {% set _card_href = full_url(filetype=filetype, fileformat=type|lower) %}
        <a href="{{ _card_href }}" class="file-card-hover block p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transition-theme group ftc-{{ filetypes[filetype].get('color', 'blue') }}">
    <div class="flex items-start gap-3">
        <!-- Icon Section - Only show if properly set -->
        {% set _ext_page_id = normalize_page_id(filetype=filetype, fileformat=type) %}
        {% set _ext_icon_type = get_page_content(_ext_page_id, 'extension_icon_type', g.lang_code) %}
        {% set _ext_icon_value = get_page_content(_ext_page_id, 'extension_icon_value', g.lang_code) %}
        
        {% if (_ext_icon_type == 'fa' and _ext_icon_value) or 
              (_ext_icon_type == 'svg' and _ext_icon_value) or 
              (_ext_icon_type == 'image' and _ext_icon_value) %}
        <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10 flex items-center justify-center text-xl">
            {% if _ext_icon_type == 'fa' and _ext_icon_value %}
                <i class="fa {{ _ext_icon_value }} text-primary dark:text-primary-light"></i>
            {% elif _ext_icon_type == 'svg' and _ext_icon_value %}
                <div class="w-6 h-6 text-primary dark:text-primary-light">{{ _ext_icon_value|safe }}</div>
            {% elif _ext_icon_type == 'image' and _ext_icon_value %}
                <img src="{{ _ext_icon_value }}" class="w-6 h-6 object-contain" alt="">
            {% endif %}
        </div>
        {% endif %}
        
        <div class="flex-1 min-w-0">
            <div class="flex items-start justify-between gap-2">
                <div>
                    <!-- Title Section -->
                    {% set _ext_title = get_page_content(_ext_page_id, 'extension_title', g.lang_code) %}
                    <h3 class="font-semibold text-gray-900 dark:text-white text-sm group-hover:text-primary dark:group-hover:text-primary-light transition-colors">
                        {% if _ext_title %}
                            {{ _ext_title }}
                        {% elif filetype in ['device', 'webservice'] %}
                            {% trans fmt=type %}Convert for {{ fmt }}{% endtrans %}
                        {% else %}
                            {% if available_types()[filetype]["category"] == "tool" %}
                                {{ _(available_types()[filetype]["_prefix"]) | replace("{}", type) | splitpart(0, '_') }}
                            {% else %}
                                {% if not available_types()[filetype]["_prefix"] %}
                                    {{type}} {% trans %}file converter{% endtrans %}
                                {% else %}
                                    {{ _(available_types()[filetype]["_prefix"]) | replace("{}", type) | replace("-", " ") | splitpart(0, '_') }}
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    </h3>
                    
                    <!-- Description Section -->
                    {% set _ext_box_text = get_page_content(_ext_page_id, 'extension_box_text', g.lang_code) %}
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 line-clamp-2 opacity-75">{{ _ext_box_text if _ext_box_text else get_definition(type) }}</p>
                </div>
                <i class="fa fa-chevron-right text-xs text-gray-400 mt-1 group-hover:text-primary dark:group-hover:text-primary-light transition-colors flex-shrink-0"></i>
            </div>
        </div>
    </div>
</a>
        {% endif %}
        {% endfor %}
    </div>
{% endif %}
</div>

{% include "shared/reviews.html" %}
{% include "shared/quick-content.html" %}
{% include "shared/quick-faq.html" %}

{% endblock %}

{% block faq_java %}{% include "shared/format-selector-js.html" %}{% endblock %}