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


{% set _page_id = normalize_page_id(filetype=filetype, fileformat=fileformat, source_format=source_format if source_format is defined else none) %}
{% set _is_pair = source_format is defined and source_format %}
{% set _target_page_id = normalize_page_id(filetype=filetype, fileformat=fileformat) if _is_pair else none %}
{% set _category_page_id = normalize_page_id(filetype=filetype) if _is_pair else none %}
{% 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 _cms_ext_box_text = get_page_content(_page_id, 'extension_box_text', g.lang_code) %}
{% if _is_pair %}
{% set _cms_title = _cms_title or get_page_content(_target_page_id, 'title', g.lang_code) or get_page_content(_category_page_id, 'title', g.lang_code) %}
{% set _cms_desc = _cms_desc or get_page_content(_target_page_id, 'description', g.lang_code) or get_page_content(_category_page_id, 'description', g.lang_code) %}
{% set _cms_heading = _cms_heading or get_page_content(_target_page_id, 'page_heading', g.lang_code) or get_page_content(_category_page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = _cms_page_desc or get_page_content(_target_page_id, 'page_description', g.lang_code) or get_page_content(_category_page_id, 'page_description', g.lang_code) %}
{% set _cms_head_html = _cms_head_html or get_page_content(_target_page_id, 'head_html', g.lang_code) or get_page_content(_category_page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = _cms_og_image or get_page_content(_target_page_id, 'og_image', g.lang_code) or get_page_content(_category_page_id, 'og_image', g.lang_code) %}
{% set _cms_filetype_desc = _cms_filetype_desc or get_page_content(_target_page_id, 'filetype_description', g.lang_code) or get_page_content(_category_page_id, 'filetype_description', g.lang_code) %}
{% set _cms_format_def = _cms_format_def or get_page_content(_target_page_id, 'format_definition', g.lang_code) or get_page_content(_category_page_id, 'format_definition', g.lang_code) %}
{% set _cms_ext_box_text = _cms_ext_box_text or get_page_content(_target_page_id, 'extension_box_text', g.lang_code) or get_page_content(_category_page_id, 'extension_box_text', g.lang_code) %}
{% endif %}
{% 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 %}
        {% if available_types()[filetype]["category"] == "tool" %}
            {% if fileformat is defined and fileformat != none %}
            {{ _(available_types()[filetype]["_prefix"]) | replace("{}", fileformat) | splitpart(0, '_') }} | OnlineConvert.cc
            {% else %}
            {{ available_types()[filetype]["type"] }} | OnlineConvert.cc
            {% endif %}
        {% else %}
            {% if source_format is defined and source_format and fileformat is not none %}
                {% trans src=source_format.upper(), fmt=fileformat.upper() %}Free Online {{ src }} to {{ fmt }} Converter{% endtrans %} - Onlineconvert.cc
            {% elif not available_types()[filetype]["_prefix"] %}
                 {% trans ft=filetype.capitalize() %}Free Online {{ ft }} Converter{% endtrans %} {% if fileformat is not none %} {% trans fmt=fileformat.upper() %}to {{ fmt }}{% endtrans %} - Onlineconvert.cc {% endif %}
            {% else %}
                {{ _(available_types()[filetype]["_prefix"]) | replace("{}", fileformat) | replace("-", " ") | splitpart(0, '_') }} |  OnlineConvert.cc
            {% endif %}
        {% endif %}
    {% endif %}
{% endblock %}

{% block description %}
    {%- if _cms_desc -%}
        {{ _cms_desc }}
    {%- elif _cms_ext_box_text -%}
        {{ _cms_ext_box_text }}
    {%- elif request.path in seo -%}
        {{ seo[request.path]["description"] }}
    {%- else -%}
        {%- if source_format is defined and source_format and fileformat is not none -%}
            {{ get_definition(source_format) }} {{ get_definition(fileformat) }}
        {%- else -%}
            {{ get_definition(fileformat) }}
        {%- endif -%}
    {%- endif -%}
{% endblock %}

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

{% block head %}
{{ super() }}
<link rel="stylesheet" href="/static/css/drop_uploader2.css">
<style>
    .options-holder-container .je-object__title {
        font-size: 0.875rem;
        text-transform: lowercase;
        letter-spacing: 0.025em;
        font-weight: 400;
    }
    .options-holder-container label::first-letter {
        text-transform: uppercase;
    }
    .options-holder-container .form-group {
        margin-bottom: 0.85rem;
    }
    /* Hide JSONEditor's inline description text — tooltips handle this */
    .options-holder-container .form-text,
    .options-holder-container p.form-text,
    .options-holder-container small.form-text,
    .options-holder-container .help-block,
    .options-holder-container span.help-block {
        display: none !important;
    }
    /* Section separator */
    .cv-opt-separator {
        border: none;
        border-top: 1px solid #e5e7eb;
        margin: 0.5rem 0 0.9rem;
    }
    .dark .cv-opt-separator { border-top-color: #374151; }
    /* Label colon helper */
    .cv-label-text::after { content: ':'; }
    .options-holder-container .form-control,
    .options-holder-container input[type="text"],
    .options-holder-container input[type="number"],
    .options-holder-container input[type="email"],
    .options-holder-container input[type="url"],
    .options-holder-container textarea,
    .options-holder-container select {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border-radius: 0.75rem;
        border: 1px solid #e5e7eb;
        background-color: #f9fafb;
        color: #374151;
        font-size: 0.875rem;
        line-height: 1.25rem;
        outline: none;
        transition: all 0.2s ease;
    }
    .dark .options-holder-container .form-control,
    .dark .options-holder-container input[type="text"],
    .dark .options-holder-container input[type="number"],
    .dark .options-holder-container input[type="email"],
    .dark .options-holder-container input[type="url"],
    .dark .options-holder-container textarea,
    .dark .options-holder-container select {
        border-color: #374151;
        background-color: #1f2937;
        color: #d1d5db;
    }
    .options-holder-container .form-control:focus,
    .options-holder-container input:focus,
    .options-holder-container textarea:focus,
    .options-holder-container select:focus {
        border-color: #3B82F6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
    .options-holder-container label {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        font-size: 0.8125rem;
        font-weight: 500;
        margin-bottom: 0.375rem;
    }
    .options-holder-container .form-check {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: 0.875rem;
    }
    .options-holder-container .form-check-input {
        width: 1rem;
        height: 1rem;
        border-radius: 0.25rem;
        accent-color: #3B82F6;
    }

    /* ── Option tooltip icons ─────────────────────────────────────── */
    .cv-opt-info {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: default;
        margin-left: 0.35em;
        flex-shrink: 0;
    }
    .cv-opt-info-icon {
        color: #3B82F6;
        font-size: 0.72rem;
        line-height: 1;
        opacity: 0.8;
        transition: opacity 0.15s;
    }
    .dark .cv-opt-info-icon { color: #60A5FA; }
    .cv-opt-info:hover .cv-opt-info-icon { opacity: 1; }

    /* Global floating tooltip (appended to body, positioned by JS) */
    #cv-global-tooltip {
        display: none;
        position: fixed;
        background: #1f2937;
        color: #f9fafb;
        font-size: 0.72rem;
        font-weight: 400;
        line-height: 1.45;
        padding: 0.45rem 0.7rem;
        border-radius: 0.5rem;
        width: 230px;
        max-width: 260px;
        word-break: break-word;
        z-index: 99999;
        box-shadow: 0 4px 16px rgba(0,0,0,0.28);
        pointer-events: none;
        transition: opacity 0.1s;
    }
    #cv-global-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 16px;
        border: 5px solid transparent;
        border-top-color: #1f2937;
    }
    .dark #cv-global-tooltip { background: #374151; color: #f3f4f6; }
    .dark #cv-global-tooltip::after { border-top-color: #374151; }

    /* ── Unit suffix badges ───────────────────────────────────────── */
    .cv-input-wrap {
        display: flex;
        align-items: stretch;   /* badge stretches to exact input height */
        gap: 0;
        width: 100%;
    }
    .cv-input-wrap input {
        flex: 1;
        min-width: 0;
        width: auto !important;
        border-radius: 0.75rem 0 0 0.75rem !important;
    }
    .cv-unit-badge {
        display: flex;
        align-items: center;    /* centre text within the stretched height */
        padding: 0 0.6rem;
        /* no fixed height — stretches to match the sibling input */
        background: #e5e7eb;
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 600;
        border: 1px solid #e5e7eb;
        border-left: none;
        border-radius: 0 0.75rem 0.75rem 0;
        white-space: nowrap;
        user-select: none;
        flex-shrink: 0;
    }
    .dark .cv-unit-badge {
        background: #374151;
        color: #9ca3af;
        border-color: #374151;
    }

    /* ── Hide description paragraphs (shown in tooltips instead) ── */
    .options-holder-container p,
    .options-holder-container .form-text,
    .options-holder-container p.form-text,
    .options-holder-container small.form-text,
    .options-holder-container .help-block,
    .options-holder-container span.help-block {
        display: none !important;
    }
    /* ── Remove card chrome from nested object editors ── */
    .options-holder-container .card {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        margin-bottom: 0 !important;
    }
    .options-holder-container .card-header {
        padding: 0 0 0.25rem !important;
        background: none !important;
        border: none !important;
    }
    .options-holder-container .card-body {
        padding: 0 !important;
    }
    /* ── Grid layout for paired sub-fields (width+height, crop edges) ── */
    .options-holder-container .container-fluid {
        padding: 0;
    }
    .options-holder-container .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        flex-wrap: unset !important;
    }
    .options-holder-container .row > .col,
    .options-holder-container .row > [class*="col-"] {
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        min-width: 0;
    }
    /* Every descendant inside a grid cell uses border-box sizing */
    .options-holder-container .row > * *,
    .options-holder-container .row > * {
        box-sizing: border-box !important;
    }
    /* Grid cell contents fill the cell */
    .options-holder-container .row > * > div,
    .options-holder-container .row > * > .form-group,
    .options-holder-container .row > * .cv-input-wrap {
        width: 100% !important;
    }
    /* ── CSS-driven section separators ─────────────────────────── */
    .cv-prop-section + .cv-prop-section {
        border-top: 1px solid #e5e7eb;
        padding-top: 0.9rem;
        margin-top: 0.1rem;
    }
    .dark .cv-prop-section + .cv-prop-section {
        border-top-color: #374151;
    }
    /* ── Inline checkbox groups ── */
    .cv-check-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.35rem 1.5rem !important;
    }

    .drop_zone {
        border: 1px dashed #ffffff !important;
    }
    .drop_uploader.drop_zone .text,
    .drop_zone .text_wrapper,
    .drop_zone .text_wrapper .fa {
        color: #fff !important;
    }
    /* Light mode: if upload plugin renders drop zone with white/light
       background, restore dark text. Same-file later rule wins. */
    html:not(.dark) .drop_uploader.drop_zone .text,
    html:not(.dark) .drop_zone .text_wrapper,
    html:not(.dark) .drop_zone .text_wrapper .fa { color: #1f2937 !important; }
    .file-upload-wrapper {
        border-radius: 1rem;
        box-sizing: border-box;
        position: relative;
        visibility: hidden;
    }
    .file-upload-wrapper.du-ready {
        visibility: visible;
    }
    /* ── Back button ────────────────────────────────────────────────────── */
    .cv-back-btn {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 25;
        display: none;
        align-items: center;
        gap: 5px;
        padding: 0.3rem 0.75rem;
        border-radius: 6px;
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.35);
        color: rgba(255,255,255,0.95);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s;
    }
    .cv-back-btn:hover { background: rgba(255,255,255,0.32); }
    .cv-back-btn.visible { display: inline-flex; }

        /* ── Split "Choose file" button ───────────────────────────────── */
    .cv-upload-split-wrap {
        position: relative;
        display: inline-flex;
        border-radius: 6px;
        overflow: visible;
        
    }
    .cv-split-main {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0.5rem 1rem;
        background: #fff;
        color: #1f2937;
        font-size: 0.875rem;
        font-weight: 600;
        border: none;
        border-radius: 6px 0 0 6px;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.15s;
    }
    .cv-split-main:hover { background: #f3f4f6; }
    .cv-split-chevron {
        display: inline-flex;
        align-items: center;
        padding: 0 0.65rem;
        background: #fff;
        color: #1f2937;
        font-size: 0.75rem;
        border: none;
        border-left: 1px solid #d1d5db;
        border-radius: 0 6px 6px 0;
        cursor: pointer;
        transition: background 0.15s;
    }
    .cv-split-chevron:hover { background: #f3f4f6; }
    .cv-split-chevron i { transition: transform 0.2s; }
    .cv-upload-split-wrap.open .cv-split-chevron i { transform: rotate(180deg); }

    /* Dropdown list */
    .cv-upload-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        min-width: 200px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.13);
        list-style: none;
        margin: 0;
        padding: 4px 0;
        z-index: 200;
    }
    .dark .cv-upload-dropdown {
        background: #1f2937;
        border-color: #374151;
    }
    .cv-upload-dropdown li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.55rem 1rem;
        font-size: 0.875rem;
        color: #1f2937;
        cursor: pointer;
        transition: background 0.12s;
    }
    .dark .cv-upload-dropdown li { color: #e5e7eb; }
    .cv-upload-dropdown li:hover { background: #f3f4f6; }
    .dark .cv-upload-dropdown li:hover { background: #374151; }
    .cv-upload-dropdown li i { width: 18px; text-align: center; }

    /* ── Corner quick-access icons ────────────────────────────────── */
    .cv-upload-corner-icons {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        display: flex;
        gap: 6px;
        z-index: 20;
    }
    .cv-upload-corner-icons button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255,255,255,0.18);
        border: 1px solid rgba(255,255,255,0.35);
        color: rgba(255,255,255,0.9);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
        transition: background 0.15s, border-color 0.15s;
        padding: 0;
    }
    .cv-upload-corner-icons button:hover {
        background: rgba(255,255,255,0.32);
        border-color: rgba(255,255,255,0.6);
    }

    /* ── Clipboard modal ──────────────────────────────────────────── */
    #clipboard-modal {
        position: fixed; inset: 0; z-index: 9998;
        background: rgba(0,0,0,0.45);
        display: none;
        align-items: center;
        justify-content: center;
    }
    #clipboard-modal.show { display: flex; }
    .cv-clip-modal-box {
        background: #fff;
        border-radius: 12px;
        padding: 28px 28px 20px;
        max-width: 440px;
        width: 90%;
        box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    }
    .dark .cv-clip-modal-box {
        background: #1e293b;
        color: #e2e8f0;
    }
    .cv-clip-modal-box h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: #111827;
        margin: 0 0 20px;
        line-height: 1.35;
    }
    .dark .cv-clip-modal-box h3 { color: #f1f5f9; }
    .cv-clip-row {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 14px;
        font-size: 0.93rem;
        color: #374151;
    }
    .dark .cv-clip-row { color: #cbd5e1; }
    .cv-clip-row svg, .cv-clip-row i { flex-shrink: 0; }
    .cv-clip-modal-desc {
        font-size: 0.88rem;
        color: #6b7280;
        margin: 16px 0 20px;
        line-height: 1.5;
    }
    .dark .cv-clip-modal-desc { color: #94a3b8; }
    .cv-clip-modal-footer {
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #e5e7eb;
        padding-top: 14px;
    }
    .dark .cv-clip-modal-footer { border-color: #334155; }
    .cv-clip-close-btn {
        padding: 0.45rem 1.1rem;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #374151;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
    }
    .dark .cv-clip-close-btn { background: #1e293b; border-color: #475569; color: #e2e8f0; }
    .cv-clip-close-btn:hover { background: #f3f4f6; }
    .dark .cv-clip-close-btn:hover { background: #334155; }

    .upload-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    @media (min-width: 1024px) {
        .upload-layout {
            display: grid;
            grid-template-columns: 65% 1fr;
            gap: 1.5rem;
            align-items: start;
        }
    }
    .upload-column {
        min-width: 0;
    }
    .desc-column {
        min-width: 0;
    }
    @media (min-width: 1024px) {
        .desc-column {
            padding-top: 2.25rem;
        }
    }

    /* ── Fixed dropzone panel container size ── */
    .cv-panel-inner {
        height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: visible;
        width: 100%;
    }

    .drop_uploader.drop_zone {
        overflow: visible !important;
        position: relative !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    .drop_uploader .text_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        position: relative;
        z-index: 10;
        transition: opacity 0.3s ease;
    }
    .drop_uploader .text_wrapper .text {
        display: block;
        color: rgba(255,255,255,0.85) !important;
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }
    .drop_uploader .text_wrapper .text a {
        display: none !important;
    }

    .default-cloud-icon {
        width: 64px;
        height: 48px;
        margin-bottom: 1rem;
    }
    .default-cloud-icon svg {
        width: 100%;
        height: 100%;
    }

    .drop_uploader.overlay-active .text_wrapper {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .drop_uploader .errors {
        position: relative !important;
        z-index: 10;
    }
    .drop_uploader .errors p {
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        background: #fef2f2;
        color: #dc2626;
        font-size: 0.875rem;
        border: 1px solid #fecaca;
    }
    .dark .drop_uploader .errors p {
        background: #450a0a;
        color: #fca5a5;
        border-color: #7f1d1d;
    }

    ul.files {
        list-style: none !important;
        padding: 0 !important;
        margin: 0.5rem 0 0 0 !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    ul.files li {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem;
        padding: 0.75rem 1rem !important;
        padding-bottom: calc(0.75rem + 4px) !important;
        margin-top: 0.5rem !important;
        border-radius: 0.75rem !important;
        border: 1px solid #e5e7eb !important;
        background: #fff !important;
        overflow: hidden !important;
        font-size: 0.875rem;
        color: #374151;
        width: auto !important;
        float: none !important;
        height: auto !important;
    }
    .dark ul.files li {
        border-color: #1f2937 !important;
        background: #111827 !important;
        color: #d1d5db;
    }
    ul.files li > i:first-child {
        flex-shrink: 0;
    }
    ul.files li .file_name,
    ul.files li > span:first-of-type {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    ul.files li span {
        width: auto !important;
        display: inline-block;
    }
    ul.files li .size {
        flex-shrink: 0;
        font-size: 0.75rem;
        color: #9ca3af;
    }
    ul.files li .action-delete {
        flex-shrink: 0;
        display: inline-flex !important;
        align-items: center;
        border-radius: 0.5rem;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        opacity: 0.5;
        background: none;
        border: none;
        color: #ef4444;
        transition: opacity 0.2s;
    }
    ul.files li .action-delete:hover {
        opacity: 1;
    }

    ul.files li .progress {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        background: #e5e7eb !important;
        overflow: hidden !important;
        width: 100% !important;
        display: block !important;
    }
    .dark ul.files li .progress {
        background: #374151 !important;
    }
    ul.files li .progress .bar {
        height: 100% !important;
        border-radius: 0 0 0.75rem 0.75rem;
        background: #10B981 !important;
        transition: width 0.3s ease;
        display: block !important;
    }

    ul.files li .du_progress {
        display: none !important;
    }

    ul.files li .upload-badge {
        flex-shrink: 0;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.2rem 0.5rem;
        border-radius: 0.375rem;
        background: #fef3c7;
        color: #d97706;
        animation: badge-pulse 1.5s ease-in-out infinite;
    }
    .dark ul.files li .upload-badge {
        background: #451a03;
        color: #fbbf24;
    }
    ul.files li.upload-done .upload-badge {
        background: #d1fae5;
        color: #059669;
        animation: none;
    }
    .dark ul.files li.upload-done .upload-badge {
        background: #064e3b;
        color: #34d399;
    }

    .upload-progress-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 20;
        border-radius: 0.75rem;
        cursor: default;
    }
    .upload-progress-overlay .overlay-uploading,
    .upload-progress-overlay .overlay-complete {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .upload-progress-overlay.state-uploading .overlay-uploading {
        display: flex;
    }
    .upload-progress-overlay.state-complete .overlay-complete {
        display: flex;
    }

    .overlay-complete-buttons {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.25rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .overlay-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1.25rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    .overlay-btn-white {
        background: #fff;
        color: #374151;
    }
    .overlay-btn-white:hover {
        background: #f3f4f6;
    }
    .overlay-btn-start {
        background: #3B82F6;
        color: #fff;
    }
    .overlay-btn-start:hover {
        background: #2563eb;
    }

    .upload-spinner-wrap {
        position: relative;
        width: 96px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .upload-spinner-wrap .spinner-ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,0.15);
        border-top-color: #fff;
        animation: spin 1s linear infinite;
    }
    .upload-spinner-wrap .cloud-icon-inner {
        width: 48px;
        height: 36px;
    }
    .upload-spinner-wrap .cloud-icon-inner svg {
        width: 100%;
        height: 100%;
    }

    .complete-icon {
        width: 72px;
        height: 72px;
        animation: complete-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
        filter: drop-shadow(0 0 16px rgba(255,255,255,0.3));
    }
    .complete-icon svg {
        width: 100%;
        height: 100%;
    }

    .upload-complete-text {
        margin-top: 0.75rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: rgba(255,255,255,0.85);
        text-align: center;
        letter-spacing: 0.02em;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    @keyframes complete-pop {
        0% { transform: scale(0.5); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    @keyframes badge-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
</style>
{% endblock %}

{% block header_menu %}
<ul class="flex items-center">
    <li class="relative" data-dropdown="tool-tip">
        <button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
            {% 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 left-0 mt-2 w-auto min-w-[300px] 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 %}
{% set _cv_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 _cv_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 _cv_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">
        <!-- Two Column Layout -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-stretch">
            
            <!-- Left Column - Title and 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 available_types()[filetype]["category"] == "tool" %}
                        {% if fileformat is defined and fileformat != none %}
                            {{ _(available_types()[filetype]["_prefix"]) | replace("{}", fileformat) | splitpart(0, '_') }}
                        {% else %}
                            {{ available_types()[filetype]["title"] }}
                        {% endif %}
                    {% else %}
                        {%- if request.path in seo -%}
                            {% trans title=seo[request.path]["title"] %}Free {{ title }} Converter{% endtrans %}
                        {%- else -%}
                            {% if source_format is defined and source_format and fileformat is not none %}
                                {% trans src=source_format.upper(), fmt=fileformat.upper() %}Free Online {{ src }} to {{ fmt }} Converter{% endtrans %}
                            {% elif not available_types()[filetype]["_prefix"] %}
                                {% trans ft=filetype.capitalize() %}Free Online {{ ft }} Converter{% endtrans %} {% if fileformat is not none %} {% trans fmt=fileformat.upper() %}to {{ fmt }}{% endtrans %} {% endif %}
                            {% else %}
                                {{ _(available_types()[filetype]["_prefix"]) | replace("{}", fileformat) | replace("-", " ") | splitpart(0, '_') }} | OnlineConvert.cc
                            {% endif %}
                        {% endif %}
                    {% 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"] }}
                    {%- else -%}
                        {%- if request.path in headings -%}
                            {{ headings[request.path]['description'] }}
                        {%- else -%}
                            {%- if source_format is defined and source_format and fileformat is not none -%}
                                {{ get_definition(source_format) }} {{ get_definition(fileformat) }}
                            {%- else -%}
                                {{ get_definition(fileformat) }}
                            {%- endif -%}
                        {%- endif -%}
                    {%- endif -%}
                </p>
            </div>
            
            <!-- Right Column - 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 _cv_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="source-selector">
                        <button type="button" onclick="toggleSourceDropdown()"
                            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">{% if source_format %}{{ source_format.upper() }}{% else %}...{% endif %}</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="toggleTargetDropdown()"
                            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">{% if fileformat %}{{ fileformat.upper() }}{% else %}...{% endif %}</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>

<!-- Dropdown z-index + dark mode only — positioning handled by base.html JS -->
<style>
    #sourceDropdown, #targetDropdown { z-index: 9999 !important; }
    .dark #sourceDropdown, .dark #targetDropdown { background:#1f2937; border-color:#374151; }
    #sourceDropdown:not(.hidden), #targetDropdown:not(.hidden) { display:block; animation:cvDropFade 0.15s ease; }
    @keyframes cvDropFade { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
</style>

<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-8">
    {% with messages = get_flashed_messages(category_filter=["error"]) %}{% for msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:"error",msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

    <div class="upload-layout">
        <div class="upload-column">
            <div class="file-uploader file-uploader-area">
                <div class="flex items-center justify-between mb-3">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                        {% trans %}Upload your files{% endtrans %}
                    </label>
                    <span class="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
                        {% set _batch_display = plan_max_batch_files if plan_max_batch_files is defined else (plan_max_files if plan_max_files is defined else 20) %}
                        {% trans %}Max{% endtrans %} {% if _batch_display >= 9999 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ _batch_display }}{% endif %} {% trans %}files per batch, each up to{% endtrans %} {{ plan_max_size_mb if plan_max_size_mb is defined else (site_settings.server_max_upload_mb|default(500)) }}MB
                    </span>
                </div>


                <div class="relative group">
                    <div class="file-upload-wrapper relative rounded-2xl" style="background: linear-gradient(135deg, #3B82F6, #8B5CF6); border: 2px dashed rgba(255,255,255,0.4); padding: 2rem;">
                        <!-- Back button: shown when a non-file panel is active -->
                        <button type="button" id="cv-back-btn" class="cv-back-btn" onclick="switchUploadTab('file')">
                            <i class="fa fa-arrow-left"></i> {% trans %}Back{% endtrans %}
                        </button>
                        <div class="rounded-xl cv-panel-inner" style="padding: 1rem;">

                            <!-- URL upload panel -->
                            <div id="uptab-panel-url" class="hidden py-4 text-center w-full">
                                <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-white/10 flex items-center justify-center">
                                    <i class="fa fa-link text-2xl text-white"></i>
                                </div>
                                <p class="text-white/80 text-sm mb-3">{% trans %}Paste a direct file URL to import{% endtrans %}</p>
                                <div class="flex gap-2 items-center">
                                    <input type="url" id="url-input-field" placeholder="{{ _('https://example.com/file.jpg') }}"
                                        class="flex-1 px-3 py-2 rounded-lg border border-white/30 bg-white/10 text-white placeholder-white/50 text-sm focus:outline-none focus:border-white/60"
                                        data-testid="input-url-upload">
                                    <button type="button" onclick="addUrlFile()" id="btn-add-url"
                                        class="px-4 py-2 rounded-lg bg-white text-blue-600 font-semibold text-sm hover:bg-blue-50 transition-all"
                                        data-testid="btn-add-url">
                                        <i class="fa fa-plus mr-1"></i>{% trans %}Add{% endtrans %}
                                    </button>
                                </div>

                            </div>

                            <!-- Google Drive panel -->
                            <div id="uptab-panel-gdrive" class="hidden py-4 text-center">
                                <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-white/10 flex items-center justify-center">
                                    <i class="fab fa-google-drive text-2xl text-white"></i>
                                </div>
                                <p class="text-white font-semibold mb-1">{% trans %}Import from Google Drive{% endtrans %}</p>
                                <p class="text-white/60 text-xs mb-4">{% trans %}Pick files directly from your Google Drive account{% endtrans %}</p>
                                <button type="button" onclick="openGoogleDrivePicker()"
                                    class="px-5 py-2.5 rounded-xl bg-white text-gray-800 font-semibold text-sm hover:bg-blue-50 transition-all shadow-sm"
                                    data-testid="btn-gdrive-picker">
                                    <i class="fab fa-google mr-2"></i>{% trans %}Choose from Google Drive{% endtrans %}
                                </button>
                            </div>

                            <!-- Dropbox panel -->
                            <div id="uptab-panel-dropbox" class="hidden py-4 text-center">
                                <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-white/10 flex items-center justify-center">
                                    <i class="fab fa-dropbox text-2xl text-white"></i>
                                </div>
                                <p class="text-white font-semibold mb-1">{% trans %}Import from Dropbox{% endtrans %}</p>
                                <p class="text-white/60 text-xs mb-4">{% trans %}Choose files directly from your Dropbox{% endtrans %}</p>
                                <button type="button" onclick="openDropboxChooser()"
                                    class="px-5 py-2.5 rounded-xl bg-white text-gray-800 font-semibold text-sm hover:bg-blue-50 transition-all shadow-sm"
                                    data-testid="btn-dropbox-chooser">
                                    <i class="fab fa-dropbox mr-2"></i>{% trans %}Choose from Dropbox{% endtrans %}
                                </button>
                            </div>

                            <!-- OneDrive panel -->
                            <div id="uptab-panel-onedrive" class="hidden py-4 text-center">
                                <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-white/10 flex items-center justify-center">
                                    <i class="fab fa-microsoft text-2xl text-white"></i>
                                </div>
                                <p class="text-white font-semibold mb-1">{% trans %}Import from OneDrive{% endtrans %}</p>
                                <p class="text-white/60 text-xs mb-4">{% trans %}Pick files from your Microsoft OneDrive{% endtrans %}</p>
                                <button type="button" onclick="openOneDrivePicker()"
                                    class="px-5 py-2.5 rounded-xl bg-white text-gray-800 font-semibold text-sm hover:bg-blue-50 transition-all shadow-sm"
                                    data-testid="btn-onedrive-picker">
                                    <i class="fab fa-microsoft mr-2"></i>{% trans %}Choose from OneDrive{% endtrans %}
                                </button>
                            </div>

                            <div id="uptab-panel-file">
                            <input id="uploader" type="file"
                                name="files" autocomplete="off"
                                data-method="ajax" data-count="{{ plan_max_batch_files if plan_max_batch_files is defined else (plan_max_files if plan_max_files is defined else 20) }}"
                                data-maxfilesize="{{ plan_max_size_bytes if plan_max_size_bytes is defined else ((site_settings.server_max_upload_mb|default(500))|int * 1024 * 1024) }}"
                                {%- if available_types()[filetype]['allowed'] | length > 0 -%}
                                accept="
                                    {%- for allow in available_types()[filetype]['allowed'] -%}
                                    {%- if available_types()[filetype]['disallowed'] -%}
                                        {%- if allow not in available_types()[filetype]['disallowed'][fileformat | splitpart(0, '_')] -%}
                                            {{'.' + allow.lower()}},
                                        {%- endif -%}
                                    {%- else -%}
                                        {{'.' + allow.lower()}},
                                    {%- endif -%}
                                    {%- endfor -%}
                                "
                                {%- endif -%}
                                multiple>

                            <div id="upload-progress-overlay" class="upload-progress-overlay" style="display:none;">
                                <div class="overlay-uploading">
                                    <div class="upload-spinner-wrap">
                                        <div class="spinner-ring"></div>
                                        <div class="cloud-icon-inner">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48" fill="none">
                                                <path d="M50 40H10C5.6 40 2 36.4 2 32C2 28 4.8 24.6 8.6 24C8.2 22.8 8 21.4 8 20C8 12.8 13.6 7 20.8 6C28 5 34.6 9.6 36.4 16.4C37.4 16.2 38.6 16 40 16C46.6 16 52 21.4 52 28V28.2C57 29.2 61 33.6 61 39C61 39.4 60.8 39.8 60.8 40" stroke="rgba(255,255,255,0.9)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M32 38V22M32 22L24 30M32 22L40 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                <div class="overlay-complete" id="overlay-complete-area">
                                    <div class="complete-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
                                            <path d="M12 8h28l12 12v36a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4z" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.9)" stroke-width="2.5" stroke-linejoin="round"/>
                                            <path d="M40 8v12h12" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="2.5" stroke-linejoin="round"/>
                                            <path d="M22 36l6 6 14-14" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </div>
                                    <p class="upload-complete-text">{% trans %}File added! Start the task or add more files{% endtrans %}</p>
                                    <div class="overlay-complete-buttons">
                                        <button type="button" id="btn-add-more" class="overlay-btn overlay-btn-white" data-testid="button-add-more">
                                            <i class="fa fa-file-circle-plus"></i> {% trans %}Add more files{% endtrans %}
                                        </button>
                                        {% if options != "{}" %}
                                        <button type="button" id="btn-overlay-settings" class="overlay-btn overlay-btn-white" data-testid="button-overlay-settings">
                                            <i class="fa fa-gear"></i> {% trans %}Settings{% endtrans %}
                                        </button>
                                        {% endif %}
                                        <button type="button" id="btn-overlay-start" class="overlay-btn overlay-btn-start" data-testid="button-overlay-start">
                                            {% trans %}START{% endtrans %} <i class="fa fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            </div><!-- /uptab-panel-file -->

                            <!-- ── Choose file split-button + dropdown ── -->
                            <div id="cv-split-btn-center" class="flex justify-center">
                            <div class="cv-upload-split-wrap" id="cv-upload-split-wrap">
                                <button type="button" class="cv-split-main"
                                    onclick="openFilePicker(); switchUploadTab('file');"
                                    data-testid="btn-choose-file">
                                    <i class="fa fa-file-arrow-up"></i>
                                    {% trans %}Choose file{% endtrans %}
                                </button>
                                <button type="button" class="cv-split-chevron"
                                    onclick="toggleUploadDropdown(event)"
                                    aria-label="{% trans %}More upload options{% endtrans %}">
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                                <ul class="cv-upload-dropdown hidden" id="cv-upload-dropdown">
                                    <li onclick="openFilePicker(); switchUploadTab('file'); closeUploadDropdown();">
                                        <i class="fa fa-folder-open text-gray-500"></i>
                                        {% trans %}From device{% endtrans %}
                                    </li>
                                    <li onclick="switchUploadTab('url'); closeUploadDropdown();">
                                        <i class="fa fa-link text-gray-500"></i>
                                        {% trans %}From URL{% endtrans %}
                                    </li>
                                    {% if site_settings is defined and site_settings.get('dropbox_app_key') %}
                                    <li onclick="switchUploadTab('dropbox'); closeUploadDropdown();">
                                        <i class="fab fa-dropbox" style="color:#0061FF;"></i>
                                        {% trans %}From Dropbox{% endtrans %}
                                    </li>
                                    {% endif %}
                                    {% if site_settings is defined and site_settings.get('google_drive_client_id') and site_settings.get('google_drive_api_key') %}
                                    <li onclick="switchUploadTab('gdrive'); closeUploadDropdown();">
                                        <i class="fab fa-google-drive" style="color:#4285F4;"></i>
                                        {% trans %}From Google Drive{% endtrans %}
                                    </li>
                                    {% endif %}
                                    {% if site_settings is defined and site_settings.get('onedrive_client_id') %}
                                    <li onclick="switchUploadTab('onedrive'); closeUploadDropdown();">
                                        <i class="fab fa-microsoft" style="color:#0078D4;"></i>
                                        {% trans %}From OneDrive{% endtrans %}
                                    </li>
                                    {% endif %}
                                    <li onclick="openClipboardModal(); closeUploadDropdown();">
                                        <i class="fa fa-clipboard text-gray-500"></i>
                                        {% trans %}From Clipboard{% endtrans %}
                                    </li>
                                </ul>
                            </div>
                            </div><!-- /cv-split-btn-center -->
                            <!-- /split-button -->

                        </div>

                        <!-- ── Corner quick-access icons ─────────────────── -->
                        <div class="cv-upload-corner-icons">
                            <button type="button" onclick="openFilePicker(); switchUploadTab('file');" title="{% trans %}From device{% endtrans %}">
                                <i class="fa fa-folder-open"></i>
                            </button>
                            <button type="button" onclick="switchUploadTab('url');" title="{% trans %}From URL{% endtrans %}">
                                <i class="fa fa-link"></i>
                            </button>
                            {% if site_settings is defined and site_settings.get('dropbox_app_key') %}
                            <button type="button" onclick="switchUploadTab('dropbox');" title="{% trans %}From Dropbox{% endtrans %}">
                                <i class="fab fa-dropbox"></i>
                            </button>
                            {% endif %}
                            {% if site_settings is defined and site_settings.get('google_drive_client_id') and site_settings.get('google_drive_api_key') %}
                            <button type="button" onclick="switchUploadTab('gdrive');" title="{% trans %}From Google Drive{% endtrans %}">
                                <i class="fab fa-google-drive"></i>
                            </button>
                            {% endif %}
                            {% if site_settings is defined and site_settings.get('onedrive_client_id') %}
                            <button type="button" onclick="switchUploadTab('onedrive');" title="{% trans %}From OneDrive{% endtrans %}">
                                <i class="fab fa-microsoft"></i>
                            </button>
                            {% endif %}
                            <button type="button" onclick="openClipboardModal();" title="{% trans %}From Clipboard{% endtrans %}">
                                <i class="fa fa-clipboard"></i>
                            </button>
                        </div>
                        <!-- /corner icons -->
                    </div>
                </div>
            </div>
        </div>

        <div class="desc-column">
            <div id="advert" class="sticky top-24">
               
            </div>
        </div>
    </div>

    <form method="post" id="converter-form" class="mt-5">
        <input type="hidden" name="options" {% if options == "{}" %} value="{}" {% endif %}>
        <button id="submit_btn" disabled class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-3.5 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold text-base shadow-lg shadow-accent/30 hover:shadow-xl hover:shadow-accent/40 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none transition-all duration-300" type="submit" data-testid="button-convert">
            <i class="fa fa-arrow-circle-right text-lg"></i> {% trans %}Convert files{% endtrans %}
        </button>
    </form>

    <div id="files-list-container" class="mt-4"></div>

    <!-- ── Clipboard paste modal ──────────────────────────────────── -->
    <div id="clipboard-modal">
        <div class="cv-clip-modal-box">
            <h3>{% trans %}Upload files directly from your clipboard{% endtrans %}</h3>
            <div class="cv-clip-row">
                <!-- Windows logo (4 coloured squares) -->
                <svg viewBox="0 0 20 20" width="26" height="26" style="flex-shrink:0;">
                    <rect x="0"  y="0"  width="9" height="9" fill="#F25022"/>
                    <rect x="11" y="0"  width="9" height="9" fill="#7FBA00"/>
                    <rect x="0"  y="11" width="9" height="9" fill="#00A4EF"/>
                    <rect x="11" y="11" width="9" height="9" fill="#FFB900"/>
                </svg>
                <span>{% trans %}Press{% endtrans %} <strong>Ctrl + V</strong> {% trans %}to paste files{% endtrans %}</span>
            </div>
            <div class="cv-clip-row">
                <i class="fab fa-apple" style="font-size:24px; color:#555;"></i>
                <span>{% trans %}Press{% endtrans %} <strong>Cmd + V</strong> {% trans %}to paste files{% endtrans %}</span>
            </div>
            <p class="cv-clip-modal-desc">{% trans %}This works for images, screenshots, and other file types. Try it now!{% endtrans %}</p>
            <div class="cv-clip-modal-footer">
                <button class="cv-clip-close-btn" onclick="closeClipboardModal()">{% trans %}Close{% endtrans %}</button>
            </div>
        </div>
    </div>

    <div id="url-download-overlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.55);backdrop-filter:blur(3px);align-items:center;justify-content:center;flex-direction:column;gap:16px;">
        <div style="background:#1e293b;border-radius:16px;padding:32px 40px;text-align:center;max-width:340px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,0.5);">
            <div style="width:56px;height:56px;border:4px solid rgba(255,255,255,0.15);border-top-color:#6366f1;border-radius:50%;animation:url-spin 0.8s linear infinite;margin:0 auto 20px;"></div>
            <p style="color:#f1f5f9;font-size:1rem;font-weight:600;margin:0 0 8px;">{% trans %}Downloading file…{% endtrans %}</p>
            <p style="color:#94a3b8;font-size:0.8rem;margin:0;">{% trans %}Fetching your file from the URL, then converting. This may take a moment.{% endtrans %}</p>
        </div>
    </div>
    <style>@keyframes url-spin{to{transform:rotate(360deg)}}</style>

    {% if options != "{}" %}
    <div class="mt-8 flex flex-col lg:flex-row gap-6">
        <div class="w-full lg:w-[65%]">
            <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                <button class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" onclick="var el = document.getElementById('collapseOne'); el.classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180');" data-testid="button-settings">
                    <h3 class="font-semibold text-gray-900 dark:text-white text-sm flex items-center gap-2">
                        <i class="fa fa-sliders text-primary dark:text-primary-light text-xs"></i>
                        {% trans %}Customize Settings{% endtrans %}
                    </h3>
                    <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform duration-200"></i>
                </button>
                <div id="collapseOne" class="px-6 pb-6 border-t border-gray-100 dark:border-gray-800">
                    <div id="options_holder" class="options-holder-container mt-4"></div>
                </div>
            </div>

            <form method="post" id="converter-form2" class="mt-5">
                <input type="hidden" name="options" {% if options == "{}" %} value="{}" {% endif %}>
                <button id="submit_btn2" disabled class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-3.5 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold text-base shadow-lg shadow-accent/30 hover:shadow-xl hover:shadow-accent/40 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none transition-all duration-300" type="submit" data-testid="button-convert-2">
                    <i class="fa fa-arrow-circle-right text-lg"></i> {% trans %}Convert files{% endtrans %}
                </button>
            </form>
        </div>

        <div class="w-full lg:w-[35%]">
            <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-5 py-3.5 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">
                    <h3 class="font-semibold text-gray-900 dark:text-white text-sm flex items-center gap-2">
                        <i class="fa fa-circle-info text-primary dark:text-primary-light text-xs"></i>
                        {% trans %}Description{% endtrans %}
                    </h3>
                </div>
                <div class="px-5 py-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
                    {% if _cms_filetype_desc %}
                    <p>{{ _cms_filetype_desc }}</p>
                    {% endif %}

                    {% if source_format is defined and source_format and fileformat is not none %}
                        {# Both source and target formats: show CMS/SEO intro (if any), then both format definitions #}
                        {% if _cms_ext_box_text or (request.path in seo) or (request.path in headings) %}
                        <p{% if _cms_filetype_desc %} class="mt-3"{% endif %}>
                            {%- if _cms_ext_box_text -%}{{ _cms_ext_box_text }}
                            {%- elif request.path in seo -%}{{ seo[request.path]["description"] }}
                            {%- elif request.path in headings -%}{{ headings[request.path]['description'] }}
                            {%- endif -%}
                        </p>
                        {% endif %}
                        {% set _src_def = get_definition(source_format) %}
                        {% if _src_def %}
                        <p class="mt-3">{{ _src_def }}</p>
                        {% endif %}
                        {% set _tgt_def = get_definition(fileformat) %}
                        {% if _tgt_def %}
                        <p class="mt-3">{{ _tgt_def }}</p>
                        {% endif %}
                    {% else %}
                        {# No source format — show a single description #}
                        <p{% if _cms_filetype_desc %} class="mt-3"{% endif %}>
                            {%- if _cms_ext_box_text -%}{{ _cms_ext_box_text }}
                            {%- elif request.path in seo -%}{{ seo[request.path]["description"] }}
                            {%- elif request.path in headings -%}{{ headings[request.path]['description'] }}
                            {%- else -%}{{ get_definition(fileformat) }}
                            {%- endif -%}
                        </p>
                    {% endif %}

                    {% if _cms_format_def and not _cms_ext_box_text %}
                    <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
                        <p>{{ _cms_format_def }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

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

{% block footer %}
{{ super() }}
<script>
window._gPickerConfig = {
    clientId:        '{{ site_settings.get("google_drive_client_id", "") if site_settings is defined else "" }}',
    apiKey:          '{{ site_settings.get("google_drive_api_key", "") if site_settings is defined else "" }}',
    oneDriveClientId:'{{ site_settings.get("onedrive_client_id", "") if site_settings is defined else "" }}'
};
</script>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
<script>
/* jQuery Slim lacks $.ajax — polyfill returning a .done()/.fail()/.always() deferred */
  if (typeof $ !== 'undefined' && typeof $.ajax === 'undefined') {
      $.ajax = jQuery.ajax = function(opts) {
          var o = (typeof opts === 'string') ? { url: opts } : (opts || {});
          var method = (o.method || o.type || 'GET').toUpperCase();

          /* Micro-deferred: collects callbacks before or after resolution */
          var _doneList = [], _failList = [], _alwaysList = [], _resolved = false, _failed = false, _args = [];
          var jqXHR = {
              done:   function(fn) { if (_resolved) fn.apply(null, _args); else _doneList.push(fn);  return jqXHR; },
              fail:   function(fn) { if (_failed)   fn.apply(null, _args); else _failList.push(fn);  return jqXHR; },
              always: function(fn) { if (_resolved || _failed) fn.apply(null, _args); else _alwaysList.push(fn); return jqXHR; },
              then:   function(d, f) { jqXHR.done(d || function(){}); jqXHR.fail(f || function(){}); return jqXHR; }
          };

          var xhr = new XMLHttpRequest();
          xhr.open(method, o.url, true);
          if (o.contentType) xhr.setRequestHeader('Content-Type', o.contentType);
          if (o.headers) { Object.keys(o.headers).forEach(function(k) { xhr.setRequestHeader(k, o.headers[k]); }); }

          xhr.onload = function() {
              var data = xhr.responseText;
              try { data = JSON.parse(data); } catch(e) {}
              var ok = xhr.status >= 200 && xhr.status < 300;
              if (ok) {
                  if (o.success) o.success(data, 'success', xhr);
                  _resolved = true; _args = [data, 'success', xhr];
                  _doneList.forEach(function(fn) { fn.apply(null, _args); });
              } else {
                  if (o.error) o.error(xhr, xhr.statusText, xhr.statusText);
                  _failed = true; _args = [xhr, xhr.statusText, xhr.statusText];
                  _failList.forEach(function(fn) { fn.apply(null, _args); });
              }
              if (o.complete) o.complete(xhr, ok ? 'success' : 'error');
              _alwaysList.forEach(function(fn) { fn.apply(null, _args); });
          };
          xhr.onerror = function() {
              if (o.error) o.error(xhr, 'error', 'Network Error');
              _failed = true; _args = [xhr, 'error', 'Network Error'];
              _failList.forEach(function(fn) { fn.apply(null, _args); });
              _alwaysList.forEach(function(fn) { fn.apply(null, _args); });
          };

          var body = null;
          if (o.data !== undefined) {
              if (typeof o.data === 'string') {
                  body = o.data;
              } else if (o.data instanceof FormData) {
                  body = o.data;
              } else if (typeof o.data === 'object') {
                  body = Object.keys(o.data).map(function(k) {
                      return encodeURIComponent(k) + '=' + encodeURIComponent(o.data[k]);
                  }).join('&');
                  if (!o.contentType) xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
              }
          }
          xhr.send(body);
          return jqXHR;
      };
  }
  </script>
<script src="/static/js/script.js"></script>
<script src="/static/js/google-picker.js"></script>
<script>
 $('input[type=file]').drop_uploader({
        uploader_text: '{% trans %}Drag files here or click to upload{% endtrans %}',
        browse_text: '{% trans %}Choose file{% endtrans %}',
        only_one_error_text: '{% trans %}Only one file allowed{% endtrans %}',
        not_allowed_error_text: '{% trans %}File type is not allowed{% endtrans %}',
        big_file_before_error_text: '{% trans %}Files, bigger than{% endtrans %}',
        big_file_after_error_text: '{% trans %}is not allowed{% endtrans %}',
        allowed_before_error_text: '{% trans %}Only{% endtrans %}',
        allowed_after_error_text: '{% trans %}files allowed{% endtrans %}',
        browse_css_class: 'inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-white hover:bg-gray-100 text-gray-700 font-semibold text-sm border border-gray-200 shadow-sm transition-all duration-200 cursor-pointer',
        browse_css_selector: 'file_browse',
        uploader_icon: '<div class="default-cloud-icon"><svg width="120" height="78" viewBox="0 0 120 78" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_49_1383)"><path d="M76.7455 43.1092C76.41 43.5371 75.995 43.8933 75.5242 44.1575C75.0535 44.4218 74.5363 44.5889 74.0021 44.6492C73.468 44.7096 72.9274 44.6621 72.4112 44.5093C71.8951 44.3566 71.4136 44.1017 70.9943 43.7592L64.0166 38.0598V57.1688C64.0166 58.2737 63.5858 59.3334 62.8191 60.1147C62.0523 60.896 61.0124 61.335 59.9281 61.335C58.8437 61.335 57.8038 60.896 57.037 60.1147C56.2703 59.3334 55.8396 58.2737 55.8396 57.1688V38.0598L48.8509 43.7592C48.0037 44.4494 46.9221 44.7684 45.844 44.646C44.766 44.5236 43.7798 43.9698 43.1025 43.1065C42.4251 42.2431 42.1121 41.141 42.2322 40.0424C42.3523 38.9439 42.8958 37.939 43.743 37.2488L57.355 26.15C58.0817 25.5516 58.9883 25.226 59.9226 25.2279H59.9335C60.9148 25.2279 61.8088 25.5834 62.512 26.1723L76.1077 37.2488C76.5275 37.5907 76.8771 38.0135 77.1364 38.4932C77.3957 38.9729 77.5597 39.4999 77.6189 40.0443C77.6782 40.5886 77.6315 41.1394 77.4816 41.6654C77.3318 42.1913 77.0816 42.6819 76.7455 43.1092Z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M40.1888 13.807C43.5529 8.47181 48.4871 4.3578 54.2851 2.05373C60.0831 -0.250342 66.4478 -0.626361 72.4683 0.979486C78.4888 2.58533 83.8565 6.09073 87.8031 10.994C91.7498 15.8973 94.0731 21.9471 94.4406 28.2776C97.6955 28.1214 100.948 28.6308 104.007 29.7759C107.066 30.9209 109.868 32.6784 112.25 34.9447C114.631 37.211 116.544 39.9402 117.874 42.9714C119.204 46.0027 119.925 49.2746 119.994 52.5944C120.064 55.9141 119.481 59.2144 118.279 62.3007C117.077 65.387 115.28 68.1969 112.996 70.5646C110.711 72.9323 107.985 74.81 104.977 76.087C101.969 77.364 98.7403 78.0143 95.4818 77.9998H31.9845C27.433 77.9937 22.935 76.999 18.7904 75.0822C14.6458 73.1654 10.9497 70.3703 7.94856 66.8834C4.9474 63.3965 2.71008 59.2978 1.38572 54.8604C0.0613673 50.4231 -0.319604 45.7491 0.268202 41.1499C0.856007 36.5507 2.39909 32.1321 4.79459 28.1884C7.1901 24.2447 10.383 20.8666 14.1605 18.2793C17.938 15.692 22.2133 13.9548 26.7015 13.1837C31.1896 12.4125 35.7876 12.625 40.1888 13.807ZM65.0033 8.32983C60.9897 8.3288 57.0574 9.48255 53.6589 11.6583C50.2603 13.834 47.5337 16.9434 45.7928 20.6284C45.3457 21.5721 44.566 22.3094 43.6093 22.6934C42.6525 23.0774 41.5889 23.0799 40.6303 22.7004C37.365 21.4125 33.8614 20.8729 30.3684 21.1202C26.8753 21.3674 23.4786 22.3954 20.4193 24.131C17.3601 25.8667 14.7134 28.2674 12.6673 31.1628C10.6212 34.0582 9.22578 37.3772 8.58023 40.884C7.93469 44.3908 8.05482 47.9994 8.9321 51.4536C9.80938 54.9078 11.4223 58.1227 13.6563 60.8702C15.8902 63.6176 18.6905 65.8301 21.8581 67.3505C25.0258 68.8709 28.4831 69.6619 31.9845 69.6674H95.4818C97.792 69.6666 100.075 69.1633 102.179 68.1913C104.284 67.2193 106.16 65.8009 107.683 64.0308C109.206 62.2608 110.341 60.1799 111.011 57.9272C111.682 55.6744 111.873 53.3018 111.572 50.9678C111.271 48.6338 110.484 46.3922 109.265 44.3928C108.045 42.3934 106.421 40.6822 104.501 39.3736C102.58 38.065 100.408 37.1891 98.1287 36.8045C95.8496 36.4199 93.5161 36.5354 91.2843 37.1432C90.6395 37.3193 89.9621 37.3318 89.3115 37.1797C88.6608 37.0275 88.0566 36.7153 87.5517 36.2704C87.0467 35.8254 86.6564 35.2612 86.4147 34.6271C86.1731 33.993 86.0875 33.3082 86.1654 32.6326C86.5229 29.5847 86.2423 26.4941 85.3421 23.5647C84.4419 20.6353 82.9426 17.9336 80.943 15.6378C78.9434 13.3419 76.4889 11.5041 73.7414 10.2453C70.9939 8.98663 68.0157 8.33012 65.0033 8.32983Z" fill="#fff"></path></g><defs><clipPath id="clip0_49_1383"><rect width="120" height="78" fill="white"></rect></clipPath></defs></svg></div>',
        file_icon: '<i class="fa fa-file text-primary dark:text-primary-light"></i>',
        progress_color: (document.documentElement.classList.contains('dark') ? (window.SITE_DROPZONE_LOADER_DARK||'#10B981') : (window.SITE_DROPZONE_LOADER_LIGHT||'#10B981')),
        time_show_errors: 5,
        layout: 'list',
        method: 'ajax',
        url: '/upload?filetype={{ filetype }}',
        delete_url: '/upload/remove',
        btn_selector : '#submit_btn',
        btn_selector2 : '#submit_btn2',
        uploading_badge_text: '{% trans %}Uploading{% endtrans %}',
        files_container: '#files-list-container'
    });
    (function(){ var w = document.querySelector('.file-upload-wrapper'); if (w) w.classList.add('du-ready'); })();

    $("#converter-form, #converter-form2").on("submit", function(e){
        if($("[name='url[]']").length == 0){
            toastr.warning("{% trans %}Please upload some files to continue{% endtrans %}");
            return false;
        }

        const errors = editor.validate();

        if (errors.length) {
            console.log(errors);
            e.preventDefault();
        }
        else {
            $("[name='options']").val(JSON.stringify(editor.getValue()));

            // If any URL-type (non-prefetched) entries are present, show the downloading overlay
            var hasUrlEntries = _urlFiles.some(function(f) { return !f._path; });
            if (hasUrlEntries) {
                var overlay = document.getElementById('url-download-overlay');
                if (overlay) { overlay.style.display = 'flex'; }
                $('#submit_btn, #submit_btn2').prop('disabled', true).html(
                    '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg>'
                    + ' {% trans %}Downloading…{% endtrans %}'
                );
            }
            return true;
        }
    });

    window.JSONEditor.defaults.callbacks.template = {
        "webserviceFilterCB": (jseditor, e) => {
          if(e.item.includes("{{fileformat}}"))
            return e.item;
          return "";
        }
      };

    const element = document.getElementById('options_holder');
    const editor = new JSONEditor(element, {
        theme: 'bootstrap4',
        compact: true,
        disable_edit_json: true,
        disable_properties: true,
        disable_collapse: true,
        use_default_values: false,
        schema: {{ options | safe  }}
    });

    (function cvEnhanceOptions() {
        var schema;
        try { schema = {{ options | safe }}; } catch(e) { return; }
        var props = (schema && schema.properties) || {};

        /* ── Global tooltip element ───────────────────────────────── */
        var gtt = document.getElementById('cv-global-tooltip');
        if (!gtt) {
            gtt = document.createElement('div');
            gtt.id = 'cv-global-tooltip';
            document.body.appendChild(gtt);
        }
        var _ttTarget = null;
        function showTip(icon, text) {
            gtt.textContent = text;
            gtt.style.display = 'block';
            positionTip(icon);
            _ttTarget = icon;
        }
        function hideTip() { gtt.style.display = 'none'; _ttTarget = null; }
        function positionTip(icon) {
            var r = icon.getBoundingClientRect();
            var tt_w = gtt.offsetWidth || 230;
            var tt_h = gtt.offsetHeight || 36;
            var left = Math.max(8, Math.min(r.left, window.innerWidth - tt_w - 8));
            var top  = r.top - tt_h - 8;
            if (top < 8) top = r.bottom + 8;
            gtt.style.left = left + 'px';
            gtt.style.top  = top  + 'px';
        }
        document.addEventListener('scroll', function() { if(_ttTarget) positionTip(_ttTarget); }, true);

        /* ── Build flat maps from schema ─────────────────────────── */
        var tipMap = {};
        var minMaxMap = {};
        function walkProps(obj) {
            if (!obj || typeof obj !== 'object') return;
            Object.keys(obj).forEach(function(k) {
                var p = obj[k];
                var t = ((p.title || k) + '').toLowerCase().trim();
                tipMap[t] = {
                    desc: p.description || '',
                    unit: p.unit || '',
                    enumTooltips: p.enumTooltips || null,
                    enumVals: (p.items && p.items.enum) || []
                };
                if (p.minimum !== undefined || p.maximum !== undefined) {
                    minMaxMap[t] = { min: p.minimum, max: p.maximum };
                }
                if (p.properties) walkProps(p.properties);
            });
        }
        walkProps(props);

        /* ── Helpers ─────────────────────────────────────────────── */
        function makeInfoIcon(tipText) {
            var span = document.createElement('span');
            span.className = 'cv-opt-info';
            span.setAttribute('data-tooltip', tipText);
            span.innerHTML = '<i class="fa fa-circle-info cv-opt-info-icon"></i>';
            span.addEventListener('mouseenter', function() { showTip(span, tipText); });
            span.addEventListener('mouseleave', hideTip);
            return span;
        }

        function wrapLabelText(label) {
            /* Wrap the raw text node in a .cv-label-text span so CSS can add ':' */
            if (label.querySelector('.cv-label-text')) return;
            var first = label.childNodes[0];
            if (first && first.nodeType === 3 && first.textContent.trim()) {
                var sp = document.createElement('span');
                sp.className = 'cv-label-text';
                sp.textContent = first.textContent.trim();
                label.replaceChild(sp, first);
            }
        }

        function wrapWithUnit(input, unitText) {
            if (!input || input.parentNode.classList.contains('cv-input-wrap')) return;
            var wrap = document.createElement('div');
            wrap.className = 'cv-input-wrap';
            input.parentNode.insertBefore(wrap, input);
            wrap.appendChild(input);
            var badge = document.createElement('span');
            badge.className = 'cv-unit-badge';
            badge.textContent = unitText;
            wrap.appendChild(badge);
        }

        function findEntry(labelText) {
            var lt = labelText.toLowerCase().trim();
            if (tipMap[lt]) return tipMap[lt];
            /* fuzzy: longest key whose start matches the label */
            var best = null, bestLen = 0;
            Object.keys(tipMap).forEach(function(k) {
                if (k.length > bestLen && lt.startsWith(k.slice(0, Math.max(5, k.length - 2)))) {
                    best = tipMap[k]; bestLen = k.length;
                }
            });
            return best;
        }

        /* ── Main injection ──────────────────────────────────────── */
        function inject() {
            var container = document.getElementById('options_holder');
            if (!container) return;

            /* 0. Hide all description paragraphs (belt-and-suspenders alongside CSS) */
            container.querySelectorAll('p').forEach(function(p) {
                p.style.display = 'none';
            });

            /* 1. Non-checkbox form-group labels → colon + tooltip + unit + placeholder */
            container.querySelectorAll('.form-group').forEach(function(group) {
                var label = group.querySelector('label:not(.form-check-label)');
                if (!label) return;
                var rawText = label.textContent.trim();
                var entry = findEntry(rawText);

                wrapLabelText(label);

                if (entry && entry.desc && !label.querySelector('.cv-opt-info')) {
                    label.appendChild(makeInfoIcon(entry.desc));
                }

                var input = group.querySelector('input[type="number"], input[type="text"]');
                if (input && entry) {
                    if (entry.unit && !input.parentNode.classList.contains('cv-input-wrap')) {
                        wrapWithUnit(input, entry.unit);
                    }
                    /* Set min-max placeholder */
                    var mm = minMaxMap[rawText.toLowerCase().trim()];
                    if (mm && !input.placeholder) {
                        var parts = [];
                        if (mm.min !== undefined) parts.push(mm.min);
                        if (mm.max !== undefined) parts.push(mm.max);
                        if (parts.length) input.placeholder = parts.join(' - ');
                    }
                }
            });

            /* 2. Section headings (je-object__title / card-title / legend) */
            container.querySelectorAll('.je-object__title, .card-title, legend').forEach(function(h) {
                if (h.querySelector('.cv-opt-info')) return;
                var ht = h.textContent.trim();
                var entry = findEntry(ht);
                if (entry && entry.desc) {
                    wrapLabelText(h);
                    h.appendChild(makeInfoIcon(entry.desc));
                }
            });

            /* 3. Per-checkbox enumTooltips */
            container.querySelectorAll('.form-check').forEach(function(cg) {
                if (cg.querySelector('.cv-opt-info')) return;
                var lbl = cg.querySelector('label');
                if (!lbl) return;
                var lblText = lbl.textContent.trim();
                Object.keys(tipMap).forEach(function(k) {
                    var e = tipMap[k];
                    if (!e.enumTooltips || !e.enumVals.length) return;
                    var idx = e.enumVals.findIndex(function(v) { return v.trim() === lblText.trim(); });
                    if (idx >= 0 && e.enumTooltips[idx] && !lbl.querySelector('.cv-opt-info')) {
                        lbl.appendChild(makeInfoIcon(e.enumTooltips[idx]));
                    }
                });
            });

            /* 4. Make checkbox groups flow horizontally */
            container.querySelectorAll('.form-group').forEach(function(fg) {
                var checks = fg.querySelectorAll('.form-check');
                if (checks.length > 1) {
                    var parent = checks[0].parentNode;
                    if (!parent.classList.contains('cv-check-flex')) {
                        parent.classList.add('cv-check-flex');
                    }
                }
            });

            /* 5. Separators via CSS class .cv-prop-section.
                  Walk the tree breadth-first until we find the level that has
                  2+ sibling divs each containing form fields. Mark those divs
                  with .cv-prop-section; CSS draws the border-top between them. */
            var FSEC = 'input, select, textarea, .form-check';
            function findSections(root, depth) {
                if (depth <= 0) return [];
                var kids = Array.from(root.children).filter(function(c) {
                    return c.tagName === 'DIV' && !c.classList.contains('cv-prop-section');
                });
                var withFields = kids.filter(function(c) { return c.querySelector(FSEC) !== null; });
                if (withFields.length >= 2) return withFields;
                /* recurse into each div child, return first result with 2+ sections */
                for (var i = 0; i < kids.length; i++) {
                    var sub = findSections(kids[i], depth - 1);
                    if (sub.length >= 2) return sub;
                }
                return [];
            }
            var sections = findSections(container, 6);
            sections.forEach(function(el) { el.classList.add('cv-prop-section'); });
        }

        editor.on('ready', function() { inject(); setTimeout(inject, 400); });
        setTimeout(inject, 600);
    })();
</script>



<script>
// Format selector JavaScript
if (typeof window.activeDropdown === 'undefined') {
    window.activeDropdown = null;
    window.sourceFormat = '{{ source_format if source_format else "" }}';
    window.targetFormat = '{{ fileformat if fileformat else "" }}';
    window.sourceCategory = '{{ filetype if filetype else "" }}';
    window.targetCategory = '{{ filetype if filetype else "" }}';
} else {
    window.sourceFormat = window.sourceFormat || '{{ source_format if source_format else "" }}';
    window.targetFormat = window.targetFormat || '{{ fileformat if fileformat else "" }}';
    window.sourceCategory = window.sourceCategory || '{{ filetype if filetype else "" }}';
    window.targetCategory = window.targetCategory || '{{ filetype if filetype else "" }}';
}
const _cvSubdomainsOn = {{ use_subdomains | tojson }};
const _cvMainDomain   = '{{ main_domain() }}';
const _cvLangPrefix   = '{{ lang_prefix() }}';
// Allowed source extensions for this converter page (lowercase, no dots).
// Used for client-side early validation before the network round-trip.
// Server-side api_url_prefetch is the authoritative check.
window._allowedSourceExts = (function() {
    var sf = window.sourceFormat || '';
    {% if source_format %}
    return [{{ source_format.lower() | tojson }}];
    {% elif filetype and filetype in filetypes %}
    return {{ (filetypes[filetype].get('allowed', []) | map('lower') | list) | tojson }};
    {% else %}
    return sf ? [sf.toLowerCase()] : [];
    {% endif %}
}());
// HMAC-signed context token rendered server-side.  Sent back with url-prefetch
// requests so the server can authoritatively identify the converter page without
// trusting any other client-supplied field.
window._urlPrefetchToken = {{ (url_prefetch_token if url_prefetch_token is defined else '') | tojson }};

// Shared URL builder — applies the same rules as convert-selector.html
function _cvBuildUrl(srcFmt, srcCat, tgtFmt, tgtCat) {
    const src = (srcFmt || '').toLowerCase();
    const tgt = (tgtFmt || '').toLowerCase();
    const sc  = (srcCat  || '').toLowerCase();
    const tc  = (tgtCat  || '').toLowerCase();
    function base(subdomain, path) {
        if (_cvSubdomainsOn) {
            return 'https://' + subdomain + '.' + _cvMainDomain + _cvLangPrefix + path;
        }
        // Non-subdomain: rewrite subdomain-specific path patterns
        var m;
        if (subdomain === 'pdf' && path.indexOf('/do/') === 0) {
            return _cvLangPrefix + path;
        }
        if ((m = path.match(/^\/(convert-to-|convert-for-)(.+)$/))) {
            return _cvLangPrefix + '/converter/' + subdomain + '/' + m[2];
        }
        if ((m = path.match(/^\/compress-(.+)$/))) {
            return _cvLangPrefix + '/converter/' + subdomain + '/' + m[1];
        }
        return _cvLangPrefix + '/converter/' + subdomain + path;
    }
    if (sc === 'pdf') {
        return base('pdf', '/do/' + tgt);
    } else if (sc === 'device' || sc === 'webservice') {
        return base(sc, '/convert-for-' + tgt);
    } else if (sc === 'archive') {
        return base('archive', '/convert-to-' + tgt);
    } else if (tc === 'device' || tc === 'webservice') {
        return base(tc, '/convert-for-' + tgt);
    } else if (tc === 'archive') {
        return base('archive', '/convert-to-' + tgt);
    } else {
        if (_cvSubdomainsOn && sc) {
            return 'https://' + sc + '.' + _cvMainDomain + _cvLangPrefix + '/convert/' + src + '-to-' + tgt;
        }
        return _cvLangPrefix + '/convert/' + src + '-to-' + tgt;
    }
}

function toggleSourceDropdown() {
    const dropdown = document.getElementById('sourceDropdown');
    const targetDropdown = document.getElementById('targetDropdown');
    
    if (targetDropdown) targetDropdown.classList.add('hidden');
    dropdown.classList.toggle('hidden');
    window.activeDropdown = dropdown.classList.contains('hidden') ? null : 'source';
    
    if (!dropdown.classList.contains('hidden')) {
        initializeDropdown('source');
    }
}

function toggleTargetDropdown() {
    const dropdown = document.getElementById('targetDropdown');
    const sourceDropdown = document.getElementById('sourceDropdown');
    
    if (sourceDropdown) sourceDropdown.classList.add('hidden');
    dropdown.classList.toggle('hidden');
    window.activeDropdown = dropdown.classList.contains('hidden') ? null : 'target';
    
    if (!dropdown.classList.contains('hidden')) {
        initializeDropdown('target');
    }
}

// Function to get compatible target formats based on source format
function getCompatibleTargets(sourceFormat, sourceCategory, container) {
    try {
        // Get the filetypes data from the container's data attribute
        const filetypesData = JSON.parse(container.dataset.filetypes);
        const category = filetypesData[sourceCategory];
        if (!category) return [];
        
        // Start with the allowed formats
        let allowedFormats = [...category.allowed];
        
        // Check if there are disallowed rules for this source format
        if (category.disallowed && category.disallowed[sourceFormat]) {
            const disallowed = category.disallowed[sourceFormat];
            allowedFormats = allowedFormats.filter(f => !disallowed.includes(f));
        }
        
        // Remove the source format itself (can't convert to same format)
        allowedFormats = allowedFormats.filter(f => f.toLowerCase() !== sourceFormat.toLowerCase());
        
        return allowedFormats;
    } catch (e) {
        console.error('Error parsing filetypes data:', e);
        return [];
    }
}

function initializeDropdown(type) {
    const container = document.getElementById(type + 'Dropdown');
    if (!container) return;
    
    const categoryItems = container.querySelectorAll('.category-item');
    const formatCategories = container.querySelectorAll('.format-category');
    const searchInput = container.querySelector('.format-search');
    
    // Show first category by default
    if (categoryItems.length > 0) {
        categoryItems.forEach(item => {
            item.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');
        
        const firstCategory = categoryItems[0].dataset.category;
        formatCategories.forEach(cat => cat.classList.add('hidden'));
        const firstContent = container.querySelector(`[data-category-content="${firstCategory}"]`);
        if (firstContent) firstContent.classList.remove('hidden');
    }
    
    // Remove old event listener by cloning and replacing
    const newContainer = container.cloneNode(true);
    container.parentNode.replaceChild(newContainer, container);
    // Re-register MutationObserver on the cloned element for fixed positioning
    if (window._dropdownFix) window._dropdownFix(type + 'Dropdown');
    
    // Add new event listener
    newContainer.addEventListener('click', function(e) {
        // Category item click
        if (e.target.closest('.category-item')) {
            e.preventDefault();
            e.stopPropagation();
            
            const item = e.target.closest('.category-item');
            const category = item.dataset.category;
            
            // Update active styling
            const cats = newContainer.querySelectorAll('.category-item');
            cats.forEach(i => {
                i.classList.remove('active', 'bg-gray-100', 'dark:bg-gray-800', 'font-semibold');
            });
            item.classList.add('active', 'bg-gray-100', 'dark:bg-gray-800', 'font-semibold');
            
            // Show corresponding formats
            const formatCats = newContainer.querySelectorAll('.format-category');
            formatCats.forEach(cat => cat.classList.add('hidden'));
            const targetCategory = newContainer.querySelector(`[data-category-content="${category}"]`);
            if (targetCategory) targetCategory.classList.remove('hidden');
        }
        
        // Format item click
        if (e.target.closest('.format-item')) {
            e.preventDefault();
            e.stopPropagation();
            
            const item = e.target.closest('.format-item');
            const format = item.dataset.format;
            const filetype = item.dataset.filetype;
            
            if (type === 'source') {
                // Source changed → navigate to that format's info+selector page
                var _srcUrl;
                if (_cvSubdomainsOn) {
                    _srcUrl = 'https://' + filetype.toLowerCase() + '.' + _cvMainDomain + _cvLangPrefix + '/' + format.toLowerCase() + '-converter';
                } else {
                    _srcUrl = _cvLangPrefix + '/' + filetype.toLowerCase() + '/' + format.toLowerCase() + '-converter';
                }
                window.location.href = _srcUrl;
                return;
            } else {
                // Target changed → redirect using unified URL rules
                var _tgtFmtCat = fmtItem.dataset.filetype || filetype;
                if (window.sourceFormat && window.sourceFormat !== 'Select format') {
                    var _srcCat2 = (window.sourceCategory || filetype).toLowerCase();
                    window.location.href = _cvBuildUrl(window.sourceFormat, _srcCat2, format, _tgtFmtCat);
                    return;
                }
                // No source known → treat current page filetype as context for target
                var _tgtOnlyUrl = _cvBuildUrl('', filetype, format, _tgtFmtCat);
                window.location.href = _tgtOnlyUrl;
                return;
            }
            
            newContainer.classList.add('hidden');
        }
    });
    
    // Search functionality
    const newSearchInput = newContainer.querySelector('.format-search');
    if (newSearchInput) {
        newSearchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase().trim();
            const formatItems = newContainer.querySelectorAll('.format-item');
            const formatCats = newContainer.querySelectorAll('.format-category');
            const catItems = newContainer.querySelectorAll('.category-item');
            
            if (searchTerm.length > 0) {
                formatCats.forEach(cat => cat.classList.remove('hidden'));
                
                formatItems.forEach(item => {
                    const format = item.dataset.format.toLowerCase();
                    if (format.includes(searchTerm)) {
                        item.classList.remove('hidden');
                    } else {
                        item.classList.add('hidden');
                    }
                });
                
                // Hide empty categories
                catItems.forEach(item => {
                    const category = item.dataset.category;
                    const categoryContainer = newContainer.querySelector(`[data-category-content="${category}"]`);
                    if (categoryContainer) {
                        const visibleItems = categoryContainer.querySelectorAll('.format-item:not(.hidden)').length;
                        if (visibleItems === 0) {
                            item.classList.add('hidden');
                        } else {
                            item.classList.remove('hidden');
                        }
                    }
                });
            } else {
                // Reset to selected category view
                const activeCategory = newContainer.querySelector('.category-item.active')?.dataset.category;
                if (activeCategory) {
                    formatCats.forEach(cat => cat.classList.add('hidden'));
                    const defaultCategory = newContainer.querySelector(`[data-category-content="${activeCategory}"]`);
                    if (defaultCategory) defaultCategory.classList.remove('hidden');
                    
                    formatItems.forEach(item => item.classList.remove('hidden'));
                    catItems.forEach(item => item.classList.remove('hidden'));
                }
            }
        });
        // ArrowDown from search → jump to first format item
        newSearchInput.addEventListener('keydown', function(e) {
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                const first = newContainer.querySelector('.format-item:not(.hidden)');
                if (first) first.focus();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                newContainer.classList.add('hidden');
            }
        });
    }

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

    // Auto-focus search input when dropdown opens
    if (newSearchInput) setTimeout(() => newSearchInput.focus(), 30);
}

function updateTargetDropdownForSource(sourceFormat, sourceCategory) {
    const targetContainer = document.getElementById('targetDropdown');
    if (!targetContainer) return;
    
    const compatibleTargets = getCompatibleTargets(sourceFormat, sourceCategory, targetContainer);
    console.log('Compatible targets for', sourceFormat, ':', compatibleTargets);
    
    // Get all format items in target dropdown
    const formatItems = targetContainer.querySelectorAll('.format-item');
    const categoryItems = targetContainer.querySelectorAll('.category-item');
    const formatCategories = targetContainer.querySelectorAll('.format-category');
    
    // First, hide all format items
    formatItems.forEach(item => {
        item.classList.add('hidden');
    });
    
    // Show only compatible formats
    if (compatibleTargets.length > 0) {
        compatibleTargets.forEach(target => {
            formatItems.forEach(item => {
                const itemFormat = item.dataset.format;
                if (itemFormat === target) {
                    item.classList.remove('hidden');
                }
            });
        });
    } else {
        // If no compatible targets, maybe show a message or hide everything
        console.log('No compatible targets found for', sourceFormat);
    }
    
    // Hide categories with no visible formats
    formatCategories.forEach(cat => {
        const visibleItems = cat.querySelectorAll('.format-item:not(.hidden)').length;
        if (visibleItems === 0) {
            cat.classList.add('hidden');
        } else {
            cat.classList.remove('hidden');
        }
    });
    
    // Hide category tabs with no visible formats in their category
    categoryItems.forEach(item => {
        const category = item.dataset.category;
        const categoryContainer = targetContainer.querySelector(`[data-category-content="${category}"]`);
        if (categoryContainer) {
            const visibleItems = categoryContainer.querySelectorAll('.format-item:not(.hidden)').length;
            if (visibleItems === 0) {
                item.classList.add('hidden');
                item.classList.remove('active', 'bg-gray-100', 'dark:bg-gray-800', 'font-semibold');
            } else {
                item.classList.remove('hidden');
            }
        }
    });
    
    // Auto-select first category with visible formats
    const firstVisibleCategory = Array.from(categoryItems).find(item => !item.classList.contains('hidden'));
    if (firstVisibleCategory) {
        // Remove active class from all
        categoryItems.forEach(i => {
            i.classList.remove('active', 'bg-gray-100', 'dark:bg-gray-800', 'font-semibold');
        });
        
        // Add active to first visible
        firstVisibleCategory.classList.add('active', 'bg-gray-100', 'dark:bg-gray-800', 'font-semibold');
        
        // Show its formats
        const category = firstVisibleCategory.dataset.category;
        formatCategories.forEach(cat => cat.classList.add('hidden'));
        const targetCategory = targetContainer.querySelector(`[data-category-content="${category}"]`);
        if (targetCategory) targetCategory.classList.remove('hidden');
    }
}

function swapFormats() {
    const sourceEl = document.getElementById('selected-source');
    const targetEl = document.getElementById('selected-target');
    
    const tempFormat = window.sourceFormat;
    const tempCategory = window.sourceCategory;
    
    window.sourceFormat = window.targetFormat;
    window.sourceCategory = window.targetCategory;
    
    window.targetFormat = tempFormat;
    window.targetCategory = tempCategory;
    
    sourceEl.textContent = window.sourceFormat ? window.sourceFormat : 'Select format';
    targetEl.textContent = window.targetFormat ? window.targetFormat : 'Select format';
    
    // After swap, update target dropdown based on new source
    if (window.sourceFormat && window.sourceFormat !== 'Select format') {
        updateTargetDropdownForSource(window.sourceFormat, window.sourceCategory);
    }
}

function startConversion() {
    if (!window.sourceFormat || !window.targetFormat || 
        window.sourceFormat === 'Select format' || window.targetFormat === 'Select format') {
        toastr.warning('Please select both source and target formats');
        return;
    }
    window.location.href = _cvBuildUrl(
        window.sourceFormat, window.sourceCategory,
        window.targetFormat, window.targetCategory
    );
}

// Close dropdowns when clicking outside
document.addEventListener('click', function(e) {
    const sourceDropdown = document.getElementById('sourceDropdown');
    const targetDropdown = document.getElementById('targetDropdown');
    const sourceBtn = document.querySelector('#source-selector button');
    const targetBtn = document.querySelector('#target-selector button');
    
    if (sourceDropdown && !sourceDropdown.contains(e.target) && !sourceBtn?.contains(e.target)) {
        sourceDropdown.classList.add('hidden');
    }
    
    if (targetDropdown && !targetDropdown.contains(e.target) && !targetBtn?.contains(e.target)) {
        targetDropdown.classList.add('hidden');
    }
});

// Initialize with existing selections if any
document.addEventListener('DOMContentLoaded', function() {
    if (window.sourceFormat && window.sourceFormat !== 'Select format' && window.sourceCategory) {
        // Small delay to ensure DOM is fully loaded
        setTimeout(() => {
            updateTargetDropdownForSource(window.sourceFormat, window.sourceCategory);
        }, 100);
    }
});

// ─── Upload Source Tabs ──────────────────────────────────────────────────────
var _uploadTabs = ['file','url'{% if site_settings is defined and site_settings.get('google_drive_client_id') and site_settings.get('google_drive_api_key') %},'gdrive'{% endif %}{% if site_settings is defined and site_settings.get('dropbox_app_key') %},'dropbox'{% endif %}{% if site_settings is defined and site_settings.get('onedrive_client_id') %},'onedrive'{% endif %}];
function switchUploadTab(name) {
    _uploadTabs.forEach(function(t) {
        var btn = document.getElementById('uptab-' + t);
        var panel = document.getElementById('uptab-panel-' + t);
        if (t === name) {
            if (btn) { btn.classList.remove('border-transparent','text-white/70'); btn.classList.add('border-white','text-white'); }
            if (panel) panel.classList.remove('hidden');
        } else {
            if (btn) { btn.classList.add('border-transparent','text-white/70'); btn.classList.remove('border-white','text-white'); }
            if (panel) panel.classList.add('hidden');
        }
    });
    /* Back button: visible on all non-file tabs */
    var backBtn = document.getElementById('cv-back-btn');
    if (backBtn) {
        if (name === 'file') { backBtn.classList.remove('visible'); }
        else { backBtn.classList.add('visible'); }
    }
    /* Split-button center wrap: hide on non-file tabs */
    var splitCenter = document.getElementById('cv-split-btn-center');
    if (splitCenter) { splitCenter.style.display = (name === 'file') ? '' : 'none'; }
    /* Plugin text_wrapper (cloud icon + drag text): hide on non-file tabs */
    var tw = document.querySelector('.drop_uploader .text_wrapper');
    if (tw) { tw.style.display = (name === 'file') ? '' : 'none'; }
}

/* ── Open file picker safely (id may shift after plugin init) ──── */
function openFilePicker() {
    var el = document.getElementById('uploader')
           || document.querySelector('.drop_uploader input[type=file]')
           || document.querySelector('input[type=file]');
    if (el) el.click();
}

/* ── Upload-source dropdown ──────────────────────────────────────── */
function toggleUploadDropdown(e) {
    e.stopPropagation();
    var wrap = document.getElementById('cv-upload-split-wrap');
    var dd   = document.getElementById('cv-upload-dropdown');
    var isOpen = !dd.classList.contains('hidden');
    if (isOpen) {
        dd.classList.add('hidden');
        wrap.classList.remove('open');
    } else {
        dd.classList.remove('hidden');
        wrap.classList.add('open');
    }
}
function closeUploadDropdown() {
    var wrap = document.getElementById('cv-upload-split-wrap');
    var dd   = document.getElementById('cv-upload-dropdown');
    if (dd) { dd.classList.add('hidden'); }
    if (wrap) { wrap.classList.remove('open'); }
}
document.addEventListener('click', function(e) {
    var wrap = document.getElementById('cv-upload-split-wrap');
    if (wrap && !wrap.contains(e.target)) closeUploadDropdown();
});

/* ── Clipboard modal ─────────────────────────────────────────────── */
var _clipPasteListener = null;

function openClipboardModal() {
    var modal = document.getElementById('clipboard-modal');
    if (!modal) return;
    modal.classList.add('show');
    /* listen for paste while modal is open */
    _clipPasteListener = function(e) {
        var items = e.clipboardData && e.clipboardData.items;
        if (!items) return;
        var files = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].kind === 'file') {
                var blob = items[i].getAsFile();
                if (blob) files.push(blob);
            }
        }
        if (!files.length) return;
        e.preventDefault();
        var dt = new DataTransfer();
        files.forEach(function(f) { dt.items.add(f); });

        /* Reuse the shared feed helper (also switches to file tab) */
        switchUploadTab('file');
        _cvFeedFiles(files);

        closeClipboardModal();
    };
    document.addEventListener('paste', _clipPasteListener);
    /* also close if clicking outside the modal box */
    modal.addEventListener('click', function(e) {
        if (e.target === modal) closeClipboardModal();
    }, { once: true });
}

function closeClipboardModal() {
    var modal = document.getElementById('clipboard-modal');
    if (!modal) return;
    modal.classList.remove('show');
    if (_clipPasteListener) {
        document.removeEventListener('paste', _clipPasteListener);
        _clipPasteListener = null;
    }
}

// ─── URL Upload Logic (unified progress-bar UI) ──────────────────────────────
var _urlFiles = [];
var _urlFileCounter = 0;

function _getFilesUl() {
    var $container = $('#files-list-container');
    if (!$container.length) return null;
    var $ul = $container.find('ul.files');
    if (!$ul.length) {
        $container.append('<ul class="files"></ul>');
        $ul = $container.find('ul.files');
    }
    return $ul;
}

function addUrlFile() {
    var field = document.getElementById('url-input-field');
    var rawUrl = (field ? field.value : '').trim();
    if (!rawUrl) return;
    try { new URL(rawUrl); } catch(e) { toastr.warning('Please enter a valid URL.'); return; }

    var guessedName = rawUrl.split('/').pop().split('?')[0] || 'file';
    var idx = _urlFileCounter++;
    var fileObj = { name: guessedName, url: rawUrl, type: 'url', _idx: idx };
    _urlFiles.push(fileObj);

    if (field) { field.value = ''; }

    // Inject a <li> into ul.files matching the same structure as uploader.js
    var $ul = _getFilesUl();
    if ($ul) {
        $ul.append(
            '<li id="url_file_' + idx + '">' +
            '<i class="fa fa-link text-primary dark:text-primary-light"></i>' +
            '<span class="upload-badge">Uploading</span>' +
            '<span class="file_name">' + $('<span>').text(guessedName).html() + '</span>' +
            '<span class="size"></span>' +
            '<div class="progress"><div class="bar" style="width:0%"></div></div>' +
            '</li>'
        );
    }

    // Enable submit buttons immediately so the user can still cancel
    $('#submit_btn, #submit_btn2').prop('disabled', false);

    // Animate progress bar while the server prefetches the URL
    var progress = 0;
    var $li = $('#url_file_' + idx);
    var animInterval = setInterval(function() {
        if (progress < 90) {
            progress += Math.random() * 10 + 2;
            if (progress > 90) progress = 90;
            $li.find('.progress .bar').css('width', Math.round(progress) + '%');
        }
    }, 180);

    // POST to the url-prefetch endpoint to download the file server-side.
    // We include the HMAC-signed context token (rendered into this page by the
    // server) so the server can authoritatively identify which converter page
    // this request is coming from.  The token is tamper-proof (signed with the
    // server's secret key) and cannot be altered by JS to bypass validation.
    fetch('/api/url-prefetch', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url: rawUrl, ctx: window._urlPrefetchToken || '' })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        clearInterval(animInterval);
        if (data.ok) {
            // Update the li with the real filename & size
            fileObj.name = data.filename;
            fileObj._path = data.path;
            $li.find('.file_name').text(data.filename);
            $li.find('.size').text(data.size_human || '');
            // Jump progress to 100% and mark done
            $li.find('.progress .bar').css('width', '100%');
            $li.addClass('upload-done');
            $li.find('.upload-badge').text('Done');
            setTimeout(function() {
                $li.find('.progress').hide();
            }, 800);
            // Add the local-path entry as a hidden input on both forms
            var pathEntry = JSON.stringify({ path: data.path });
            $('[data-url-idx="' + idx + '"]').remove();
            // Append trash icon now that upload is complete (matches device-upload behaviour)
            $li.find('.progress').before('<i class="fa fa-trash action-delete" onclick="_removeUrlFile(' + idx + ')" style="cursor:pointer;"></i>');
            var hidden = '<input type="hidden" name="url[]" data-url-idx="' + idx + '" value=\'' + pathEntry + '\'/>';
            $('#converter-form').append(hidden);
            if ($('#converter-form2').length) { $('#converter-form2').append(hidden); }
        } else {
            _urlFileFallback(idx, guessedName, rawUrl, $li, data.error);
        }
    })
    .catch(function() {
        clearInterval(animInterval);
        _urlFileFallback(idx, guessedName, rawUrl, $li);
    });
}

// Fallback: the prefetch failed — show an error state and remove the file
// from the submission list so it is not sent to the server.
function _urlFileFallback(idx, name, rawUrl, $li, serverError) {
    // Remove from _urlFiles array
    _urlFiles = _urlFiles.filter(function(f) { return f._idx !== idx; });
    // Remove any hidden inputs for this entry
    $('[data-url-idx="' + idx + '"]').remove();
    // Show error badge
    $li.find('.upload-badge').text('Error').css({
        'background': '#fee2e2',
        'color': '#dc2626',
        'animation': 'none'
    });
    // Replace progress bar with an inline error message
    var msg = serverError
        ? 'Could not download file: ' + serverError
        : 'Could not download file. Check the URL and try again.';
    $li.find('.progress').replaceWith(
        '<span class="upload-error-msg" style="display:block;font-size:0.75rem;color:#dc2626;margin-top:2px;">' + $('<span>').text(msg).html() + '</span>'
    );
    // Disable submit if nothing is queued
    if ($('[name="url[]"]').length === 0) {
        $('#submit_btn, #submit_btn2').prop('disabled', true);
    }
}

// Called by google-picker.js after it updates the name of the last added file
function _renderUrlFileList() {
    _urlFiles.forEach(function(f) {
        if (f._idx !== undefined) {
            var $li = $('#url_file_' + f._idx);
            if ($li.length) { $li.find('.file_name').text(f.name); }
        }
    });
}

function _removeUrlFile(idx) {
    var fileObj = null;
    for (var _fi = 0; _fi < _urlFiles.length; _fi++) {
        if (_urlFiles[_fi]._idx === idx) { fileObj = _urlFiles[_fi]; break; }
    }
    _urlFiles = _urlFiles.filter(function(f) { return f._idx !== idx; });
    $('[data-url-idx="' + idx + '"]').remove();
    var li = document.getElementById('url_file_' + idx);
    if (li && li.parentNode) li.parentNode.removeChild(li);
    if ($('[name="url[]"]').length === 0) {
        $('#submit_btn, #submit_btn2').prop('disabled', true);
    }
    if (fileObj && fileObj._path) {
        $.ajax({ url: '/upload/remove?fileid=' + fileObj._path });
    }
}
/* ── Hide "Choose file" split-button while upload overlay is shown ────────────
     Watches the upload-progress-overlay for class/style changes (state-uploading /
     state-complete added by uploader.js) and hides/restores the split button so it
     does not overlap the overlay.                                                  */
  (function() {
      function _syncSplitVisibility() {
          var overlay = document.getElementById('upload-progress-overlay');
          var splitCenter = document.getElementById('cv-split-btn-center');
          var tw = document.querySelector('.drop_uploader .text_wrapper');
          if (!overlay || !splitCenter) return;
          var isShown   = overlay.style.display !== 'none';
          var hasState  = overlay.classList.contains('state-uploading') || overlay.classList.contains('state-complete');
          var hide = isShown && hasState;
          splitCenter.style.display = hide ? 'none' : '';
          if (tw) tw.style.display = hide ? 'none' : '';
      }
      document.addEventListener('DOMContentLoaded', function() {
          var overlay = document.getElementById('upload-progress-overlay');
          if (overlay) {
              new MutationObserver(_syncSplitVisibility)
                  .observe(overlay, { attributes: true, attributeFilter: ['class', 'style'] });
          }
          /* "Add more files" button restores the split button */
          document.addEventListener('click', function(e) {
              if (e.target.closest && e.target.closest('#btn-add-more')) {
                  var sc = document.getElementById('cv-split-btn-center');
                  var tw = document.querySelector('.drop_uploader .text_wrapper');
                  if (sc) sc.style.display = '';
                  if (tw) tw.style.display = '';
              }
          });
      });
  })();

  /* ── Global paste handler ────────────────────────────────────────────────────
     • If clipboard contains File items (screenshot / copied image): feed directly
       into the uploader drop zone without opening any modal.
     • If clipboard contains no files: open the clipboard helper modal so the user
       knows how to paste a file, and the modal's own paste listener will catch the
       next Ctrl+V that actually carries a file.
     • Pressing Ctrl+V while an input/textarea is focused is always ignored.        */
  function _cvFeedFiles(files) {
      switchUploadTab('file');
      var dt = new DataTransfer();
      files.forEach(function(f) { dt.items.add(f); });
      var fed = false;
      var dropZone = document.querySelector('.drop_uploader.drop_zone');
      if (dropZone && typeof DragEvent !== 'undefined') {
          try {
              var dropEvt = new DragEvent('drop', { dataTransfer: dt, bubbles: true, cancelable: true });
              if (dropEvt.dataTransfer && dropEvt.dataTransfer.files.length) {
                  dropZone.dispatchEvent(dropEvt);
                  fed = true;
              }
          } catch(ex) {}
      }
      if (!fed) {
          var inp = document.getElementById('uploader') || document.querySelector('.drop_uploader input[type=file]');
          if (inp) {
              try {
                  Object.defineProperty(inp, 'files', { value: dt.files, writable: true, configurable: true });
                  $(inp).trigger('change');
              } catch(ex2) {}
          }
      }
  }

  document.addEventListener('paste', function(e) {
      var tag = document.activeElement && document.activeElement.tagName.toLowerCase();
      if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
      var items = e.clipboardData && e.clipboardData.items;
      var files = [];
      if (items) {
          for (var i = 0; i < items.length; i++) {
              if (items[i].kind === 'file') { var b = items[i].getAsFile(); if (b) files.push(b); }
          }
      }
      if (files.length > 0) {
          /* Real files in clipboard — feed directly, no modal needed */
          e.preventDefault();
          _cvFeedFiles(files);
      } else {
          /* No files — open the helper modal so user can paste a file-carrying clipboard */
          openClipboardModal();
      }
  });

// Allow Enter key in URL input
document.addEventListener('DOMContentLoaded', function() {
    var fi = document.getElementById('url-input-field');
    if (fi) { fi.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); addUrlFile(); } }); }

    /* ── Click anywhere on the dropzone (file tab) opens file picker ── */
    var wrapper = document.querySelector('.file-upload-wrapper');
    if (wrapper) {
        wrapper.addEventListener('click', function(e) {
            /* Ignore clicks on interactive elements */
            if (e.target.closest('button') || e.target.closest('input') ||
                e.target.closest('a') || e.target.closest('ul') ||
                e.target.closest('.cv-upload-dropdown')) return;
            /* Only open picker when file tab is active */
            var filePanel = document.getElementById('uptab-panel-file');
            if (filePanel && !filePanel.classList.contains('hidden')) {
                openFilePicker();
            }
        });
        wrapper.style.cursor = 'pointer';
    }
});


  // ── Auto-upload from output page Tools tab ──────────────────────────────────
  document.addEventListener('DOMContentLoaded', function() {
      try {
          var raw = sessionStorage.getItem('_oc_auto_upload');
          if (!raw) return;
          sessionStorage.removeItem('_oc_auto_upload');
          var data = JSON.parse(raw);
          if (!data || !data.url) return;
          // Switch to URL tab
          if (typeof switchUploadTab === 'function') switchUploadTab('url');
          // Fill the URL input
          var field = document.getElementById('url-input-field');
          if (field) {
              field.value = data.url;
              // Small delay to let the tab render, then trigger the prefetch
              setTimeout(function() {
                  if (typeof addUrlFile === 'function') addUrlFile();
              }, 400);
          }
      } catch(e) {}
  });
  
// ─── Cloud Pickers ───────────
// Returns true if the given filename's extension is allowed on this page.
// When _allowedSourceExts is empty (unknown converter) every extension passes.
function _checkExtAllowed(filename) {
    var exts = window._allowedSourceExts;
    if (!exts || !exts.length) return true;
    var ext = (filename || '').split('.').pop().toLowerCase();
    if (!ext || ext === filename.toLowerCase()) return true; // no extension
    return exts.indexOf(ext) !== -1;
}

// Show an extension-rejected error in the upload UI without a network round-
// trip.  Used when the cloud picker provides the filename before we call
// addUrlFile(), so we can give immediate client-side feedback.  Mirrors the
// visual style of _urlFileFallback (red badge + inline error message).
function _urlFileExtError(name, errorMsg) {
    var idx = _urlFileCounter++;
    var $ul = _getFilesUl();
    if (!$ul) return;
    var safeName = $('<span>').text(name || 'file').html();
    var safeMsg  = $('<span>').text(errorMsg).html();
    $ul.append(
        '<li id="url_file_' + idx + '" style="display:flex;align-items:center;gap:6px;padding:6px 4px;">' +
        '<i class="fa fa-link" style="color:#94a3b8;"></i>' +
        '<span class="upload-badge" style="background:#fee2e2;color:#dc2626;animation:none;font-size:0.7rem;padding:1px 5px;border-radius:3px;white-space:nowrap;">Error</span>' +
        '<span class="file_name" style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + safeName + '</span>' +
        '<button type="button" style="background:none;border:none;cursor:pointer;color:#94a3b8;padding:0 2px;" onclick="$(\'#url_file_' + idx + '\').remove();"><i class="fa fa-times"></i></button>' +
        '<span class="upload-error-msg" style="display:block;width:100%;font-size:0.75rem;color:#dc2626;margin-top:2px;">' + safeMsg + '</span>' +
        '</li>'
    );
    setTimeout(function() {
        $('#url_file_' + idx).fadeOut(500, function() { $(this).remove(); });
    }, 6000);
}

function openDropboxChooser() {
    var dbKey = '{{ site_settings.get("dropbox_app_key", "") if site_settings is defined else "" }}';
    if (!dbKey) {
        toastr.warning('Dropbox integration is not configured yet. Please contact the site administrator.');
        return;
    }
    if (typeof Dropbox === 'undefined') {
        var s = document.createElement('script');
        s.src = 'https://www.dropbox.com/static/api/2/dropins.js';
        s.setAttribute('id', 'dropboxjs');
        s.setAttribute('data-app-key', dbKey);
        s.onload = function() { _openDropboxChooser(); };
        document.head.appendChild(s);
    } else { _openDropboxChooser(); }
}
function _openDropboxChooser() {
    Dropbox.choose({
        success: function(files) {
            files.forEach(function(f) {
                // Client-side early check: Dropbox gives us the filename
                // before any network call, so we can show immediate feedback.
                // Server-side api_url_prefetch remains the authoritative guard.
                if (!_checkExtAllowed(f.name || '')) {
                    var badExt = '.' + (f.name || '').split('.').pop().toLowerCase();
                    _urlFileExtError(f.name || 'file',
                        'File type ' + badExt + ' is not allowed on this converter.');
                    return;
                }
                var field = document.getElementById('url-input-field');
                if (field) { field.value = f.link; }
                addUrlFile();
            });
        },
        linkType: 'direct',
        multiselect: true,
        extensions: []
    });
}

</script>
{% endblock %}

{% block faq_java %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}