{% extends "base.html" %}
{% from "macros/format_selector_macro.html" import format_selector %}

{% set _page_id = normalize_page_id(filetype=filetype, fileformat=fileformat) %}
{% 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_filetype_desc = get_page_content(_page_id, 'filetype_description', g.lang_code) %}
{% set _cms_format_def  = get_page_content(_page_id, 'format_definition',  g.lang_code) %}
{% set _fmt_def         = get_definition(fileformat) %}

{% 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"] }} | OnlineConvert.cc
    {%- else -%}{% trans fmt=fileformat.upper() %}Free Online {{ fmt }} Converter{% endtrans %} - OnlineConvert.cc
    {%- endif -%}
{% endblock %}

{% block description %}
    {%- if _cms_desc -%}{{ _cms_desc }}
    {%- elif request.path in seo -%}{{ seo[request.path]["description"] }}
    {%- else -%}{{ _fmt_def }}
    {%- endif -%}
{% endblock %}

{% block extra_head %}
{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}
<style>
    /* Dropdown z-index + dark mode — positioning handled by base.html JS */
    #sourceDropdown, #targetDropdown { z-index: 9999 !important; }
    .dark #sourceDropdown, .dark #targetDropdown { background:#1f2937; border-color:#374151; }
    #sourceDropdown:not(.hidden), #targetDropdown:not(.hidden) { display:block; animation:csDropFade 0.15s ease; }
    @keyframes csDropFade { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
    /* conversion link cards */
    .conv-card { transition:transform 0.15s, box-shadow 0.15s; }
    .conv-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
</style>
{% 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">
            {% trans ft=filetype|title %}{{ ft }} Converter{% endtrans %}
            <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 %}

{# ── HERO ─────────────────────────────────────────────────────────────────── #}
{% set _ht_convert_se = 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 _ht_convert_se == '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 _ht_convert_se == '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-12 items-stretch">

            {# ── Left: title + description ── #}
            <div class="animate-slide-up py-8 md:py-12">
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">
                    {%- if _cms_heading -%}
                        {{ _cms_heading }}
                    {%- elif request.path in seo -%}
                        {% trans title=seo[request.path]["title"] %}Free {{ title }} Converter{% endtrans %}
                    {%- else -%}
                        {% trans fmt=fileformat.upper() %}Free Online {{ fmt }} Converter{% endtrans %}
                    {%- endif -%}
                </h1>
                <p class="text-lg text-white/90 max-w-2xl leading-relaxed">
                    {%- if _cms_page_desc -%}{{ _cms_page_desc }}
                    {%- elif _cms_filetype_desc -%}{{ _cms_filetype_desc }}
                    {%- elif request.path in seo -%}{{ seo[request.path]["description"] }}
                    {%- elif _fmt_def -%}{{ _fmt_def }}
                    {%- else -%}{% trans fmt=fileformat.upper() %}Convert any file to or from {{ fmt }} format online — fast and free.{% endtrans %}
                    {%- endif -%}
                </p>
            </div>

            {# ── Right: inline Convert selector (index style) ── #}
            {% set filetypes = selector_types() %}
            <div class="hero-sel-col flex items-center justify-center relative z-50 overflow-visible">
                {% if _ht_convert_se == '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="source-selector">
                        <button type="button" onclick="csToggleSource()"
                            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="selected-source">{{ fileformat.upper() }}</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="sourceDropdown"
                             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="{{ filetypes|tojson|forceescape }}">
                            <div class="w-full">{{ format_selector(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="target-selector">
                        <button type="button" onclick="csToggleTarget()"
                            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="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="targetDropdown"
                             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="{{ filetypes|tojson|forceescape }}">
                            <div class="w-full">{{ format_selector(filetypes) }}</div>
                        </div>
                    </div>
                </div>
            </div>

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

{# ── FORMAT DESCRIPTION ─────────────────────────────────────────────────────── #}
{% if _fmt_def or _cms_filetype_desc or _cms_format_def %}
<section class="bg-gray-50 dark:bg-gray-900/50 transition-theme py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary/10 dark:to-secondary/10 flex items-center gap-2">
                <i class="fa fa-circle-info text-primary dark:text-primary-light text-sm"></i>
                <h2 class="font-semibold text-gray-900 dark:text-white text-sm">
                    {% trans fmt=fileformat.upper() %}About the {{ fmt }} format{% endtrans %}
                </h2>
            </div>
            <div class="px-6 py-5 text-gray-600 dark:text-gray-400 text-sm leading-relaxed space-y-3">
                {% if _fmt_def %}<p>{{ _fmt_def }}</p>{% endif %}
                {% if _cms_filetype_desc %}<p>{{ _cms_filetype_desc }}</p>{% endif %}
                {% if _cms_format_def %}<p>{{ _cms_format_def }}</p>{% endif %}
            </div>
        </div>
    </div>
</section>
{% endif %}

{# ── POPULAR CONVERSION LINKS ───────────────────────────────────────────────── #}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white">
            {% trans fmt=fileformat.upper() %}Convert {{ fmt }} to other formats{% endtrans %}
        </h2>
        <a href="{{ full_url(filetype=filetype, fileformat=none) }}"
           class="text-sm text-primary dark:text-primary-light hover:underline flex items-center gap-1">
            {% trans %}View all{% endtrans %} <i class="fa fa-arrow-right text-xs"></i>
        </a>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
        {% for target in filetypes[filetype]['ext'] %}
            {% set t = target | lower %}
            {% if t != fileformat | lower %}
            {% if filetype in ['pdf', 'device', 'webservice', 'archive'] %}
                {% set _card_href = full_url(filetype=filetype, fileformat=t) %}
            {% else %}
                {% set _card_href = full_url(path='/convert/' ~ fileformat ~ '-to-' ~ t, filetype=filetype) %}
            {% endif %}
            <a href="{{ _card_href }}"
               class="conv-card group flex flex-col items-center gap-2 p-4 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-primary/40 dark:hover:border-primary-light/40 hover:bg-primary/5 dark:hover:bg-primary-light/5 transition-all text-center">
                <div class="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">
                    <span class="text-xs font-bold text-primary dark:text-primary-light uppercase leading-none">{{ t }}</span>
                </div>
                <p class="text-xs font-semibold text-gray-800 dark:text-gray-200 group-hover:text-primary dark:group-hover:text-primary-light transition-colors">
                    {% if filetype in ['device', 'webservice'] %}
                        {{ t.upper() }}
                    {% else %}
                        {{ fileformat.upper() }} → {{ t.upper() }}
                    {% endif %}
                </p>
            </a>
            {% endif %}
        {% endfor %}
    </div>
</div>

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

{% endblock %}

{% block faq_java %}
<script>
// ─── State ────────────────────────────────────────────────────────────────────
window.sourceFormat   = '{{ fileformat | lower }}';
window.sourceCategory = '{{ filetype | lower }}';
window.targetFormat   = '';
window.targetCategory = '';
window.activeDropdown = null;
const _csLang         = '{{ g.lang_code if g.lang_code else "en" }}';
const _csSubdomainsOn = {{ use_subdomains | tojson }};
const _csMainDomain   = '{{ main_domain() }}';
const _csLangPrefix   = '{{ lang_prefix() }}';

// ─── Toggle helpers ───────────────────────────────────────────────────────────
function csToggleSource() {
    const src = document.getElementById('sourceDropdown');
    const tgt = document.getElementById('targetDropdown');
    tgt.classList.add('hidden');
    src.classList.toggle('hidden');
    window.activeDropdown = src.classList.contains('hidden') ? null : 'source';
    if (!src.classList.contains('hidden')) csInitDropdown('source');
}

function csToggleTarget() {
    const tgt = document.getElementById('targetDropdown');
    const src = document.getElementById('sourceDropdown');
    src.classList.add('hidden');
    tgt.classList.toggle('hidden');
    window.activeDropdown = tgt.classList.contains('hidden') ? null : 'target';
    if (!tgt.classList.contains('hidden')) {
        csInitDropdown('target');
        // Filter after init (cloneNode replaces the element, so re-fetch)
        setTimeout(function() {
            csFilterTarget(window.sourceFormat, window.sourceCategory);
        }, 0);
    }
}

// ─── Filter target dropdown to only show compatible formats ───────────────────
function csFilterTarget(srcFmt, srcCat) {
    var container = document.getElementById('targetDropdown');
    if (!container || !srcFmt || !srcCat) return;
    try {
        var data = JSON.parse(container.dataset.filetypes);
        var cat = data[srcCat];
        if (!cat) return;
        var allowed = (cat.allowed || cat.ext || []).slice();
        if (cat.disallowed && cat.disallowed[srcFmt]) {
            var dis = cat.disallowed[srcFmt];
            allowed = allowed.filter(function(f) { return !dis.includes(f); });
        }
        allowed = allowed.filter(function(f) { return f.toLowerCase() !== srcFmt.toLowerCase(); });
        var fmtItems = container.querySelectorAll('.format-item');
        var fmtCats  = container.querySelectorAll('.format-category');
        var catItems = container.querySelectorAll('.category-item');
        fmtItems.forEach(function(i) { i.classList.add('hidden'); });
        allowed.forEach(function(t) {
            fmtItems.forEach(function(i) { if (i.dataset.format === t) i.classList.remove('hidden'); });
        });
        fmtCats.forEach(function(c) {
            c.classList.toggle('hidden', c.querySelectorAll('.format-item:not(.hidden)').length === 0);
        });
        catItems.forEach(function(ci) {
            var cc = container.querySelector('[data-category-content="' + ci.dataset.category + '"]');
            if (cc) {
                var vis = cc.querySelectorAll('.format-item:not(.hidden)').length;
                ci.classList.toggle('hidden', vis === 0);
                if (vis === 0) ci.classList.remove('active','bg-gray-100','dark:bg-gray-800','font-semibold');
            }
        });
        var first = Array.from(catItems).find(function(i) { return !i.classList.contains('hidden'); });
        if (first) {
            catItems.forEach(function(i) { i.classList.remove('active','bg-gray-100','dark:bg-gray-800','font-semibold'); });
            first.classList.add('active','bg-gray-100','dark:bg-gray-800','font-semibold');
            fmtCats.forEach(function(c) { c.classList.add('hidden'); });
            var fc = container.querySelector('[data-category-content="' + first.dataset.category + '"]');
            if (fc) fc.classList.remove('hidden');
        }
    } catch(e) {}
}

// ─── Close on outside click ───────────────────────────────────────────────────
document.addEventListener('click', function(e) {
    ['source','target'].forEach(function(type) {
        var dd  = document.getElementById(type + 'Dropdown');
        var btn = document.querySelector('#' + type + '-selector button');
        if (dd && !dd.contains(e.target) && !(btn && btn.contains(e.target))) {
            dd.classList.add('hidden');
        }
    });
});

// ─── Dropdown initialiser ─────────────────────────────────────────────────────
function csInitDropdown(type) {
    var container = document.getElementById(type + 'Dropdown');
    if (!container) return;

    var categoryItems  = container.querySelectorAll('.category-item');
    var formatCats     = container.querySelectorAll('.format-category');

    // Show first category
    if (categoryItems.length > 0) {
        categoryItems.forEach(function(i) {
            i.classList.remove('active','bg-gray-100','dark:bg-gray-800','font-semibold');
        });
        categoryItems[0].classList.add('active','bg-gray-100','dark:bg-gray-800','font-semibold');
        formatCats.forEach(function(c) { c.classList.add('hidden'); });
        var fc = container.querySelector('[data-category-content="' + categoryItems[0].dataset.category + '"]');
        if (fc) fc.classList.remove('hidden');
    }

    // Replace node to clear old listeners
    var fresh = container.cloneNode(true);
    container.parentNode.replaceChild(fresh, container);
    // Re-register MutationObserver on cloned element for fixed positioning
    if (window._dropdownFix) window._dropdownFix(type + 'Dropdown');

    fresh.addEventListener('click', function(e) {
        // Category tab
        var catItem = e.target.closest('.category-item');
        if (catItem) {
            e.preventDefault(); e.stopPropagation();
            fresh.querySelectorAll('.category-item').forEach(function(i) {
                i.classList.remove('active','bg-gray-100','dark:bg-gray-800','font-semibold');
            });
            catItem.classList.add('active','bg-gray-100','dark:bg-gray-800','font-semibold');
            fresh.querySelectorAll('.format-category').forEach(function(c) { c.classList.add('hidden'); });
            var fc2 = fresh.querySelector('[data-category-content="' + catItem.dataset.category + '"]');
            if (fc2) fc2.classList.remove('hidden');
            return;
        }

        // Format item
        var fmtItem = e.target.closest('.format-item');
        if (fmtItem) {
            e.preventDefault(); e.stopPropagation();
            var fmt      = fmtItem.dataset.format;
            var ftCat    = fmtItem.dataset.filetype;
            fresh.classList.add('hidden');

            if (type === 'source') {
                // Source changed → go to that format's own convert-selector page
                var _srcUrl;
                if (_csSubdomainsOn) {
                    _srcUrl = 'https://' + ftCat.toLowerCase() + '.' + _csMainDomain + _csLangPrefix + '/' + fmt.toLowerCase() + '-converter';
                } else {
                    _srcUrl = _csLangPrefix + '/' + ftCat.toLowerCase() + '/' + fmt.toLowerCase() + '-converter';
                }
                window.location.href = _srcUrl;
                return;
            } else {
                // Target selected — redirect immediately
                document.getElementById('selected-target').textContent = fmt;
                window.targetFormat   = fmt.toLowerCase();
                window.targetCategory = ftCat;
                csRedirect();
            }
            return;
        }
    });

    // Search
    var searchInput = fresh.querySelector('.format-search');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            var term       = this.value.toLowerCase().trim();
            var fmtItems   = fresh.querySelectorAll('.format-item');
            var fmtCats    = fresh.querySelectorAll('.format-category');
            var catItems2  = fresh.querySelectorAll('.category-item');
            if (term.length > 0) {
                fmtCats.forEach(function(c) { c.classList.remove('hidden'); });
                fmtItems.forEach(function(i) {
                    i.classList.toggle('hidden', !i.dataset.format.toLowerCase().includes(term));
                });
                catItems2.forEach(function(ci) {
                    var cc = fresh.querySelector('[data-category-content="' + ci.dataset.category + '"]');
                    if (cc) {
                        var visible = cc.querySelectorAll('.format-item:not(.hidden)').length;
                        ci.classList.toggle('hidden', visible === 0);
                    }
                });
            } else {
                var active = fresh.querySelector('.category-item.active');
                if (active) {
                    fmtCats.forEach(function(c) { c.classList.add('hidden'); });
                    var ac = fresh.querySelector('[data-category-content="' + active.dataset.category + '"]');
                    if (ac) ac.classList.remove('hidden');
                }
                fmtItems.forEach(function(i) { i.classList.remove('hidden'); });
                catItems2.forEach(function(i) { i.classList.remove('hidden'); });
            }
        });
        // ArrowDown from search → jump to first visible format item
        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                var first = fresh.querySelector('.format-item:not(.hidden)');
                if (first) first.focus();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                fresh.classList.add('hidden');
            }
        });
    }

    // Arrow Up / Down keyboard navigation across format-item buttons
    fresh.addEventListener('keydown', function(e) {
        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Escape') return;
        var items = Array.from(fresh.querySelectorAll('.format-item:not(.hidden)'));
        var idx   = items.indexOf(document.activeElement);
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            var next = items[idx + 1] || items[0];
            if (next) next.focus();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            if (idx <= 0) { if (searchInput) searchInput.focus(); }
            else items[idx - 1].focus();
        } else if (e.key === 'Escape') {
            e.preventDefault();
            fresh.classList.add('hidden');
            var wrap = document.getElementById(type + '-selector');
            var btn  = wrap && wrap.querySelector('button');
            if (btn) btn.focus();
        }
    });

    // Auto-focus search input when dropdown opens
    if (searchInput) setTimeout(function() { searchInput.focus(); }, 30);
}

// ─── Redirect to converter ────────────────────────────────────────────────────
function csRedirect() {
    var src = window.sourceFormat.toLowerCase();
    var tgt = window.targetFormat.toLowerCase();
    if (!src || !tgt || src === tgt) return;
    var _srcCat = (window.sourceCategory || '{{ filetype }}').toLowerCase();
    var _tgtCat = (window.targetCategory || '').toLowerCase();

    // Helper — build URL with or without subdomains
    function buildUrl(subdomain, path) {
        if (_csSubdomainsOn) {
            return 'https://' + subdomain + '.' + _csMainDomain + _csLangPrefix + path;
        }
        // Non-subdomain: rewrite subdomain-specific path patterns to /converter/subdomain/fmt
        var m;
        if ((m = path.match(/^\/(convert-to-|convert-for-)(.+)$/))) {
            return _csLangPrefix + '/converter/' + subdomain + '/' + m[2];
        }
        if ((m = path.match(/^\/compress-(.+)$/))) {
            return _csLangPrefix + '/converter/' + subdomain + '/' + m[1];
        }
        // /do/ and /convert/src-to-tgt paths work as-is (non-subdomain routes exist)
        return _csLangPrefix + path;
    }

    var _tgtUrl;

    // Source category drives the primary routing decision
    if (_srcCat === 'pdf') {
        _tgtUrl = buildUrl('pdf', '/do/' + tgt);
    } else if (_srcCat === 'device' || _srcCat === 'webservice') {
        _tgtUrl = buildUrl(_srcCat, '/convert-for-' + tgt);
    } else if (_srcCat === 'archive') {
        _tgtUrl = buildUrl('archive', '/convert-to-' + tgt);
    } else if (_tgtCat === 'device' || _tgtCat === 'webservice') {
        // Cross-category: target is a device/webservice format
        _tgtUrl = buildUrl(_tgtCat, '/convert-for-' + tgt);
    } else if (_tgtCat === 'archive') {
        // Cross-category: target is an archive format
        _tgtUrl = buildUrl('archive', '/convert-to-' + tgt);
    } else {
        _tgtUrl = buildUrl(_srcCat, '/convert/' + src + '-to-' + tgt);
    }

    window.location.href = _tgtUrl;
}
</script>
{% endblock %}