{% extends "base.html" %}
{% block title %}{% if job.is_finished %}{% if job.result.error %}{% trans %}Conversion failed - please try again{% endtrans %}{% else %}{% trans %}Download file - your conversion was successful{% endtrans %}{% endif %}{% else %}{% trans %}Converting your file...{% endtrans %}{% endif %}{% endblock %}
{% block head %}
{{ super() }}
<meta name="robots" content="noindex, nofollow">
  {% if job.is_finished and not job.result.error %}
  <meta name="description" content="{% trans %}Your file conversion was successful. Download your converted files now.{% endtrans %}">
  {% elif job.is_finished and job.result.error %}
  <meta name="description" content="{% trans %}File conversion failed. Please try again or contact support.{% endtrans %}">
  {% else %}
  <meta name="description" content="{% trans %}Converting your file, please wait...{% endtrans %}">
  {% endif %}
<style>
    @keyframes sk-stretchdelay {
        0%, 40%, 100% { transform: scaleY(0.4); }
        20% { transform: scaleY(1.0); }
    }
    @keyframes fadeSlideIn {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .notify-card-reveal { animation: fadeSlideIn 0.4s ease-out forwards; }
      @keyframes oc-progress-pulse {
          0%   { width: 5%;  }
          30%  { width: 42%; }
          60%  { width: 70%; }
          80%  { width: 83%; }
          100% { width: 89%; }
      }
      @keyframes oc-orb-ping {
          0%   { transform: scale(1);   opacity: .5; }
          70%  { transform: scale(2.0); opacity: 0;  }
          100% { transform: scale(2.0); opacity: 0;  }
      }
      @keyframes oc-bar-stretch {
          0%, 40%, 100% { transform: scaleY(0.35); }
          20%           { transform: scaleY(1.0);  }
      }
      .oc-bar { width: 6px; border-radius: 9999px; transform-origin: bottom; }
      .oc-ping-ring  { position:absolute; inset:-10px; border-radius:inherit; background:rgba(59,130,246,.2); animation:oc-orb-ping 2.2s cubic-bezier(0,0,.2,1) infinite; }
      .oc-ping-ring2 { position:absolute; inset:-20px; border-radius:inherit; background:rgba(99,102,241,.12); animation:oc-orb-ping 2.2s cubic-bezier(0,0,.2,1) .6s infinite; }
</style>
{% endblock %}

{% block content %}
<div class="w-full">
    {% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}
    {% if job.is_finished %}
        {% if conversion_deleted %}
        <div class="text-center max-w-lg mx-auto py-12">
            <div class="w-16 h-16 rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-6">
                <i class="fa fa-trash-can text-2xl text-gray-400 dark:text-gray-500"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Conversion deleted{% endtrans %}</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6">{% trans %}This conversion and its files have been permanently deleted.{% endtrans %}</p>
            <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium transition-all">
                <i class="fa fa-house"></i> {% trans %}Home{% endtrans %}
            </a>
        </div>
        {% elif job.result.error %}
        {% if job.result.get('timeout_exceeded') %}
        <!-- Timeout Exceeded Upgrade Card -->
        <div class="text-center max-w-lg mx-auto py-12">
            <div class="w-16 h-16 rounded-2xl bg-amber-50 dark:bg-amber-900/20 flex items-center justify-center mx-auto mb-6">
                <i class="fa fa-clock text-2xl text-amber-500"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Processing Time Limit Reached{% endtrans %}</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6">{{ job.result.message }}</p>
            <div class="rounded-2xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-6 mb-6 text-left">
                <p class="text-sm font-semibold text-amber-800 dark:text-amber-300 mb-2"><i class="fa fa-bolt mr-1"></i>{% trans %}What you get with a premium plan:{% endtrans %}</p>
                <ul class="text-sm text-amber-700 dark:text-amber-400 space-y-1 list-none">
                    <li><i class="fa fa-check mr-1 text-amber-500"></i>{% trans %}Longer processing time limits{% endtrans %}</li>
                    <li><i class="fa fa-check mr-1 text-amber-500"></i>{% trans %}Priority queue – your jobs run first{% endtrans %}</li>
                    <li><i class="fa fa-check mr-1 text-amber-500"></i>{% trans %}Larger file size limits{% endtrans %}</li>
                    <li><i class="fa fa-check mr-1 text-amber-500"></i>{% trans %}More conversions per day{% endtrans %}</li>
                </ul>
            </div>
            <div class="flex items-center justify-center gap-3 flex-wrap">
                <button onclick="window.history.back()" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium transition-all">
                    <i class="fa fa-arrow-left"></i> {% trans %}Go Back{% endtrans %}
                </button>
                {% if current_user and current_user.get('id') %}
                <a href="/subscribe" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-medium transition-all">
                    <i class="fa fa-crown"></i> {% trans %}Upgrade Plan{% endtrans %}
                </a>
                {% else %}
                <a href="/register" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-medium transition-all">
                    <i class="fa fa-crown"></i> {% trans %}Get a Paid Plan{% endtrans %}
                </a>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="text-center max-w-lg mx-auto py-12">
            <div class="w-16 h-16 rounded-2xl bg-red-50 dark:bg-red-900/20 flex items-center justify-center mx-auto mb-6">
                <i class="fa fa-circle-exclamation text-2xl text-red-500"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Something went wrong{% endtrans %}</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6">{{job.result.message}}</p>
            <div class="flex items-center justify-center gap-3 flex-wrap">
                <button onclick="window.history.back()" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium transition-all">
                    <i class="fa fa-arrow-left"></i> {% trans %}Go Back{% endtrans %}
                </button>
                {% if retry_available %}
                <form method="POST" action="/retry/{{ job_id }}">
                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-700 text-white font-medium transition-all">
                        <i class="fa fa-rotate-right"></i> {% trans %}Try Again{% endtrans %}
                    </button>
                </form>
                {% else %}
                <span class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 font-medium cursor-not-allowed" title="{% trans %}Original file no longer available — please re-upload{% endtrans %}">
                    <i class="fa fa-rotate-right"></i> {% trans %}Try Again{% endtrans %}
                </span>
                {% endif %}
                <button type="button" onclick="openDeleteModal()" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-medium transition-all">
                    <i class="fa fa-trash"></i> {% trans %}Delete{% endtrans %}
                </button>
            </div>
        </div>
        {% endif %}
        {% else %}
        {% if job.result.get('output_deleted') %}
        {% if not upload_available %}
        <!-- Both files deleted: output gone AND original upload also gone -->
        <div class="text-center max-w-lg mx-auto py-12">
            <div class="w-16 h-16 rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-6">
                <i class="fa fa-trash-can text-2xl text-gray-400 dark:text-gray-500"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Files Deleted{% endtrans %}</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6">{% trans %}Both the converted output files and the original upload have been permanently removed.{% endtrans %}</p>
            <div class="flex items-center justify-center gap-3 flex-wrap">
                <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium transition-all">
                    <i class="fa fa-house"></i> {% trans %}Home{% endtrans %}
                </a>
                <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-700 text-white font-medium transition-all">
                    <i class="fa fa-upload"></i> {% trans %}Convert New File{% endtrans %}
                </a>
            </div>
        </div>
        {% else %}
        <!-- Deleted-state card: output files gone but original upload may still exist -->
        <div class="text-center max-w-lg mx-auto py-12">
            <div class="w-16 h-16 rounded-2xl bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center mx-auto mb-6">
                <i class="fa fa-trash-can text-2xl text-orange-500"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Output files deleted{% endtrans %}</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6">{% trans %}The converted output files have been permanently removed. Your original uploaded file may still be available if you want to convert again.{% endtrans %}</p>
            <div class="flex items-center justify-center gap-3 flex-wrap">
                <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium transition-all">
                    <i class="fa fa-house"></i> {% trans %}Home{% endtrans %}
                </a>
                {% if retry_available %}
                <form method="POST" action="{{ url('/retry/' ~ job_id) }}">
                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-700 text-white font-medium transition-all">
                        <i class="fa fa-rotate-right"></i> {% trans %}Convert Again{% endtrans %}
                    </button>
                </form>
                {% endif %}
                {% if upload_available %}
                <button type="button" onclick="openDeleteModal()" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-medium transition-all">
                    <i class="fa fa-trash"></i> {% trans %}Delete Upload Too{% endtrans %}
                </button>
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% else %}{# normal success section — output files exist #}

          {# ---- build a JS-safe list of absolute file URLs ---- #}
          {% set _file_urls_js = [] %}
          {% for _fu in sanitized_results %}{% if _file_urls_js.append(static_url(_fu)) %}{% endif %}{% endfor %}

          {# ---- plan feature flags ---- #}
          {% set _can_share      = current_user and plan and plan.get('share_link_enabled',0)|int %}
          {% set _can_share_pw   = current_user and plan and plan.get('share_link_password',0)|int %}
          {% set _can_share_ot   = current_user and plan and plan.get('share_link_onetime',0)|int %}
          {% set _can_share_exp  = current_user and plan and plan.get('share_link_expiry',0)|int %}
          {% set _max_exp_hrs    = plan.get('share_link_max_expiry_hours',0)|int if plan else 0 %}
          {% set _can_gdrive     = current_user and plan and plan.get('cloud_export_google_drive',0)|int and site_settings.get('google_drive_client_id','') %}
          {% set _can_dropbox    = current_user and plan and plan.get('cloud_export_dropbox',0)|int and site_settings.get('dropbox_app_key','') %}
          {% set _can_onedrive   = current_user and plan and plan.get('cloud_export_onedrive',0)|int and site_settings.get('onedrive_client_id','') %}
          {% set _can_archive    = plan and plan.get('batch_archive_download',0)|int %}

          {# ---- upload-deleted notice ---- #}
          {% if job.result.get('upload_deleted') %}
          <div class="mb-4 flex items-start gap-3 px-4 py-3 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700">
              <i class="fa fa-circle-info text-amber-500 mt-0.5 flex-shrink-0"></i>
              <p class="text-sm text-amber-800 dark:text-amber-300">{% trans %}Your original uploaded file has been deleted. The converted output files below are still available for download.{% endtrans %}</p>
          </div>
          {% endif %}

          {# ===== SUCCESS SECTION ===== #}

          {# Full-width tab bar (no border-radius, no side borders — goes edge-to-edge) #}
          <div class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 flex items-center overflow-x-auto">
              <button id="tab-files" onclick="switchOutputTab('files')"
                  class="output-tab flex items-center gap-1.5 px-5 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors whitespace-nowrap">
                  {% trans %}Files{% endtrans %}
              </button>
              <button id="tab-tools" onclick="switchOutputTab('tools')"
                  class="output-tab flex items-center gap-1.5 px-5 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors whitespace-nowrap">
                  {% trans %}Tools{% endtrans %}
              </button>
              <button id="tab-filelist" onclick="switchOutputTab('filelist')"
                  class="output-tab output-tab-active flex items-center gap-1.5 px-5 py-3 text-sm font-semibold border-b-2 border-primary text-primary dark:text-primary-light dark:border-primary-light transition-colors whitespace-nowrap">
                  {% trans %}File List{% endtrans %}
              </button>
              <div class="ml-auto px-5">
                  <a href="#feedback-section" class="text-sm text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors whitespace-nowrap">
                      {% trans %}Give us your feedback{% endtrans %} <i class="fa fa-chevron-right text-xs"></i>
                  </a>
              </div>
          </div>

          {# ===== TWO-COLUMN LAYOUT: 65% left | 35% right (stacks on mobile) ===== #}
          <div class="flex flex-col md:flex-row">

              {# ===== LEFT COLUMN (65%) — tab panels + bottom cards ===== #}
              <div class="w-full md:w-[65%] flex-shrink-0 min-w-0 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
              <div class="min-w-0">

                  {% if permission_required %}
                  {# ---- PERMISSION REQUIRED NOTICE ---- #}
                  <div class="p-5">
                      <div class="flex items-start gap-3 px-4 py-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700">
                          <i class="fa fa-lock text-amber-500 dark:text-amber-400 mt-0.5 flex-shrink-0"></i>
                          <div>
                              <p class="text-sm font-semibold text-amber-800 dark:text-amber-300">{% trans %}Permission required{% endtrans %}</p>
                              {% if not current_user %}
                              <p class="text-sm text-amber-700 dark:text-amber-400 mt-0.5">{% trans %}You have been invited to view this file. Please{% endtrans %} <a href="/login?next={{ request.path|urlencode }}" class="underline font-semibold">{% trans %}log in{% endtrans %}</a> {% trans %}to access it.{% endtrans %}</p>
                              {% else %}
                              <p class="text-sm text-amber-700 dark:text-amber-400 mt-0.5">{% trans %}You don't have permission to view this file. Please request access from the file owner.{% endtrans %}</p>
                              {% endif %}
                          </div>
                      </div>
                  </div>
                  {% else %}
                  {# ---- FILES PANEL ---- #}
                  <div id="panel-files" class="output-panel hidden p-5">
                      <div class="flex items-center gap-4 mb-5">
                          <div class="w-12 h-12 rounded-2xl bg-green-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-green-500/30">
                              <i class="fa fa-check text-white text-lg"></i>
                          </div>
                          <div>
                              <h3 class="text-base font-bold text-gray-900 dark:text-white">{% trans %}Conversion complete{% endtrans %}</h3>
                              <p class="text-sm text-gray-500 dark:text-gray-400">
                                  {{ sanitized_results|length }} {% trans %}file{% endtrans %}{% if sanitized_results|length != 1 %}s{% endif %} {% trans %}converted{% endtrans %}{% if output_format %} · <span class="font-semibold uppercase">{{ output_format }}</span>{% endif %}
                              </p>
                          </div>
                      </div>
                      <div class="grid grid-cols-2 gap-3">
                          <div class="rounded-xl bg-gray-50 dark:bg-gray-800 px-4 py-3">
                              <p class="text-xs text-gray-400 dark:text-gray-500 mb-0.5">{% trans %}Files{% endtrans %}</p>
                              <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ sanitized_results|length }}</p>
                          </div>
                          {% if output_format %}
                          <div class="rounded-xl bg-gray-50 dark:bg-gray-800 px-4 py-3">
                              <p class="text-xs text-gray-400 dark:text-gray-500 mb-0.5">{% trans %}Format{% endtrans %}</p>
                              <p class="text-2xl font-bold text-gray-900 dark:text-white uppercase">{{ output_format }}</p>
                          </div>
                          {% endif %}
                      </div>
                      <button onclick="switchOutputTab('filelist')" class="mt-4 w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-primary/10 hover:bg-primary/20 dark:bg-primary-light/10 dark:hover:bg-primary-light/20 text-primary dark:text-primary-light text-sm font-medium transition-all">
                          <i class="fa fa-list-ul text-xs"></i> {% trans %}View File List{% endtrans %}
                      </button>
                  </div>

                  {# ---- TOOLS PANEL ---- #}
                  <div id="panel-tools" class="output-panel hidden">
                      {# Sub-filter tabs #}
                      <div class="flex items-center gap-2 px-4 py-2 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
                          <button id="tools-tab-all" onclick="filterTools('all')"
                              class="tools-filter-tab inline-flex items-center gap-1.5 px-3 py-1 rounded-md bg-blue-600 text-white text-xs font-medium transition-all">
                              <i class="fa fa-th-large text-xs"></i> {% trans %}All{% endtrans %}
                          </button>
                          <button id="tools-tab-converter" onclick="filterTools('converter')"
                              class="tools-filter-tab inline-flex items-center gap-1.5 px-3 py-1 rounded-md border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 text-xs font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                              <i class="fa fa-file text-xs"></i> {% trans %}Converter{% endtrans %}
                          </button>
                      </div>

                      {# Format groups from server-side conversion_tools #}
                      {% set _out_fname = sanitized_results[0] | basename | splitpart(0, '?') if sanitized_results else '' %}
                      {% if conversion_tools %}
                          {% for tool_group in conversion_tools %}
                          <div class="tools-converter-group border-b border-gray-100 dark:border-gray-800 last:border-0">
                              {# Group header #}
                              <div class="flex items-center justify-between px-4 py-2 bg-gray-50 dark:bg-gray-800/60">
                                  <span class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">{{ tool_group.title }}</span>
                                  {% if _out_fname %}
                                  <span class="text-xs text-gray-400 dark:text-gray-500 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded truncate max-w-[180px]">{{ _out_fname }}</span>
                                  {% endif %}
                              </div>
                              {# Format rows #}
                              {% for fmt in tool_group.ext %}
                              {% if not output_format or fmt|lower != output_format|lower %}
                              <div class="flex items-center gap-3 px-4 py-2.5 border-b border-gray-50 dark:border-gray-800/40 last:border-0 hover:bg-blue-50/40 dark:hover:bg-blue-900/10 transition-colors">
                                  <div class="w-8 h-8 rounded-md bg-green-600 flex items-center justify-center flex-shrink-0">
                                      <i class="fa fa-file-alt text-white text-xs"></i>
                                  </div>
                                  <span class="text-sm text-gray-700 dark:text-gray-300 flex-1">{% trans %}Convert to{% endtrans %} {{ fmt }}</span>
                                  <button type="button" onclick="openToolConverter('{{ tool_group.category }}','{{ fmt|lower }}')" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium transition-all whitespace-nowrap">
                                      {% trans %}Continue with{% endtrans %} <i class="fa fa-arrow-right text-xs"></i>
                                  </button>
                              </div>
                              {% endif %}
                              {% endfor %}
                          </div>
                          {% endfor %}
                      {% else %}
                      <div class="p-5 text-center text-sm text-gray-500 dark:text-gray-400">
                          <i class="fa fa-tools text-2xl text-gray-300 dark:text-gray-600 mb-3 block"></i>
                          {% trans %}No additional conversion tools available for this format.{% endtrans %}
                          <div class="mt-4">
                              <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-medium transition-all">
                                  <i class="fa fa-arrows-rotate"></i> {% trans %}Start a new conversion{% endtrans %}
                              </a>
                          </div>
                      </div>
                      {% endif %}
                  </div>

                  {# ---- FILE LIST PANEL (default) ---- #}
                  <div id="panel-filelist" class="output-panel">

                      {# Secondary toolbar #}
                      <div class="flex items-center gap-2 px-4 py-2 border-b border-gray-100 dark:border-gray-800 flex-wrap">
                          {# Download Selected split button #}
                          <div class="relative" id="download-dropdown-wrapper">
                              <div class="flex rounded-lg overflow-hidden shadow-sm">
                                  <button type="button" onclick="downloadSelected()"
                                      class="inline-flex items-center gap-1.5 pl-3 pr-2 py-1.5 bg-primary hover:bg-primary/90 dark:bg-primary-light dark:hover:bg-primary-light/90 text-white text-xs font-semibold transition-all">
                                      <i class="fa fa-download text-xs"></i> {% trans %}Download selected{% endtrans %}
                                  </button>
                                  <button type="button" onclick="toggleDownloadDropdown()" aria-label="More download options"
                                      class="flex-shrink-0 px-2 py-1.5 bg-primary hover:bg-primary/90 dark:bg-primary-light dark:hover:bg-primary-light/90 text-white text-xs border-l border-white/30 transition-all">
                                      <i class="fa fa-chevron-down text-xs"></i>
                                  </button>
                              </div>
                              <div id="download-dropdown" class="hidden absolute left-0 top-full mt-1 z-20 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg overflow-hidden min-w-[180px]">
                                  <button onclick="downloadSelected(); toggleDownloadDropdown()"
                                      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                      <i class="fa fa-check-square text-primary dark:text-primary-light w-4"></i> {% trans %}Download Selected{% endtrans %}
                                  </button>
                                  <button onclick="downloadAll(); toggleDownloadDropdown()"
                                      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                      <i class="fa fa-download text-gray-400 w-4"></i> {% trans %}Download All{% endtrans %}
                                  </button>
                                  {% if sanitized_results|length > 1 %}
                                  {% if _can_archive %}
                                  <button onclick="openArchiveModal(); toggleDownloadDropdown()"
                                      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-t border-gray-100 dark:border-gray-700">
                                      <i class="fa fa-file-zipper text-gray-400 w-4"></i> {% trans %}Download as Archive{% endtrans %}
                                  </button>
                                  {% else %}
                                  <div class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-400 dark:text-gray-500 border-t border-gray-100 dark:border-gray-700 cursor-not-allowed opacity-60">
                                      <i class="fa fa-lock w-4"></i>
                                      {% trans %}Archive{% endtrans %}
                                      <a href="{{ full_url('/pricing') }}" class="ml-auto text-xs text-primary dark:text-primary-light hover:underline">{% trans %}Upgrade{% endtrans %}</a>
                                  </div>
                                  {% endif %}
                                  {% endif %}
                                  {% if _can_dropbox %}
                                  <button type="button" onclick="exportToDropbox(); toggleDownloadDropdown()"
                                      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-t border-gray-100 dark:border-gray-700">
                                      <svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24"><path d="M12 14.56l-6-3.84L0 14.56 6 18.4zM0 3.84l6 3.84 6-3.84L6 0zM12 7.68l6 3.84 6-3.84L18 3.84zM12 14.56l6 3.84 6-3.84-6-3.84zM12 15.52L6 19.36l6 3.84 6-3.84z" fill="#0061FF"/></svg>
                                      {% trans %}Upload to Dropbox{% endtrans %}
                                  </button>
                                  {% else %}
                                  <div class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-400 dark:text-gray-500 border-t border-gray-100 dark:border-gray-700 cursor-not-allowed opacity-60">
                                      <svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24"><path d="M12 14.56l-6-3.84L0 14.56 6 18.4zM0 3.84l6 3.84 6-3.84L6 0zM12 7.68l6 3.84 6-3.84L18 3.84zM12 14.56l6 3.84 6-3.84-6-3.84zM12 15.52L6 19.36l6 3.84 6-3.84z" fill="#9ca3af"/></svg>
                                      {% trans %}Upload to Dropbox{% endtrans %} <i class="fa fa-lock text-xs ml-auto"></i>
                                  </div>
                                  {% endif %}
                                  {% if _can_gdrive %}
                                  <button type="button" onclick="exportToGoogleDrive(); toggleDownloadDropdown()"
                                      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-t border-gray-100 dark:border-gray-700">
                                      <svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 87.3 78"><path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/></svg>
                                      {% trans %}Upload to Google Drive{% endtrans %}
                                  </button>
                                  {% else %}
                                  <div class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-400 dark:text-gray-500 border-t border-gray-100 dark:border-gray-700 cursor-not-allowed opacity-60">
                                      <svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 87.3 78"><path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#9ca3af"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#9ca3af"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#9ca3af"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#9ca3af"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#9ca3af"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#9ca3af"/></svg>
                                      {% trans %}Upload to Google Drive{% endtrans %} <i class="fa fa-lock text-xs ml-auto"></i>
                                  </div>
                                  {% endif %}
                                  {% if _can_onedrive %}
                                  <button type="button" onclick="exportToOneDrive(); toggleDownloadDropdown()"
                                      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-t border-gray-100 dark:border-gray-700">
                                      <svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24"><path d="M14.05 11.37a5.68 5.68 0 0 0-2.93.82A5.68 5.68 0 0 0 6.3 9.49a5.66 5.66 0 0 0-3.15.96A5.66 5.66 0 0 0 0 15.6a5.66 5.66 0 0 0 5.66 5.66h12.68A5.66 5.66 0 0 0 24 15.6a5.66 5.66 0 0 0-5.66-5.66c-.11 0-.22 0-.33.01A5.68 5.68 0 0 0 14.05 11.37z" fill="#0078D4"/></svg>
                                      {% trans %}Upload to OneDrive{% endtrans %}
                                  </button>
                                  {% else %}
                                  <div class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-400 dark:text-gray-500 border-t border-gray-100 dark:border-gray-700 cursor-not-allowed opacity-60">
                                      <svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24"><path d="M14.05 11.37a5.68 5.68 0 0 0-2.93.82A5.68 5.68 0 0 0 6.3 9.49a5.66 5.66 0 0 0-3.15.96A5.66 5.66 0 0 0 0 15.6a5.66 5.66 0 0 0 5.66 5.66h12.68A5.66 5.66 0 0 0 24 15.6a5.66 5.66 0 0 0-5.66-5.66c-.11 0-.22 0-.33.01A5.68 5.68 0 0 0 14.05 11.37z" fill="#9ca3af"/></svg>
                                      {% trans %}Upload to OneDrive{% endtrans %} <i class="fa fa-lock text-xs ml-auto"></i>
                                  </div>
                                  {% endif %}
                              </div>
                          </div>
                          {% set _pv_ext = (sanitized_results[0] | basename | splitpart(0,'?')).rsplit('.',1)[-1]|lower if sanitized_results else '' %}
                          {% set _pv_exts = ['jpg','jpeg','png','gif','webp','svg','bmp','ico','mp4','webm','mp3','ogg','wav','pdf'] %}
                          {% if _pv_ext in _pv_exts %}
                          <button type="button"
                              onclick="openPreviewModal('{{ static_url(sanitized_results[0]) }}', '{{ sanitized_results[0] | basename | splitpart(0,'?') }}')"
                              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-xs font-medium transition-all">
                              <i class="fa fa-eye text-xs"></i> {% trans %}Preview{% endtrans %}
                          </button>
                          {% else %}
                          <button type="button" disabled title="{% trans %}Preview not available for this file type{% endtrans %}"
                              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-400 dark:text-gray-600 text-xs font-medium opacity-50 cursor-not-allowed">
                              <i class="fa fa-eye text-xs"></i> {% trans %}Preview{% endtrans %}
                          </button>
                          {% endif %}
                          <button type="button" onclick="showFileInfoForSelected()"
                              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-xs font-medium transition-all">
                              <i class="fa fa-circle-info text-xs"></i> {% trans %}File info{% endtrans %}
                          </button>
                      </div>

                      {# Select all / none — top #}
                      <div class="flex items-center gap-4 px-4 py-2 border-b border-gray-100 dark:border-gray-800 text-sm">
                          <label class="flex items-center gap-1.5 cursor-pointer select-none text-gray-600 dark:text-gray-400">
                              <input type="checkbox" id="select-all-files" checked class="rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary" onchange="toggleAllFiles(this.checked)">
                              {% trans %}Select all{% endtrans %}
                          </label>
                          <button type="button" onclick="selectNoneFiles()" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors select-none">
                              {% trans %}Select none{% endtrans %}
                          </button>
                      </div>

                      {# File rows #}
                      {% for file_url in sanitized_results %}
                      {% set _fname = file_url | basename | splitpart(0, '?') %}
                      {% set _fsize = get_file_size(file_url) %}
                      {% set _fext = _fname.rsplit('.', 1)[-1]|lower if '.' in _fname else '' %}
                      <div class="flex items-center gap-3 px-4 py-2.5 border-b border-gray-100 dark:border-gray-800 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
                          <input type="checkbox" class="file-checkbox flex-shrink-0 rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary" data-url="{{ static_url(file_url) }}" data-name="{{ _fname }}" data-size="{{ _fsize }}" checked>
                          {# Thumbnail: use actual image if image format, else file-type icon #}
                          {% if _fext in ['jpg','jpeg','png','gif','webp','bmp','tiff','tif','svg','ico','avif'] %}
                          <img src="{{ static_url(file_url) }}" alt="{{ _fname }}" class="w-10 h-10 object-cover rounded flex-shrink-0 border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800">
                          {% else %}
                          <div class="w-10 h-10 rounded flex-shrink-0 border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                              <span class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase">{{ _fext[:4] if _fext else '?' }}</span>
                          </div>
                          {% endif %}
                          <span class="flex-1 text-sm text-gray-800 dark:text-gray-200 truncate min-w-0" title="{{ _fname }}">{{ _fname }}</span>
                          <span class="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0 hidden sm:block">{{ _fsize }}</span>
                          <button type="button"
                              onclick="showFileInfo(this)"
                              data-name="{{ _fname }}" data-size="{{ _fsize }}" data-url="{{ static_url(file_url) }}"
                              class="inline-flex items-center gap-1 px-2.5 py-1 rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-light hover:border-primary dark:hover:border-primary-light text-xs transition-all flex-shrink-0">
                              <i class="fa fa-circle-info"></i> {% trans %}Info{% endtrans %}
                          </button>
                          <a href="{{ static_url(file_url) }}" download
                              class="inline-flex items-center gap-1 px-2.5 py-1 rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-light hover:border-primary dark:hover:border-primary-light text-xs transition-all flex-shrink-0">
                              <i class="fa fa-download"></i> {% trans %}Download{% endtrans %}
                          </a>
                      </div>
                      {% endfor %}

                      {# Select all / none — bottom #}
                      <div class="flex items-center gap-4 px-4 py-2 border-t border-gray-100 dark:border-gray-800 text-sm">
                          <label class="flex items-center gap-1.5 cursor-pointer select-none text-gray-600 dark:text-gray-400">
                              <input type="checkbox" id="select-all-files-bottom" checked class="rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary" onchange="toggleAllFiles(this.checked); document.getElementById('select-all-files').checked = this.checked;">
                              {% trans %}Select all{% endtrans %}
                          </label>
                          <button type="button" onclick="selectNoneFiles()" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors select-none">
                              {% trans %}Select none{% endtrans %}
                          </button>
                      </div>

                      {# Archive modal #}
                      {% if _can_archive and sanitized_results|length > 1 %}
                      <div id="archive-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden">
                          <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-6 w-full max-w-sm mx-4">
                              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">{% trans %}Download as Archive{% endtrans %}</h3>
                              <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{% trans %}Choose an archive format{% endtrans %}</p>
                              <div class="grid grid-cols-2 gap-3 mb-4" id="archive-format-grid">
                                  <button onclick="downloadArchive('zip')" class="flex flex-col items-center gap-1.5 p-4 rounded-xl border-2 border-gray-200 dark:border-gray-700 hover:border-primary dark:hover:border-primary-light hover:bg-primary/5 transition-all">
                                      <i class="fa fa-file-zipper text-2xl text-primary dark:text-primary-light"></i>
                                      <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">ZIP</span>
                                  </button>
                                  <button onclick="downloadArchive('tar.gz')" class="flex flex-col items-center gap-1.5 p-4 rounded-xl border-2 border-gray-200 dark:border-gray-700 hover:border-primary dark:hover:border-primary-light hover:bg-primary/5 transition-all">
                                      <i class="fa fa-file-archive text-2xl text-primary dark:text-primary-light"></i>
                                      <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">TAR.GZ</span>
                                  </button>
                                  <button onclick="downloadArchive('tar.bz2')" class="flex flex-col items-center gap-1.5 p-4 rounded-xl border-2 border-gray-200 dark:border-gray-700 hover:border-primary dark:hover:border-primary-light hover:bg-primary/5 transition-all">
                                      <i class="fa fa-file-archive text-2xl text-primary dark:text-primary-light"></i>
                                      <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">TAR.BZ2</span>
                                  </button>
                                  <button onclick="downloadArchive('7z')" class="flex flex-col items-center gap-1.5 p-4 rounded-xl border-2 border-gray-200 dark:border-gray-700 hover:border-primary dark:hover:border-primary-light hover:bg-primary/5 transition-all">
                                      <i class="fa fa-file-archive text-2xl text-primary dark:text-primary-light"></i>
                                      <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">7Z</span>
                                  </button>
                              </div>
                              <div id="archive-modal-status" class="hidden text-center text-sm text-gray-500 dark:text-gray-400 mb-3">
                                  <i class="fa fa-spinner fa-spin mr-1"></i>{% trans %}Preparing archive…{% endtrans %}
                              </div>
                              <button onclick="closeArchiveModal()" class="w-full py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">{% trans %}Cancel{% endtrans %}</button>
                          </div>
                      </div>
                      {% endif %}

                  </div>{# /panel-filelist #}

                  {# ===== BOTTOM TWO CARDS: Feedback + Social ===== #}
                  <div class="grid grid-cols-1 md:grid-cols-2 border-t border-gray-100 dark:border-gray-800">

                      {# Feedback card #}
                      <div class="p-5 border-b md:border-b-0 md:border-r border-gray-100 dark:border-gray-800" id="feedback-section">
                          <h3 class="text-sm font-bold text-gray-800 dark:text-white mb-1">{% trans %}Your input matters{% endtrans %}</h3>
                          <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">{% trans %}Share your thoughts, suggestions, or experiences with our services. Your feedback helps us improve. Thank you for being part of our journey!{% endtrans %}</p>
                          <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">{% trans %}How would you rate us?{% endtrans %}</p>
                          <div class="flex items-center gap-1 mb-3" id="star-rating">
                              {% set _emojis = [('😞','Terrible'),('😕','Poor'),('😊','Okay'),('😄','Good'),('🎉','Amazing')] %}
                              {% for _emoji, _label in _emojis %}
                              <button type="button" title="{{ _label }}" class="star-btn text-xl opacity-60 hover:opacity-100 transition-all focus:outline-none hover:scale-125 transform" data-value="{{ loop.index }}" onclick="setRating({{ loop.index }})">{{ _emoji }}</button>
                              {% endfor %}
                          </div>
                          <div id="feedback-comment-row" class="space-y-2">
                              <div class="relative">
                                  <textarea id="feedback-comment" rows="3" maxlength="4000" oninput="updateFeedbackCounter(this)"
                                      class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/50 outline-none resize-none transition-all"
                                      placeholder="{% trans %}Anything you want to tell us? (optional){% endtrans %}"></textarea>
                                  <span id="feedback-counter" class="absolute bottom-2 right-2 text-xs text-gray-400 dark:text-gray-500 pointer-events-none">0 / 4000</span>
                              </div>
                              <button type="button" onclick="submitFeedback()" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all">
                                  {% trans %}Submit{% endtrans %}
                              </button>
                          </div>
                          <div id="feedback-thanks" class="hidden text-sm text-gray-500 dark:text-gray-400">
                              <i class="fa fa-heart text-red-400 mr-1"></i> {% trans %}Thank you for your feedback!{% endtrans %}
                          </div>
                      </div>

                      {# Social share card #}
                      <div class="p-5">
                          <div class="flex items-start gap-3 mb-3">
                              <div class="w-9 h-9 rounded-xl bg-red-100 dark:bg-red-900/20 flex items-center justify-center flex-shrink-0">
                                  <i class="fa fa-heart text-red-500 text-sm"></i>
                              </div>
                              <div>
                                  <h3 class="text-sm font-bold text-gray-800 dark:text-white">{% trans %}Want to support us?{% endtrans %}</h3>
                                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Let friends in on the secret and share your new favorite tool!{% endtrans %}</p>
                              </div>
                          </div>
                          <div class="space-y-2">
                              <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.host_url|urlencode }}" target="_blank" rel="noopener noreferrer"
                                  class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-white text-sm font-medium transition-all" style="background-color:#1877F2" onmouseover="this.style.backgroundColor='#166fe5'" onmouseout="this.style.backgroundColor='#1877F2'">
                                  <i class="fa-brands fa-facebook text-base w-5 text-center"></i> Facebook
                              </a>
                              <a href="https://twitter.com/intent/tweet?text={{ ('I just converted my files with ' ~ (site_settings.get('site_name','this converter') | urlencode))|urlencode }}&url={{ request.host_url|urlencode }}" target="_blank" rel="noopener noreferrer"
                                  class="flex items-center gap-3 px-4 py-2.5 rounded-lg bg-gray-900 hover:bg-black dark:bg-gray-800 dark:hover:bg-gray-700 text-white text-sm font-medium transition-all">
                                  <i class="fa-brands fa-x-twitter text-base w-5 text-center"></i> Twitter
                              </a>
                              <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.host_url|urlencode }}" target="_blank" rel="noopener noreferrer"
                                  class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-white text-sm font-medium transition-all" style="background-color:#0A66C2" onmouseover="this.style.backgroundColor='#0958a8'" onmouseout="this.style.backgroundColor='#0A66C2'">
                                  <i class="fa-brands fa-linkedin text-base w-5 text-center"></i> LinkedIn
                              </a>
                          </div>
                      </div>

                  </div>{# /bottom two cards #}

                  {% endif %}{# /permission_required #}

              </div>{# /tab panels inner #}

          </div>{# /left column #}

          {# ===== RIGHT COLUMN (35%) — download + actions + done + task ===== #}
          <div class="w-full md:w-[35%] flex-shrink-0 bg-white dark:bg-gray-900 p-4 space-y-2 border-t md:border-t-0 md:border-l border-gray-200 dark:border-gray-800 md:self-start md:sticky md:top-0 md:overflow-y-auto md:max-h-screen">

              {# Download split button with cloud-upload dropdown #}
              {% if permission_required %}
              <div>
                  <div class="flex rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
                      <button type="button" disabled
                          class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 font-bold text-sm cursor-not-allowed">
                          <i class="fa fa-download"></i> {% trans %}Download{% endtrans %}
                      </button>
                      <button type="button" disabled
                          class="flex-shrink-0 px-3 py-3 bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 text-sm border-l border-gray-200 dark:border-gray-700 cursor-not-allowed">
                          <i class="fa fa-chevron-down"></i>
                      </button>
                  </div>
                  <div class="flex items-start gap-3 mt-2 px-4 py-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700">
                      <i class="fa fa-lock text-amber-500 dark:text-amber-400 mt-0.5 flex-shrink-0"></i>
                      <div>
                          <p class="text-sm font-semibold text-amber-800 dark:text-amber-300">{% trans %}Permission required{% endtrans %}</p>
                          <p class="text-sm text-amber-700 dark:text-amber-400 mt-0.5">{% trans %}Please request access from the file owner.{% endtrans %}</p>
                      </div>
                  </div>
              </div>
              {% else %}
              <div class="relative" id="sidebar-dl-wrapper">
                  <div class="flex rounded-lg overflow-hidden">
                      {% if sanitized_results|length == 1 %}
                      <a href="{{ static_url(sanitized_results[0]) }}" download
                          class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 bg-primary hover:bg-primary/90 text-white font-bold text-sm transition-all">
                          <i class="fa fa-download"></i> {% trans %}Download{% endtrans %}
                      </a>
                      {% else %}
                      <button type="button" onclick="downloadSelected()"
                          class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 bg-primary hover:bg-primary/90 text-white font-bold text-sm transition-all">
                          <i class="fa fa-download"></i> {% trans %}Download{% endtrans %}
                      </button>
                      {% endif %}
                      <button type="button" onclick="toggleSidebarDlDropdown()" aria-label="More download options"
                          class="flex-shrink-0 px-3 py-3 bg-primary hover:bg-primary/90 text-white text-sm border-l border-white/30 transition-all" id="sidebar-dl-chevron">
                          <i class="fa fa-chevron-down" id="sidebar-dl-chevron-icon"></i>
                      </button>
                  </div>
                  {# Sidebar download dropdown — starts hidden #}
                  <div id="sidebar-dl-dropdown" class="hidden absolute left-0 right-0 top-full mt-1 z-30 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl overflow-hidden">
                      {% if sanitized_results|length > 1 and _can_archive %}
                      <button type="button" onclick="downloadArchive('zip'); toggleSidebarDlDropdown()"
                          class="w-full flex items-center gap-3 px-4 py-3 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border-b border-gray-100 dark:border-gray-800">
                          <i class="fa fa-file-zipper text-gray-400 w-5 text-center"></i> {% trans %}Download as ZIP{% endtrans %}
                      </button>
                      {% endif %}
                      {% if _can_dropbox %}
                      <button type="button" onclick="exportToDropbox(); toggleSidebarDlDropdown()"
                          class="w-full flex items-center gap-3 px-4 py-3 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border-b border-gray-100 dark:border-gray-800">
                          <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24"><path d="M12 14.56l-6-3.84L0 14.56 6 18.4zM0 3.84l6 3.84 6-3.84L6 0zM12 7.68l6 3.84 6-3.84L18 3.84zM12 14.56l6 3.84 6-3.84-6-3.84zM12 15.52L6 19.36l6 3.84 6-3.84z" fill="#0061FF"/></svg>
                          {% trans %}Upload to Dropbox{% endtrans %}
                      </button>
                      {% else %}
                      <div class="w-full flex items-center gap-3 px-4 py-3 text-sm text-gray-400 dark:text-gray-600 border-b border-gray-100 dark:border-gray-800 cursor-not-allowed opacity-60">
                          <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24"><path d="M12 14.56l-6-3.84L0 14.56 6 18.4zM0 3.84l6 3.84 6-3.84L6 0zM12 7.68l6 3.84 6-3.84L18 3.84zM12 14.56l6 3.84 6-3.84-6-3.84zM12 15.52L6 19.36l6 3.84 6-3.84z" fill="#9ca3af"/></svg>
                          {% trans %}Upload to Dropbox{% endtrans %} <i class="fa fa-lock text-xs ml-auto"></i>
                      </div>
                      {% endif %}
                      {% if _can_gdrive %}
                      <button type="button" onclick="exportToGoogleDrive(); toggleSidebarDlDropdown()"
                          class="w-full flex items-center gap-3 px-4 py-3 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border-b border-gray-100 dark:border-gray-800">
                          <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 87.3 78"><path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/></svg>
                          {% trans %}Upload to Google Drive{% endtrans %}
                      </button>
                      {% else %}
                      <div class="w-full flex items-center gap-3 px-4 py-3 text-sm text-gray-400 dark:text-gray-600 border-b border-gray-100 dark:border-gray-800 cursor-not-allowed opacity-60">
                          <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 87.3 78"><path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#9ca3af"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#9ca3af"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#9ca3af"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#9ca3af"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#9ca3af"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#9ca3af"/></svg>
                          {% trans %}Upload to Google Drive{% endtrans %} <i class="fa fa-lock text-xs ml-auto"></i>
                      </div>
                      {% endif %}
                      {% if _can_onedrive %}
                      <button type="button" onclick="exportToOneDrive(); toggleSidebarDlDropdown()"
                          class="w-full flex items-center gap-3 px-4 py-3 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                          <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24"><path d="M14.05 11.37a5.68 5.68 0 0 0-2.93.82A5.68 5.68 0 0 0 6.3 9.49a5.66 5.66 0 0 0-3.15.96A5.66 5.66 0 0 0 0 15.6a5.66 5.66 0 0 0 5.66 5.66h12.68A5.66 5.66 0 0 0 24 15.6a5.66 5.66 0 0 0-5.66-5.66c-.11 0-.22 0-.33.01A5.68 5.68 0 0 0 14.05 11.37z" fill="#0078D4"/></svg>
                          {% trans %}Upload to OneDrive{% endtrans %}
                      </button>
                      {% else %}
                      <div class="w-full flex items-center gap-3 px-4 py-3 text-sm text-gray-400 dark:text-gray-600 cursor-not-allowed opacity-60">
                          <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24"><path d="M14.05 11.37a5.68 5.68 0 0 0-2.93.82A5.68 5.68 0 0 0 6.3 9.49a5.66 5.66 0 0 0-3.15.96A5.66 5.66 0 0 0 0 15.6a5.66 5.66 0 0 0 5.66 5.66h12.68A5.66 5.66 0 0 0 24 15.6a5.66 5.66 0 0 0-5.66-5.66c-.11 0-.22 0-.33.01A5.68 5.68 0 0 0 14.05 11.37z" fill="#9ca3af"/></svg>
                          {% trans %}Upload to OneDrive{% endtrans %} <i class="fa fa-lock text-xs ml-auto"></i>
                      </div>
                      {% endif %}
                  </div>
              </div>
              {% endif %}{# /permission_required sidebar-dl #}

              {% if not permission_required %}
              {# Export As (→ Tools tab) | Share | Delete — 3 equal buttons #}
              <div class="flex items-center gap-1">
                  <button type="button" onclick="switchOutputTab('tools')"
                      class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-xs font-medium transition-all">
                      <i class="fa fa-file-export text-xs"></i> {% trans %}Export As{% endtrans %}
                  </button>
                  <button type="button" onclick="openShareModal()"
                      class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-xs font-medium transition-all">
                      <i class="fa fa-share-nodes text-xs"></i> {% trans %}Share{% endtrans %}
                  </button>
                  <button type="button" onclick="openDeleteModal()"
                      class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-2 rounded-lg border border-red-300 dark:border-red-800 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 text-xs font-medium transition-all">
                      <i class="fa fa-trash text-xs"></i> {% trans %}Delete{% endtrans %}
                  </button>
              </div>

              {# Done card #}
              <div class="rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-950/30 p-3">
                  <div class="flex items-center gap-2 mb-1">
                      <div class="w-7 h-7 rounded-md bg-green-500 flex items-center justify-center flex-shrink-0">
                          <i class="fa fa-check text-white text-xs"></i>
                      </div>
                      <p class="text-sm font-bold text-green-900 dark:text-green-100">{% trans %}Done{% endtrans %}</p>
                  </div>
                  {% if not current_user or not plan or plan.get('price_monthly', 0)|int == 0 %}
                  <p class="text-xs text-green-700 dark:text-green-300 mb-2">{% trans %}Get a subscription to skip the queue, use PRO features, and process your files faster.{% endtrans %}</p>
                  <a href="{{ full_url('/pricing') }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold transition-all">
                      <i class="fa fa-crown text-xs"></i> {% trans %}Get Premium{% endtrans %}
                  </a>
                  {% else %}
                  <p class="text-xs text-green-700 dark:text-green-300">{{ sanitized_results|length }} {% trans %}file{% endtrans %}{% if sanitized_results|length != 1 %}s{% endif %} {% trans %}ready for download{% endtrans %}</p>
                  {% endif %}
              </div>

              {# Current Task #}
              {% if input_format or output_format or tool_type %}
              <div class="pt-1">
                  <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">{% trans %}Current Task{% endtrans %}</p>
                  <div class="flex items-center gap-2 mb-3 p-2 rounded-lg bg-gray-50 dark:bg-gray-800">
                      <div class="w-8 h-8 rounded-md bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 flex items-center justify-center flex-shrink-0">
                          <i class="fa fa-arrows-rotate text-gray-500 dark:text-gray-400 text-sm"></i>
                      </div>
                      <div class="flex-1 min-w-0">
                          {% if input_format and output_format %}
                          <p class="text-xs font-semibold text-gray-700 dark:text-gray-300">{% trans %}Convert to{% endtrans %} {{ output_format|upper }}</p>
                          {% elif tool_type %}
                          <p class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">{{ tool_type }}</p>
                          {% endif %}
                      </div>
                      <i class="fa fa-arrow-right text-gray-400 dark:text-gray-500 text-xs flex-shrink-0"></i>
                  </div>
                  <div class="flex items-center gap-2">
                      <a href="{{ url('/') }}"
                          class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-xs font-medium transition-all">
                          <i class="fa fa-rotate-left text-xs"></i> {% trans %}Start over{% endtrans %}
                      </a>
                      {% if retry_available %}
                      <form method="POST" action="{{ url('/retry/' ~ job_id) }}" style="display:contents">
                          <button type="submit"
                              class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-xs font-medium transition-all">
                              <i class="fa fa-gear text-xs"></i> {% trans %}Change options{% endtrans %}
                          </button>
                      </form>
                      {% endif %}
                  </div>
              </div>
              {% endif %}
              {% endif %}{# /not permission_required #}

          </div>{# /right column #}

          </div>{# /two-column layout #}

          {# ---- Share Modal (always rendered) ---- #}
          <div id="share-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden" onclick="if(event.target===this)closeShareModal()">
              <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">

                  {# Header #}
                  <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-800">
                      <div class="w-9 h-9 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                          <i class="fa fa-share-nodes text-blue-600 dark:text-blue-400"></i>
                      </div>
                      <h3 class="text-base font-bold text-gray-900 dark:text-white flex-1">{% trans %}Share{% endtrans %}</h3>
                      <button onclick="closeShareModal()" class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                          <i class="fa fa-xmark"></i>
                      </button>
                  </div>

                  <div class="p-6 space-y-5">

                      {% if not _can_share %}
                      {# Non-premium users: show upgrade prompt #}
                      <div class="text-center py-4">
                          <div class="w-12 h-12 rounded-2xl bg-amber-50 dark:bg-amber-900/20 flex items-center justify-center mx-auto mb-3">
                              <i class="fa fa-crown text-amber-500 text-lg"></i>
                          </div>
                          <p class="text-sm font-semibold text-gray-900 dark:text-white mb-1">{% trans %}Share links require Premium{% endtrans %}</p>
                          <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">{% trans %}Upgrade your plan to share files with anyone, no account required.{% endtrans %}</p>
                          <a href="{{ full_url('/pricing') }}" class="inline-flex items-center gap-2 px-5 py-2 rounded-xl bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold transition-all">
                              <i class="fa fa-crown text-xs"></i> {% trans %}Get Premium{% endtrans %}
                          </a>
                      </div>
                      {% else %}

                      {# People with access #}
                      <div>
                          <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wide">{% trans %}People with access{% endtrans %}</p>
                          <div class="space-y-1.5">
                              {# Owner row #}
                              <div class="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-800">
                                  {% if current_user %}
                                  <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 text-white text-sm font-bold">
                                      {{ (current_user.username or current_user.email or 'U')[0]|upper }}
                                  </div>
                                  <div class="flex-1 min-w-0">
                                      <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 truncate">{{ current_user.username or current_user.email or 'You' }} <span class="text-xs font-normal text-gray-500 dark:text-gray-400">({% trans %}You{% endtrans %})</span></p>
                                      {% if current_user.email and current_user.username %}
                                      <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ current_user.email }}</p>
                                      {% endif %}
                                  </div>
                                  {% else %}
                                  <div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
                                      <i class="fa fa-user text-gray-500 dark:text-gray-400 text-sm"></i>
                                  </div>
                                  <div class="flex-1 min-w-0">
                                      <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">{% trans %}You{% endtrans %}</p>
                                  </div>
                                  {% endif %}
                                  <span class="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded-md bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 text-xs font-medium">{% trans %}Owner{% endtrans %}</span>
                              </div>
                              {# Grantees — loaded dynamically when modal opens #}
                              <div id="share-grantees-list"></div>
                          </div>
                      </div>

                      {# General access / link sharing #}
                      <div>
                          <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wide">{% trans %}General access{% endtrans %}</p>
                          <div class="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-800">
                              <div class="w-9 h-9 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
                                  <i class="fa fa-lock text-gray-500 dark:text-gray-400 text-sm" id="share-access-icon"></i>
                              </div>
                              <div class="flex-1 min-w-0">
                                  <p class="text-sm font-semibold text-gray-800 dark:text-gray-200" id="share-access-label">{% trans %}Private{% endtrans %}</p>
                                  <p class="text-xs text-gray-500 dark:text-gray-400" id="share-access-desc">{% trans %}Only you can access{% endtrans %}</p>
                              </div>
                          </div>
                      </div>

                      {# Advanced options (password, one-time, expiry) #}
                      {% if _can_share_pw or _can_share_ot or _can_share_exp %}
                      <details class="group">
                          <summary class="cursor-pointer text-xs text-primary dark:text-primary-light font-medium flex items-center gap-1 select-none">
                              <i class="fa fa-sliders text-xs"></i> {% trans %}Advanced options{% endtrans %}
                              <i class="fa fa-chevron-down text-xs ml-1 group-open:rotate-180 transition-transform"></i>
                          </summary>
                          <div class="mt-3 space-y-3 pl-1">
                              {% if _can_share_pw %}
                              <div>
                                  <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><i class="fa fa-lock text-gray-400 mr-1 text-xs"></i>{% trans %}Password (optional){% endtrans %}</label>
                                  <input type="password" id="share-password" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all" placeholder="{% trans %}Leave blank for no password{% endtrans %}">
                              </div>
                              {% endif %}
                              {% if _can_share_ot %}
                              <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
                                  <input type="checkbox" id="share-onetime" class="rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary">
                                  {% trans %}One-time link{% endtrans %}
                                  <span class="text-gray-400">({% trans %}expires after first access{% endtrans %})</span>
                              </label>
                              {% endif %}
                              {% if _can_share_exp %}
                              <div>
                                  <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><i class="fa fa-clock text-gray-400 mr-1 text-xs"></i>{% trans %}Expires in{% endtrans %}</label>
                                  <select id="share-expiry" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all">
                                      <option value="">{% trans %}Never{% endtrans %}</option>
                                      {% if not _max_exp_hrs or _max_exp_hrs >= 1 %}<option value="1">{% trans %}1 hour{% endtrans %}</option>{% endif %}
                                      {% if not _max_exp_hrs or _max_exp_hrs >= 6 %}<option value="6">{% trans %}6 hours{% endtrans %}</option>{% endif %}
                                      {% if not _max_exp_hrs or _max_exp_hrs >= 24 %}<option value="24">{% trans %}24 hours{% endtrans %}</option>{% endif %}
                                      {% if not _max_exp_hrs or _max_exp_hrs >= 72 %}<option value="72">{% trans %}3 days{% endtrans %}</option>{% endif %}
                                      {% if not _max_exp_hrs or _max_exp_hrs >= 168 %}<option value="168">{% trans %}7 days{% endtrans %}</option>{% endif %}
                                      {% if not _max_exp_hrs or _max_exp_hrs >= 720 %}<option value="720">{% trans %}30 days{% endtrans %}</option>{% endif %}
                                  </select>
                              </div>
                              {% endif %}
                          </div>
                      </details>
                      {% endif %}

                      {# Grant access — email invite (premium only) #}
                      <div>
                          <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wide">
                              {% trans %}Grant access{% endtrans %}
                          </p>
                          <div class="flex items-center gap-2">
                              <input type="email" id="share-invite-email" placeholder="{% trans %}Email address{% endtrans %}"
                                  class="flex-1 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                              <button type="button" id="btn-send-invite" onclick="sendShareInvite()" class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-xs font-medium transition-all">
                                  <i class="fa fa-paper-plane text-xs"></i> {% trans %}Send{% endtrans %}
                              </button>
                          </div>
                          <div id="share-invite-status" class="hidden mt-2 text-xs px-3 py-2 rounded-lg"></div>
                      </div>

                      {# Share result area #}
                      <div id="share-result" class="hidden">
                          <div class="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 mb-2">
                              <i class="fa fa-check-circle text-green-500 text-xs"></i>
                              <span class="text-xs font-medium text-green-800 dark:text-green-200">{% trans %}Share link created!{% endtrans %}</span>
                          </div>
                          <div class="flex items-center gap-2 mb-2">
                              <input type="text" id="share-url-display" readonly class="flex-1 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs font-mono outline-none min-w-0">
                              <button type="button" onclick="copyShareUrl()" id="copy-share-btn"
                                  class="flex-shrink-0 inline-flex items-center gap-1 px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-medium transition-all">
                                  <i class="fa fa-copy text-xs"></i>
                              </button>
                          </div>
                          <div class="flex items-center gap-3">
                              <button type="button" onclick="revokeShareLink()" id="btn-revoke-share"
                                  class="text-xs text-red-500 dark:text-red-400 hover:underline flex items-center gap-1">
                                  <i class="fa fa-ban text-xs"></i>{% trans %}Revoke{% endtrans %}
                              </button>
                              <span class="text-gray-300 dark:text-gray-700">|</span>
                              <button type="button" onclick="resetShareForm()" class="text-xs text-primary dark:text-primary-light hover:underline">
                                  <i class="fa fa-plus text-xs mr-0.5"></i>{% trans %}Create another{% endtrans %}
                              </button>
                          </div>
                      </div>

                      <div id="share-error" class="hidden flex items-center gap-2 px-3 py-2.5 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-xs text-red-700 dark:text-red-300">
                          <i class="fa fa-circle-exclamation flex-shrink-0"></i>
                          <span id="share-error-msg"></span>
                      </div>

                      {% endif %}{# /_can_share #}

                  </div>{# /body #}

                  {# Bottom action bar #}
                  <div class="flex items-center gap-2 px-6 py-4 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
                      {% if _can_share %}
                      <div class="flex-1 flex flex-col gap-2">
                          <button type="button" onclick="copyOrCreateShareLink()" id="btn-create-share"
                              class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all">
                              <i class="fa fa-link text-xs"></i> {% trans %}Copy link{% endtrans %}
                          </button>
                          <p id="share-link-count-info" class="text-xs text-center text-gray-400 dark:text-gray-500 hidden"></p>
                      </div>
                      <button type="button" onclick="showShareQrCode()" id="btn-share-qr"
                          class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm font-medium transition-all">
                          <i class="fa fa-qrcode text-xs"></i> {% trans %}QR Code{% endtrans %}
                      </button>
                      {% endif %}
                      <button type="button" onclick="closeShareModal()"
                          class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm font-medium transition-all">
                          {% trans %}Close{% endtrans %}
                      </button>
                  </div>

                  {# QR Code area (hidden by default) #}
                  <div id="share-qr-area" class="hidden px-6 pb-5">
                      <div class="flex flex-col items-center gap-3">
                          <div id="share-qr-canvas" class="w-48 h-48 bg-white border border-gray-200 rounded-xl flex items-center justify-center">
                              <i class="fa fa-qrcode text-gray-300 text-4xl"></i>
                          </div>
                          <p class="text-xs text-gray-500 dark:text-gray-400 text-center">{% trans %}Scan to open share link{% endtrans %}</p>
                      </div>
                  </div>

              </div>
          </div>
          {# /share-modal #}

          {# ---- Export Modal — always rendered, providers locked when unavailable ---- #}
          <div id="export-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden" onclick="if(event.target===this)closeExportModal()">
              <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-6 w-full max-w-md mx-4">
                  <div class="flex items-center justify-between mb-4">
                      <h3 class="text-lg font-bold text-gray-900 dark:text-white">{% trans %}Export to Cloud{% endtrans %}</h3>
                      <button onclick="closeExportModal()" class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                          <i class="fa fa-xmark"></i>
                      </button>
                  </div>
                  <p class="text-sm text-gray-500 dark:text-gray-400 mb-5">{% trans %}Export your converted files directly to cloud storage.{% endtrans %}</p>
                  <div class="space-y-3">
                      {# Google Drive #}
                      <div class="rounded-xl border {{ 'border-gray-200 dark:border-gray-700' if _can_gdrive else 'border-dashed border-gray-200 dark:border-gray-700 opacity-60' }} p-4 flex items-center gap-4">
                          <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center flex-shrink-0">
                              <svg class="w-6 h-6" viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg"><path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/></svg>
                          </div>
                          <div class="flex-1 min-w-0">
                              <p class="text-sm font-semibold text-gray-900 dark:text-white">Google Drive</p>
                              <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Save selected files to your Drive{% endtrans %}</p>
                          </div>
                          {% if _can_gdrive %}
                          <button type="button" onclick="exportToGoogleDrive()" id="btn-gdrive"
                              class="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-all">
                              <i class="fa fa-cloud-arrow-up text-xs"></i> {% trans %}Export{% endtrans %}
                          </button>
                          {% else %}
                          <a href="{{ full_url('/pricing') }}" class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-2 rounded-xl border border-gray-200 dark:border-gray-600 text-gray-500 dark:text-gray-400 text-xs font-medium hover:border-primary dark:hover:border-primary-light hover:text-primary dark:hover:text-primary-light transition-all">
                              <i class="fa fa-lock text-xs"></i> {% trans %}Upgrade{% endtrans %}
                          </a>
                          {% endif %}
                      </div>

                      {# Dropbox #}
                      <div class="rounded-xl border {{ 'border-gray-200 dark:border-gray-700' if _can_dropbox else 'border-dashed border-gray-200 dark:border-gray-700 opacity-60' }} p-4 flex items-center gap-4">
                          <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center flex-shrink-0">
                              <svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.56l-6-3.84L0 14.56 6 18.4zM0 3.84l6 3.84 6-3.84L6 0zM12 7.68l6 3.84 6-3.84L18 3.84zM12 14.56l6 3.84 6-3.84-6-3.84zM12 15.52L6 19.36l6 3.84 6-3.84z" fill="#0061FF"/></svg>
                          </div>
                          <div class="flex-1 min-w-0">
                              <p class="text-sm font-semibold text-gray-900 dark:text-white">Dropbox</p>
                              <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Save selected files to your Dropbox{% endtrans %}</p>
                          </div>
                          {% if _can_dropbox %}
                          <button type="button" onclick="exportToDropbox()" id="btn-dropbox"
                              class="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-700 hover:bg-blue-800 text-white text-sm font-medium transition-all">
                              <i class="fa fa-cloud-arrow-up text-xs"></i> {% trans %}Export{% endtrans %}
                          </button>
                          {% else %}
                          <a href="{{ full_url('/pricing') }}" class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-2 rounded-xl border border-gray-200 dark:border-gray-600 text-gray-500 dark:text-gray-400 text-xs font-medium hover:border-primary dark:hover:border-primary-light hover:text-primary dark:hover:text-primary-light transition-all">
                              <i class="fa fa-lock text-xs"></i> {% trans %}Upgrade{% endtrans %}
                          </a>
                          {% endif %}
                      </div>

                      {# OneDrive #}
                      <div class="rounded-xl border {{ 'border-gray-200 dark:border-gray-700' if _can_onedrive else 'border-dashed border-gray-200 dark:border-gray-700 opacity-60' }} p-4 flex items-center gap-4">
                          <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center flex-shrink-0">
                              <svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 11.37a5.68 5.68 0 0 0-2.93.82A5.68 5.68 0 0 0 6.3 9.49a5.66 5.66 0 0 0-3.15.96A5.66 5.66 0 0 0 0 15.6a5.66 5.66 0 0 0 5.66 5.66h12.68A5.66 5.66 0 0 0 24 15.6a5.66 5.66 0 0 0-5.66-5.66c-.11 0-.22 0-.33.01A5.68 5.68 0 0 0 14.05 11.37z" fill="#0078D4"/></svg>
                          </div>
                          <div class="flex-1 min-w-0">
                              <p class="text-sm font-semibold text-gray-900 dark:text-white">OneDrive</p>
                              <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Save selected files to your OneDrive{% endtrans %}</p>
                          </div>
                          {% if _can_onedrive %}
                          <button type="button" onclick="exportToOneDrive()" id="btn-onedrive"
                              class="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium transition-all">
                              <i class="fa fa-cloud-arrow-up text-xs"></i> {% trans %}Export{% endtrans %}
                          </button>
                          {% else %}
                          <a href="{{ full_url('/pricing') }}" class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-2 rounded-xl border border-gray-200 dark:border-gray-600 text-gray-500 dark:text-gray-400 text-xs font-medium hover:border-primary dark:hover:border-primary-light hover:text-primary dark:hover:text-primary-light transition-all">
                              <i class="fa fa-lock text-xs"></i> {% trans %}Upgrade{% endtrans %}
                          </a>
                          {% endif %}
                      </div>
                  </div>
                  <p class="mt-4 text-xs text-gray-400 dark:text-gray-500">
                      <i class="fa fa-circle-info mr-1"></i>{% trans %}Only checked files will be exported.{% endtrans %}
                  </p>
                  <div id="export-status" class="hidden mt-3 px-4 py-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 text-sm text-blue-800 dark:text-blue-200">
                      <i class="fa fa-spinner fa-spin mr-1"></i> <span id="export-status-msg"></span>
                  </div>
              </div>
          </div>{# /export-modal #}

          {# ---- File Info Modal ---- #}
          <div id="file-info-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden" onclick="if(event.target===this)closeFileInfoModal()">
              <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-6 w-full max-w-sm mx-4">
                  <div class="flex items-center justify-between mb-4">
                      <h3 class="text-base font-bold text-gray-900 dark:text-white">{% trans %}File Information{% endtrans %}</h3>
                      <button onclick="closeFileInfoModal()" class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                          <i class="fa fa-xmark"></i>
                      </button>
                  </div>
                  <dl class="space-y-3">
                      <div>
                          <dt class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 mb-0.5">{% trans %}Filename{% endtrans %}</dt>
                          <dd id="file-info-name" class="text-sm text-gray-800 dark:text-gray-200 break-all font-mono"></dd>
                      </div>
                      <div>
                          <dt class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 mb-0.5">{% trans %}Format{% endtrans %}</dt>
                          <dd id="file-info-type" class="text-sm text-gray-800 dark:text-gray-200"></dd>
                      </div>
                      <div>
                          <dt class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 mb-0.5">{% trans %}Size{% endtrans %}</dt>
                          <dd id="file-info-size" class="text-sm text-gray-800 dark:text-gray-200"></dd>
                      </div>
                  </dl>
                  <div class="mt-5">
                      <a id="file-info-url" href="#" download class="w-full inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-accent hover:bg-accent-dark text-white text-sm font-semibold transition-all">
                          <i class="fa fa-download"></i> {% trans %}Download{% endtrans %}
                      </a>
                  </div>
              </div>
          </div>

          {# ---- Cloud Export JS config (inline, server-rendered) ---- #}
          <script>
          window._oc_output = {
              job_id: {{ job_id|tojson }},
              file_urls: {{ _file_urls_js|tojson }},
              {# Only expose provider credentials when the user's plan allows that provider #}
              gdrive_client_id: {{ (site_settings.get('google_drive_client_id','') if _can_gdrive else '')|tojson }},
              gdrive_api_key: {{ (site_settings.get('google_drive_api_key','') if _can_gdrive else '')|tojson }},
              dropbox_app_key: {{ (site_settings.get('dropbox_app_key','') if _can_dropbox else '')|tojson }},
              onedrive_client_id: {{ (site_settings.get('onedrive_client_id','') if _can_onedrive else '')|tojson }},
              can_gdrive: {{ _can_gdrive|tojson }},
              can_dropbox: {{ _can_dropbox|tojson }},
              can_onedrive: {{ _can_onedrive|tojson }},
              can_share: {{ _can_share|tojson }},
              can_share_pw: {{ _can_share_pw|tojson }},
              can_share_ot: {{ _can_share_ot|tojson }},
              can_share_exp: {{ _can_share_exp|tojson }},
              max_exp_hrs: {{ _max_exp_hrs|tojson }},
          };
          </script>

          {% endif %}{# /if output_deleted #}
        {% endif %}
    {% elif job.is_failed %}
    {% if conversion_deleted %}
    <!-- Conversion fully deleted: shown when admin/user deleted the entire conversion -->
    <div class="text-center max-w-lg mx-auto py-12">
        <div class="w-16 h-16 rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-6">
            <i class="fa fa-trash-can text-2xl text-gray-400 dark:text-gray-500"></i>
        </div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Conversion deleted{% endtrans %}</h3>
        <p class="text-gray-500 dark:text-gray-400 mb-6">{% trans %}This conversion and its files have been permanently deleted.{% endtrans %}</p>
        <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium transition-all">
            <i class="fa fa-house"></i> {% trans %}Home{% endtrans %}
        </a>
    </div>
    {% else %}{# normal failed card #}
    <div class="text-center max-w-lg mx-auto py-12">
        <div class="w-16 h-16 rounded-2xl bg-red-50 dark:bg-red-900/20 flex items-center justify-center mx-auto mb-6">
            <i class="fa fa-circle-exclamation text-2xl text-red-500"></i>
        </div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Something went wrong{% endtrans %}</h3>
        <p class="text-gray-500 dark:text-gray-400 mb-6">{% trans %}The conversion job failed. Please try again.{% endtrans %}</p>
        <div class="flex items-center justify-center gap-3 flex-wrap">
            <button onclick="window.history.back()" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium transition-all">
                <i class="fa fa-arrow-left"></i> {% trans %}Go Back{% endtrans %}
            </button>
            {% if retry_available %}
            <form method="POST" action="/retry/{{ job_id }}">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-700 text-white font-medium transition-all">
                    <i class="fa fa-rotate-right"></i> {% trans %}Try Again{% endtrans %}
                </button>
            </form>
            {% else %}
            <span class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 font-medium cursor-not-allowed" title="{% trans %}Original file no longer available — please re-upload{% endtrans %}">
                <i class="fa fa-rotate-right"></i> {% trans %}Try Again{% endtrans %}
            </span>
            {% endif %}
            <button type="button" onclick="openDeleteModal()" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-medium transition-all">
                <i class="fa fa-trash"></i> {% trans %}Delete{% endtrans %}
            </button>
        </div>
    </div>
    {% endif %}{# /if conversion_deleted #}
    {% else %}
      {# ===== PROCESSING / WAITING STATE ===== #}
      <div class="py-10 px-4">

          {# ---- Central animated orb + heading ---- #}
          <div class="flex flex-col items-center text-center mb-10">
              <div class="relative mb-7">
                  <div class="oc-ping-ring"></div>
                  <div class="oc-ping-ring2"></div>
                  <div class="relative w-20 h-20 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-xl shadow-blue-500/30">
                      <i class="fa fa-cog fa-spin text-3xl text-white"></i>
                  </div>
              </div>
              <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Converting your file{% endtrans %}&hellip;</h1>
              <p id="status" class="text-base text-gray-500 dark:text-gray-400 max-w-sm">{% trans %}Waiting to initiate a process{% endtrans %}</p>
          </div>

          {# ---- Progress bar ---- #}
          <div class="max-w-md mx-auto mb-10">
              <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                  <div id="oc-progress-bar" class="h-full rounded-full bg-gradient-to-r from-blue-500 to-indigo-600"
                       style="width:6%; transition:width 0.8s ease; animation:oc-progress-pulse 30s ease-out forwards;"></div>
              </div>
              <p class="text-xs text-gray-400 dark:text-gray-500 text-center mt-1.5">{% trans %}Processing — please don't close this tab{% endtrans %}</p>
          </div>

          {# ---- Animated bars (visual accent) ---- #}
          <div class="flex items-end justify-center gap-1.5 mb-10" style="height:36px;">
              <div class="oc-bar bg-blue-500"     style="height:100%; animation:oc-bar-stretch 1.2s ease-in-out infinite;"></div>
              <div class="oc-bar bg-blue-500/85"  style="height:100%; animation:oc-bar-stretch 1.2s ease-in-out -1.10s infinite;"></div>
              <div class="oc-bar bg-indigo-500"   style="height:100%; animation:oc-bar-stretch 1.2s ease-in-out -1.00s infinite;"></div>
              <div class="oc-bar bg-indigo-500/85" style="height:100%; animation:oc-bar-stretch 1.2s ease-in-out -0.90s infinite;"></div>
              <div class="oc-bar bg-blue-400"     style="height:100%; animation:oc-bar-stretch 1.2s ease-in-out -0.80s infinite;"></div>
              <div class="oc-bar bg-indigo-400"   style="height:100%; animation:oc-bar-stretch 1.2s ease-in-out -0.70s infinite;"></div>
              <div class="oc-bar bg-blue-300"     style="height:100%; animation:oc-bar-stretch 1.2s ease-in-out -0.60s infinite;"></div>
              <div class="oc-bar bg-indigo-300"   style="height:100%; animation:oc-bar-stretch 1.2s ease-in-out -0.50s infinite;"></div>
          </div>

          {# ---- Info cards ---- #}
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto mb-8">
              <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-5 text-center shadow-sm">
                  <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center mx-auto mb-3">
                      <i class="fa fa-shield-halved text-blue-600 dark:text-blue-400"></i>
                  </div>
                  <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-0.5">{% trans %}Secure Processing{% endtrans %}</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Your files are encrypted in transit{% endtrans %}</p>
              </div>
              <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-5 text-center shadow-sm">
                  <div class="w-10 h-10 rounded-xl bg-green-50 dark:bg-green-900/30 flex items-center justify-center mx-auto mb-3">
                      <i class="fa fa-bolt text-green-600 dark:text-green-400"></i>
                  </div>
                  <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-0.5">{% trans %}High-Speed Conversion{% endtrans %}</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Optimised for fast results{% endtrans %}</p>
              </div>
              <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-5 text-center shadow-sm">
                  <div class="w-10 h-10 rounded-xl bg-purple-50 dark:bg-purple-900/30 flex items-center justify-center mx-auto mb-3">
                      <i class="fa fa-circle-check text-purple-600 dark:text-purple-400"></i>
                  </div>
                  <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-0.5">{% trans %}100+ Formats{% endtrans %}</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Audio, video, image, docs & more{% endtrans %}</p>
              </div>
          </div>

          {# ---- Notification card ---- #}
          {% if browser_notif_allowed or email_notif_allowed or push_notif_allowed %}
          <div id="notify-card" class="max-w-md mx-auto mb-6 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 shadow-sm transition-theme{% if job.is_finished is not sameas false %} hidden{% endif %}">
              <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-3 flex items-center gap-2">
                  <i class="fa fa-bell text-teal-500"></i> {% trans %}Get notified when done{% endtrans %}
              </h4>
              <div class="space-y-3">
                  {% if browser_notif_allowed %}
                  <div>
                      <button id="btn-browser-notify" onclick="requestBrowserNotify()" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                          <i class="fa fa-desktop"></i> {% trans %}Browser Notification{% endtrans %}
                      </button>
                      <p id="browser-notify-status" class="text-xs text-gray-400 mt-1 hidden"></p>
                  </div>
                  {% endif %}
                  {% if push_notif_allowed %}
                  <div>
                      <button id="btn-push-notify" onclick="requestPushNotify()" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-indigo-300 dark:border-indigo-600 text-sm font-medium text-indigo-700 dark:text-indigo-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-all">
                          <i class="fa fa-mobile-screen-button"></i> {% trans %}Push Notification{% endtrans %}
                      </button>
                      <p id="push-notify-status" class="text-xs text-gray-400 mt-1 hidden"></p>
                  </div>
                  {% endif %}
                  {% if email_notif_allowed %}
                  <div id="email-notify-section">
                      <div class="flex gap-2">
                          <input type="email" id="notify-email" placeholder="{% trans %}you@example.com{% endtrans %}"
                              {% if current_user %}value="{{ current_user.email|default('',true) }}"{% endif %}
                              class="flex-1 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                          <button id="btn-email-notify" onclick="subscribeEmailNotify()" class="px-4 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium transition-all whitespace-nowrap">
                              <i class="fa fa-envelope mr-1"></i> {% trans %}Email{% endtrans %}
                          </button>
                      </div>
                      <p id="email-notify-status" class="text-xs text-gray-400 mt-1 hidden"></p>
                  </div>
                  {% endif %}
              </div>
          </div>
          {% endif %}

          {# ---- Cancel button ---- #}
          <div class="text-center">
              <form method="POST" action="{{ url('/convert/cancel/' ~ job_id) }}" onsubmit="return confirm('{% trans %}Cancel this conversion? The uploaded file will remain available for retry.{% endtrans %}')">
                  <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl border border-red-300 dark:border-red-700 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all">
                      <i class="fa fa-xmark"></i> {% trans %}Cancel Conversion{% endtrans %}
                  </button>
              </form>
          </div>

      </div>{# /processing state #}
      {% endif %}
  </div>
{% endblock %}

{% block footer %}
    {{super()}}
    {% if job.is_finished is sameas false %}
    <script>
    (function(){
        var jobId = "{{job_id}}";
        var browserNotifyGranted = false;
        var jobFinished = false;

        /* ── Cross-domain cookie helpers ───────────────────────────── */
        function _xdCookieDomain(){
            var h = window.location.hostname;
            var p = h.split('.');
            return p.length > 2 ? '.' + p.slice(-2).join('.') : (p.length === 2 ? '.' + h : null);
        }
        function _xdRead(){
            var m = document.cookie.match(/(^|;)\s*oc_xd=([^;]+)/);
            if(!m) return [];
            try {
                return decodeURIComponent(m[2]).split(',').filter(Boolean).map(function(e){
                    var p = e.split('|');
                    return {id:p[0], status:p[1]||'processing', ts:parseInt(p[2]||'0')*1000, cts:parseInt(p[3]||'0')*1000};
                });
            } catch(e){ return []; }
        }
        function _xdWrite(id, status, ts, cts){
            var entries = _xdRead().filter(function(e){ return e.id !== id; });
            entries.push({id:id, status:status, ts:Math.floor((ts||Date.now())/1000), cts:Math.floor((cts||0)/1000)});
            if(entries.length > 15) entries = entries.slice(-15);
            var val = entries.map(function(e){ return e.id+'|'+e.status+'|'+e.ts+'|'+e.cts; }).join(',');
            var domain = _xdCookieDomain();
            var cookie = 'oc_xd=' + encodeURIComponent(val) + ';path=/;max-age=86400;SameSite=Lax';
            if(domain) cookie += ';domain=' + domain;
            document.cookie = cookie;
        }

        /* ── localStorage + cookie init ───────────────────────────── */
        var tasks = [];
        try { tasks = JSON.parse(localStorage.getItem('oc_tasks') || '[]'); } catch(e){}
        var exists = tasks.some(function(t){ return t.id === jobId; });
        if(!exists){
            tasks.push({id: jobId, status: 'processing', title: 'Conversion', ts: Date.now()});
            if(tasks.length > 20) tasks = tasks.slice(-20);
            localStorage.setItem('oc_tasks', JSON.stringify(tasks));
            window.dispatchEvent(new Event('oc_tasks_updated'));
        }
        _xdWrite(jobId, 'processing', Date.now(), 0);

        /* ── Service Worker registration ───────────────────────────── */
        if('serviceWorker' in navigator){
            navigator.serviceWorker.register('/sw.js', {scope:'/'}).catch(function(){});
        }

        {% if browser_notif_allowed %}
        window.requestBrowserNotify = function(){
            var btn = document.getElementById('btn-browser-notify');
            var st = document.getElementById('browser-notify-status');
            if(!('Notification' in window)){
                st.textContent = 'Browser notifications are not supported.';
                st.classList.remove('hidden');
                return;
            }
            if(Notification.permission === 'granted'){
                browserNotifyGranted = true;
                btn.innerHTML = '<i class="fa fa-check text-green-500 mr-1"></i> Enabled';
                btn.disabled = true;
                btn.classList.add('opacity-60');
                st.textContent = 'You will be notified in this browser.';
                st.classList.remove('hidden');
                return;
            }
            Notification.requestPermission().then(function(p){
                if(p === 'granted'){
                    browserNotifyGranted = true;
                    btn.innerHTML = '<i class="fa fa-check text-green-500 mr-1"></i> Enabled';
                    btn.disabled = true;
                    btn.classList.add('opacity-60');
                    st.textContent = 'You will be notified in this browser.';
                } else {
                    st.textContent = 'Permission denied. Enable in browser settings.';
                }
                st.classList.remove('hidden');
            });
        };

        if('Notification' in window && Notification.permission === 'granted'){
            browserNotifyGranted = true;
            var _btn = document.getElementById('btn-browser-notify');
            if(_btn){
                _btn.innerHTML = '<i class="fa fa-check text-green-500 mr-1"></i> Enabled';
                _btn.disabled = true;
                _btn.classList.add('opacity-60');
            }
        }
        {% endif %}

        {% if push_notif_allowed %}
        function _markPushEnabled(){
            var btn = document.getElementById('btn-push-notify');
            var st  = document.getElementById('push-notify-status');
            if(!btn) return;
            btn.innerHTML = '<i class="fa fa-check text-green-500 mr-1"></i> Enabled';
            btn.disabled = true;
            btn.classList.add('opacity-60');
            if(st){
                st.textContent = 'You will receive a push notification when done.';
                st.className = 'text-xs text-green-500 mt-1';
                st.classList.remove('hidden');
            }
        }

        function _b64ToUint8Push(base64String){
            var padding = '='.repeat((4 - base64String.length % 4) % 4);
            var base64 = (base64String + padding).replace(/-/g,'+').replace(/_/g,'/');
            var rawData = atob(base64);
            var arr = new Uint8Array(rawData.length);
            for(var i=0;i<rawData.length;i++) arr[i] = rawData.charCodeAt(i);
            return arr;
        }

        // Check server-side subscription status on page load
        // Cross-check with browser's actual subscription + permission state
        if('serviceWorker' in navigator && 'PushManager' in window){
            fetch('/api/push/global-status')
            .then(function(r){ return r.ok ? r.json() : null; })
            .then(function(d){
                if(!d || !d.push_enabled) return;
                var perm = ('Notification' in window) ? Notification.permission : 'default';
                if(d.subscribed && perm === 'denied') return; // mismatch – don't show enabled
                if(!d.subscribed) return;
                // Confirm browser also has an active subscription object
                navigator.serviceWorker.ready.then(function(reg){
                    return reg.pushManager.getSubscription();
                }).then(function(sub){
                    if(sub) _markPushEnabled();
                }).catch(function(){
                    if(d.subscribed) _markPushEnabled(); // fallback
                });
            }).catch(function(){});
        }

        window.requestPushNotify = function(){
            var btn = document.getElementById('btn-push-notify');
            var st  = document.getElementById('push-notify-status');
            if(!('serviceWorker' in navigator) || !('PushManager' in window)){
                st.textContent = 'Push notifications are not supported in this browser.';
                st.className = 'text-xs text-red-500 mt-1';
                st.classList.remove('hidden');
                return;
            }
            btn.disabled = true;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> Setting up...';
            var _savedSubJson = null;
            fetch('/api/vapid-public-key')
            .then(function(r){ return r.json(); })
            .then(function(d){
                if(!d.ok){ throw new Error(d.error || 'Push disabled'); }
                return navigator.serviceWorker.ready.then(function(reg){
                    // Reuse existing subscription if already subscribed in this browser
                    return reg.pushManager.getSubscription().then(function(existing){
                        if(existing) return existing;
                        return reg.pushManager.subscribe({
                            userVisibleOnly: true,
                            applicationServerKey: _b64ToUint8Push(d.publicKey)
                        });
                    });
                });
            })
            .then(function(sub){
                _savedSubJson = sub.toJSON();
                var payload = {
                    endpoint: _savedSubJson.endpoint,
                    p256dh:   _savedSubJson.keys.p256dh,
                    auth:     _savedSubJson.keys.auth
                };
                // Save for this specific job AND globally for all future jobs / subdomains
                return Promise.all([
                    fetch('/api/job/' + jobId + '/notify-push', {
                        method: 'POST',
                        headers: {'Content-Type':'application/json'},
                        body: JSON.stringify(payload)
                    }).then(function(r){ return r.json(); }),
                    fetch('/api/push/subscribe-global', {
                        method: 'POST',
                        headers: {'Content-Type':'application/json'},
                        body: JSON.stringify(payload)
                    }).then(function(r){ return r.json(); })
                ]);
            })
            .then(function(results){
                var jobRes = results[0];
                if(jobRes && jobRes.ok){
                    _markPushEnabled();
                } else {
                    throw new Error((jobRes && jobRes.error) || 'Failed to subscribe.');
                }
            })
            .catch(function(err){
                btn.innerHTML = '<i class="fa fa-mobile-screen-button mr-1"></i> Push Notification';
                btn.disabled = false;
                st.textContent = err && err.message ? err.message : 'Failed. Please try again.';
                st.className = 'text-xs text-red-500 mt-1';
                st.classList.remove('hidden');
            });
        };
        {% endif %}

        {% if email_notif_allowed %}
        window.subscribeEmailNotify = function(){
            var email = document.getElementById('notify-email').value.trim();
            var st = document.getElementById('email-notify-status');
            if(!email){
                st.textContent = 'Please enter your email address.';
                st.classList.remove('hidden');
                st.className = 'text-xs text-red-500 mt-1';
                return;
            }
            fetch('/api/job/' + jobId + '/notify-email', {
                method: 'POST',
                headers: {'Content-Type':'application/json'},
                body: JSON.stringify({email: email})
            })
            .then(function(r){ return r.json(); })
            .then(function(d){
                st.classList.remove('hidden');
                if(d.ok){
                    st.textContent = d.msg || 'Subscribed!';
                    st.className = 'text-xs text-green-500 mt-1';
                    document.getElementById('btn-email-notify').disabled = true;
                    document.getElementById('btn-email-notify').classList.add('opacity-60');
                } else {
                    st.textContent = d.error || 'Failed.';
                    st.className = 'text-xs text-red-500 mt-1';
                }
            })
            .catch(function(){
                st.textContent = 'Network error.';
                st.classList.remove('hidden');
                st.className = 'text-xs text-red-500 mt-1';
            });
        };
        {% endif %}


        /* ── Polling ────────────────────────────────────────────────── */
        var _pollTimer = null;
        var _pollFails = 0;
        var MAX_FAILS   = 20; // ~20s of consecutive errors → give up

        function _sendNotification(title, body){
            {% if browser_notif_allowed %}
            if(!browserNotifyGranted) return;
            /* Prefer service-worker notification — survives page reload */
            if('serviceWorker' in navigator){
                navigator.serviceWorker.ready.then(function(reg){
                    reg.showNotification(title, {body:body, icon:'/static/images/favicon.png'});
                }).catch(function(){
                    try{ new Notification(title, {body:body, icon:'/static/images/favicon.png'}); }catch(e){}
                });
            } else {
                try{ new Notification(title, {body:body, icon:'/static/images/favicon.png'}); }catch(e){}
            }
            {% endif %}
        }

        function _onJobDone(isFailed){
            if(jobFinished) return;
            jobFinished = true;
            clearInterval(_pollTimer);

            var newStatus  = isFailed ? 'failed' : 'done';
            var statusEl   = document.getElementById('status');
            if(statusEl) statusEl.textContent = isFailed ? "{% trans %}Conversion failed.{% endtrans %}" : "{% trans %}Files ready — reloading…{% endtrans %}";

            // Update page title
            document.title = isFailed
                ? "{% trans %}Conversion failed - please try again{% endtrans %}"
                : "{% trans %}Download file - your conversion was successful{% endtrans %}";

            // Advance progress bar to 100% on success
            if (!isFailed) {
                var pb = document.getElementById('oc-progress-bar');
                if (pb) { pb.style.animation = 'none'; pb.style.width = '100%'; }
            }

            var nc = document.getElementById('notify-card');
            if(nc) nc.style.display = 'none';

            /* Update localStorage + cross-domain cookie */
            var completedTs = Date.now();
            try {
                var t2 = JSON.parse(localStorage.getItem('oc_tasks') || '[]');
                t2 = t2.map(function(t){
                    if(t.id === jobId){ t.status = newStatus; t.completed_ts = completedTs; }
                    return t;
                });
                localStorage.setItem('oc_tasks', JSON.stringify(t2));
                window.dispatchEvent(new Event('oc_tasks_updated'));
            } catch(e){}
            _xdWrite(jobId, newStatus, null, completedTs);

            /* Send notification BEFORE reloading so it has time to appear */
            var notifTitle = isFailed ? 'Conversion Failed'   : 'Conversion Complete';
            var notifBody  = isFailed ? 'Your conversion encountered an error. Please try again.'
                                       : 'Your files are ready to download!';
            _sendNotification(notifTitle, notifBody);

            /* Reload after a short delay so the notification can be dispatched */
            setTimeout(function(){ window.location.reload(); }, 2500);
        }

        _pollTimer = setInterval(function(){
            fetch("/job/status/" + jobId)
            .then(function(r){
                if(!r.ok) throw new Error('HTTP ' + r.status);
                return r.json();
            })
            .then(function(response){
                _pollFails = 0; // reset on success
                var statusEl = document.getElementById('status');
                if(response.is_started && statusEl)
                    statusEl.textContent = "Your files are being converted, please wait..";
                if(response.is_queued && statusEl)
                    statusEl.textContent = "Files are in queue, be patient";
                if((response.is_finished || response.is_failed) && !jobFinished){
                    var isFailed = response.is_failed || (response.result && response.result.error);
                    _onJobDone(isFailed);
                }
            })
            .catch(function(){
                _pollFails++;
                if(_pollFails >= MAX_FAILS && !jobFinished){
                    clearInterval(_pollTimer);
                    var statusEl = document.getElementById('status');
                    if(statusEl) statusEl.textContent = "Could not reach the server. Please refresh the page.";
                }
            });
        }, 1000);
    })();
    </script>
    {% endif %}

    {% if plan and plan.get('batch_archive_download', 0)|int and job is defined and job.is_finished and not job.result.error and sanitized_results|length > 1 %}
    <script>
    function openArchiveModal() {
        var modal = document.getElementById('archive-modal');
        if (modal) { modal.classList.remove('hidden'); }
    }
    function closeArchiveModal() {
        var modal = document.getElementById('archive-modal');
        if (modal) { modal.classList.add('hidden'); }
        var status = document.getElementById('archive-modal-status');
        if (status) { status.classList.add('hidden'); }
        var grid = document.getElementById('archive-format-grid');
        if (grid) { grid.style.opacity = ''; grid.style.pointerEvents = ''; }
    }
    function downloadArchive(fmt) {
        var status = document.getElementById('archive-modal-status');
        var grid = document.getElementById('archive-format-grid');
        if (status) { status.classList.remove('hidden'); }
        if (grid) { grid.style.opacity = '0.4'; grid.style.pointerEvents = 'none'; }

        fetch('/api/job/{{ job_id }}/export-archive', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ format: fmt })
        })
        .then(function(r) {
            if (!r.ok) {
                return r.json().then(function(d) { throw new Error(d.error || 'Server error'); });
            }
            return r.blob();
        })
        .then(function(blob) {
            var a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'converted_{{ job_id[:8] }}.' + fmt;
            document.body.appendChild(a);
            a.click();
            setTimeout(function() { URL.revokeObjectURL(a.href); a.remove(); }, 2000);
            closeArchiveModal();
        })
        .catch(function(err) {
            toastr.error('{% trans %}Failed to create archive{% endtrans %}: ' + err.message);
            closeArchiveModal();
        });
    }
    // Close modal when clicking the backdrop
    document.addEventListener('DOMContentLoaded', function() {
        var modal = document.getElementById('archive-modal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === modal) { closeArchiveModal(); }
            });
        }
    });
    </script>
    {% endif %}

<!-- Preview Modal -->
  <div id="preview-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 hidden" role="dialog" aria-modal="true">
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-3xl mx-4 overflow-hidden">
          <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-800">
              <div class="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                  <i class="fa fa-eye text-blue-600 dark:text-blue-400 text-sm"></i>
              </div>
              <p class="text-sm font-semibold text-gray-900 dark:text-white flex-1 truncate" id="preview-modal-filename">Preview</p>
              <button onclick="closePreviewModal()" class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                  <i class="fa fa-xmark"></i>
              </button>
          </div>
          <div class="p-4 bg-gray-50 dark:bg-gray-800 min-h-[200px] max-h-[80vh] overflow-auto" id="preview-modal-content">
              <div class="flex items-center justify-center h-40 text-gray-400">
                  <i class="fa fa-spinner fa-spin text-2xl"></i>
              </div>
          </div>
      </div>
  </div>

  <!-- Delete Files Modal -->
<div id="delete-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 hidden" role="dialog" aria-modal="true" aria-labelledby="delete-modal-title">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
        <!-- Header -->
        <div class="px-6 pt-6 pb-4 border-b border-gray-100 dark:border-gray-800 flex items-start gap-4">
            <div class="w-10 h-10 rounded-xl bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-trash text-red-600 dark:text-red-400"></i>
            </div>
            <div class="flex-1 min-w-0">
                <h3 id="delete-modal-title" class="font-bold text-gray-900 dark:text-white text-base">{% trans %}Delete Conversion{% endtrans %}</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}This will permanently remove all files{% endtrans %}</p>
            </div>
            <button type="button" onclick="closeDeleteModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors flex-shrink-0 mt-0.5">
                <i class="fa fa-xmark text-lg"></i>
            </button>
        </div>
        <!-- Form -->
        <form method="POST" action="{{ url('/convert/delete/' ~ job_id) }}" id="delete-form">
            <input type="hidden" name="delete_output" value="on">
            <input type="hidden" name="delete_upload" value="on">
            <div class="px-6 py-5 space-y-3">
                <!-- What will be deleted -->
                <div class="space-y-2">
                    <div class="flex items-center gap-2.5 p-3 rounded-xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                        <i class="fa fa-file-export text-gray-400 dark:text-gray-500 text-sm flex-shrink-0"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Converted output files{% endtrans %}</span>
                    </div>
                    <div class="flex items-center gap-2.5 p-3 rounded-xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                        <i class="fa fa-file-arrow-up text-gray-400 dark:text-gray-500 text-sm flex-shrink-0"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Original uploaded file{% endtrans %}</span>
                    </div>
                </div>
                <!-- Plan-level warning for free users -->
                {% if not (plan and plan.get('id', 1)|int > 1) %}
                <div class="flex items-start gap-2.5 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700/40 px-3.5 py-3">
                    <i class="fa fa-triangle-exclamation text-amber-500 flex-shrink-0 mt-0.5 text-sm"></i>
                    <p class="text-xs text-amber-700 dark:text-amber-300 leading-relaxed">{% trans %}<strong>Free plan:</strong> Deleted files and conversions still count against your daily limits and cannot be recovered.{% endtrans %}</p>
                </div>
                {% endif %}
                <!-- Irreversibility warning -->
                <div class="flex items-start gap-2.5 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700/40 px-3.5 py-3">
                    <i class="fa fa-circle-exclamation text-red-500 flex-shrink-0 mt-0.5 text-sm"></i>
                    <p class="text-xs text-red-700 dark:text-red-300 leading-relaxed">{% trans %}<strong>This cannot be undone.</strong> Both files are removed from our servers immediately and permanently.{% endtrans %}</p>
                </div>
            </div>
            <!-- Actions -->
            <div class="px-6 pb-6 flex gap-3">
                <button type="button" onclick="closeDeleteModal()" class="flex-1 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                    {% trans %}Cancel{% endtrans %}
                </button>
                <button type="submit" id="btn-delete-confirm"
                    class="flex-1 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-all flex items-center justify-center gap-2">
                    <i class="fa fa-trash"></i> {% trans %}Delete Permanently{% endtrans %}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openDeleteModal() {
    var m = document.getElementById('delete-modal');
    if (!m) return;
    m.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}
function closeDeleteModal() {
    var m = document.getElementById('delete-modal');
    if (m) { m.classList.add('hidden'); }
    document.body.style.overflow = '';
}
document.addEventListener('DOMContentLoaded', function() {
    var m = document.getElementById('delete-modal');
    if (m) {
        m.addEventListener('click', function(e) { if (e.target === m) closeDeleteModal(); });
    }
});


  /* ---- Tab switching ---- */
  function switchOutputTab(name) {
      document.querySelectorAll('.output-tab').forEach(function(btn) {
          btn.classList.remove('border-primary', 'text-primary', 'dark:text-primary-light', 'dark:border-primary-light', 'font-semibold', 'output-tab-active');
          btn.classList.add('border-transparent', 'font-medium', 'text-gray-500', 'dark:text-gray-400');
      });
      document.querySelectorAll('.output-panel').forEach(function(p) { p.classList.add('hidden'); });
      var tab = document.getElementById('tab-' + name);
      var panel = document.getElementById('panel-' + name);
      if (tab) {
          tab.classList.remove('border-transparent', 'font-medium', 'text-gray-500', 'dark:text-gray-400');
          tab.classList.add('border-primary', 'text-primary', 'dark:text-primary-light', 'dark:border-primary-light', 'font-semibold', 'output-tab-active');
      }
      if (panel) { panel.classList.remove('hidden'); }
  }

  /* ---- Download helpers ---- */
  function downloadSelected() {
      var urls = getCheckedUrls();
      if (!urls.length) { alert('Please select at least one file.'); return; }
      urls.forEach(function(url, i) {
          setTimeout(function() {
              var a = document.createElement('a');
              a.href = url;
              a.download = url.split('/').pop().split('?')[0] || 'file';
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
          }, i * 300);
      });
  }

  function downloadAll() {
      var cbs = document.querySelectorAll('.file-checkbox');
      cbs.forEach(function(cb) { cb.checked = true; });
      var sa = document.getElementById('select-all-files');
      if (sa) sa.checked = true;
      downloadSelected();
  }

  function toggleDownloadDropdown() {
      var dd = document.getElementById('download-dropdown');
      if (!dd) return;
      dd.classList.toggle('hidden');
  }

  document.addEventListener('click', function(e) {
      var wrapper = document.getElementById('download-dropdown-wrapper');
      if (wrapper && !wrapper.contains(e.target)) {
          var dd = document.getElementById('download-dropdown');
          if (dd) dd.classList.add('hidden');
      }
  });

  /* ---- Sidebar Download Dropdown ---- */
  function toggleSidebarDlDropdown() {
      var dd = document.getElementById('sidebar-dl-dropdown');
      var icon = document.getElementById('sidebar-dl-chevron-icon');
      if (!dd) return;
      var isHidden = dd.classList.contains('hidden');
      dd.classList.toggle('hidden', !isHidden);
      if (icon) {
          icon.className = isHidden ? 'fa fa-chevron-up' : 'fa fa-chevron-down';
      }
  }
  document.addEventListener('click', function(e) {
      var wrapper = document.getElementById('sidebar-dl-wrapper');
      var dd = document.getElementById('sidebar-dl-dropdown');
      if (wrapper && dd && !wrapper.contains(e.target)) {
          dd.classList.add('hidden');
          var icon = document.getElementById('sidebar-dl-chevron-icon');
          if (icon) icon.className = 'fa fa-chevron-down';
      }
  });

  /* ---- Tools tab filter ---- */
  function filterTools(tab) {
      document.querySelectorAll('.tools-filter-tab').forEach(function(btn) {
          btn.classList.remove('bg-blue-600', 'text-white');
          btn.classList.add('border', 'border-gray-200', 'dark:border-gray-700', 'text-gray-600', 'dark:text-gray-400');
      });
      var active = document.getElementById('tools-tab-' + tab);
      if (active) {
          active.classList.add('bg-blue-600', 'text-white');
          active.classList.remove('border', 'border-gray-200', 'dark:border-gray-700', 'text-gray-600', 'dark:text-gray-400');
      }
      document.querySelectorAll('.tools-converter-group').forEach(function(g) {
          g.style.display = (tab === 'all' || tab === 'converter') ? '' : 'none';
      });
  }

  /* ---- Smart Preview ---- */
  var _previewExts = ['jpg','jpeg','png','gif','webp','svg','bmp','ico','mp4','webm','mp3','ogg','wav','pdf'];
  function openPreviewModal(url, name) {
      var modal = document.getElementById('preview-modal');
      var container = document.getElementById('preview-modal-content');
      if (!modal || !container) return;
      var ext = (name || url).split('.').pop().split('?')[0].toLowerCase();
      container.innerHTML = '';
      if (['jpg','jpeg','png','gif','webp','svg','bmp','ico'].includes(ext)) {
          var img = document.createElement('img');
          img.src = url; img.alt = name || 'Preview';
          img.className = 'max-w-full max-h-[70vh] object-contain rounded-xl mx-auto block';
          container.appendChild(img);
      } else if (['mp4','webm'].includes(ext)) {
          var vid = document.createElement('video');
          vid.src = url; vid.controls = true; vid.autoplay = false;
          vid.className = 'max-w-full max-h-[60vh] rounded-xl mx-auto block';
          container.appendChild(vid);
      } else if (['mp3','ogg','wav'].includes(ext)) {
          var aud = document.createElement('audio');
          aud.src = url; aud.controls = true;
          aud.className = 'w-full mt-8';
          var wrap = document.createElement('div');
          wrap.className = 'flex flex-col items-center gap-4 py-10';
          var ico = document.createElement('div');
          ico.innerHTML = '<i class="fa fa-music text-5xl text-gray-300 dark:text-gray-600"></i>';
          wrap.appendChild(ico); wrap.appendChild(aud);
          container.appendChild(wrap);
      } else if (ext === 'pdf') {
          var frame = document.createElement('iframe');
          frame.src = url; frame.className = 'w-full h-[70vh] rounded-xl border border-gray-200 dark:border-gray-700';
          container.appendChild(frame);
      } else {
          container.innerHTML = '<div class="text-center py-12 text-gray-400"><i class="fa fa-eye-slash text-4xl mb-3 block"></i><p class="text-sm">Preview not available for this file type.</p></div>';
      }
      var fname = document.getElementById('preview-modal-filename');
      if (fname) fname.textContent = name || url.split('/').pop().split('?')[0];
      modal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
  }
  function closePreviewModal() {
      var modal = document.getElementById('preview-modal');
      if (modal) { modal.classList.add('hidden'); }
      document.body.style.overflow = '';
      var c = document.getElementById('preview-modal-content');
      if (c) c.innerHTML = '';
  }
  document.addEventListener('DOMContentLoaded', function() {
      var pm = document.getElementById('preview-modal');
      if (pm) pm.addEventListener('click', function(e) { if (e.target === pm) closePreviewModal(); });

      // Auto-init: enable preview buttons if file ext is previewable
      document.querySelectorAll('[data-preview-url]').forEach(function(btn) {
          var url = btn.dataset.previewUrl || '';
          var name = btn.dataset.previewName || url;
          var ext = name.split('.').pop().split('?')[0].toLowerCase();
          if (_previewExts.includes(ext)) {
              btn.disabled = false;
              btn.classList.remove('opacity-40', 'cursor-not-allowed');
              btn.onclick = function() { openPreviewModal(url, name); };
          }
      });
  });

  /* ---- Share: Copy link or create first ---- */
  var _shareLinkUrl = null;
  function copyOrCreateShareLink() {
      if (_shareLinkUrl) {
          navigator.clipboard.writeText(_shareLinkUrl).then(function() {
              var btn = document.getElementById('btn-create-share');
              if (btn) { btn.innerHTML = '<i class="fa fa-check text-xs"></i> Copied!'; setTimeout(function() { btn.innerHTML = '<i class="fa fa-link text-xs"></i> Copy link'; }, 2000); }
          });
      } else {
          createShareLink();
      }
  }
  function showShareQrCode() {
      var area = document.getElementById('share-qr-area');
      var canvas = document.getElementById('share-qr-canvas');
      if (!area || !canvas) return;
      var url = _shareLinkUrl;
      if (!url) { alert('{% trans %}Please create a share link first.{% endtrans %}'); return; }
      area.classList.toggle('hidden');
      if (!area.classList.contains('hidden') && url) {
          canvas.innerHTML = '<img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=' + encodeURIComponent(url) + '" class="w-full h-full object-contain rounded-xl" alt="QR Code">';
      }
  }

  /* ---- File Info modal ---- */
  function showFileInfo(btn, name, size, url) {
      if (btn) { name = btn.dataset.name; size = btn.dataset.size; url = btn.dataset.url; }
      name = name || ''; size = size || ''; url = url || '';
      var modal = document.getElementById('file-info-modal');
      if (!modal) return;
      var el = function(id) { return document.getElementById(id); };
      var n = el('file-info-name'); if (n) n.textContent = name;
      var s = el('file-info-size'); if (s) s.textContent = size;
      var ext = name.split('.').pop().toUpperCase();
      var t = el('file-info-type'); if (t) t.textContent = ext || '—';
      var u = el('file-info-url'); if (u) u.href = url;
      modal.classList.remove('hidden');
  }
  function closeFileInfoModal() {
      var modal = document.getElementById('file-info-modal');
      if (modal) modal.classList.add('hidden');
  }

  /* ---- Modal helpers ---- */
  function openShareModal() {
      var m = document.getElementById('share-modal');
      if (m) m.classList.remove('hidden');
      _loadShareGrantees();
      _loadShareLinks();
  }

  function _updateAccessLabel(hasLinks, grantCount) {
      var lbl = document.getElementById('share-access-label');
      var desc = document.getElementById('share-access-desc');
      var ico = document.getElementById('share-access-icon');
      if (hasLinks) {
          if (lbl) lbl.textContent = 'Anyone with link';
          if (desc) desc.textContent = 'Anyone with the link can view';
          if (ico) ico.className = 'fa fa-link text-sm';
      } else if (grantCount > 0) {
          if (lbl) lbl.textContent = 'Specific people';
          if (desc) desc.textContent = grantCount === 1 ? '1 person has access' : grantCount + ' people have access';
          if (ico) ico.className = 'fa fa-users text-gray-500 dark:text-gray-400 text-sm';
      } else {
          if (lbl) lbl.textContent = 'Private';
          if (desc) desc.textContent = 'Only you can access';
          if (ico) ico.className = 'fa fa-lock text-gray-500 dark:text-gray-400 text-sm';
      }
  }

  var _shareStateLinks = 0;
  var _shareStateGrants = 0;

  function _loadShareLinks() {
      var jobId = (window._oc_output || {}).job_id || '';
      if (!jobId) return;
      fetch(_shareApiBase + '/share/list/' + jobId, { credentials: 'include' })
          .then(function(r) { return r.json(); })
          .catch(function() { return { ok: false }; })
          .then(function(data) {
              if (!data.ok) return;
              _shareStateLinks = (data.links || []).length;
              _updateAccessLabel(_shareStateLinks > 0, _shareStateGrants);
              var countEl = document.getElementById('share-link-count-info');
              if (countEl) {
                  var limit = data.plan_limit || 0;
                  var count = data.count || 0;
                  if (limit > 0) {
                      countEl.textContent = count + ' / ' + limit + ' links used';
                      countEl.classList.remove('hidden');
                      if (count >= limit) {
                          countEl.classList.add('text-red-500');
                          countEl.classList.remove('text-gray-400', 'dark:text-gray-500');
                          var btn = document.getElementById('btn-create-share');
                          if (btn) { btn.disabled = true; btn.classList.add('opacity-50', 'cursor-not-allowed'); }
                      }
                  } else if (count > 0) {
                      countEl.textContent = count + ' link' + (count === 1 ? '' : 's') + ' active';
                      countEl.classList.remove('hidden');
                  } else {
                      countEl.classList.add('hidden');
                  }
              }
          });
  }

  function _loadShareGrantees() {
      var list = document.getElementById('share-grantees-list');
      if (!list) return;
      var jobId = (window._oc_output || {}).job_id || '';
      if (!jobId) return;
      fetch(_shareApiBase + '/share/grants/' + jobId, { credentials: 'include' })
          .then(function(r) { return r.json(); })
          .catch(function() { return { ok: false }; })
          .then(function(data) {
              if (!data.ok || !data.grants || !data.grants.length) {
                  list.innerHTML = '';
                  _shareStateGrants = 0;
                  _updateAccessLabel(_shareStateLinks > 0, 0);
                  return;
              }
              _shareStateGrants = data.grants.length;
              _updateAccessLabel(_shareStateLinks > 0, _shareStateGrants);
              var html = '';
              data.grants.forEach(function(g) {
                  var initials = (g.granted_to_email || '?')[0].toUpperCase();
                  html += '<div class="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-800" id="grantee-row-' + g.id + '">'
                      + '<div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center flex-shrink-0 text-indigo-700 dark:text-indigo-300 text-xs font-bold">' + initials + '</div>'
                      + '<div class="flex-1 min-w-0"><p class="text-sm text-gray-800 dark:text-gray-200 truncate">' + _escHtml(g.granted_to_email) + '</p></div>'
                      + '<button type="button" onclick="revokeGrant(' + g.id + ',\'' + _escHtml(jobId) + '\')" class="flex-shrink-0 text-xs text-red-500 dark:text-red-400 hover:underline flex items-center gap-1"><i class="fa fa-ban text-xs"></i> Revoke</button>'
                      + '</div>';
              });
              list.innerHTML = html;
          });
  }

  function _escHtml(s) {
      return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function revokeGrant(grantId, jobId) {
      window.ocConfirm('Revoke access for this person?\n\n\u2022 They will immediately lose access to this file\n\u2022 This cannot be undone', function() {
      fetch(_shareApiBase + '/share/grants/revoke', {
          method: 'POST',
          credentials: 'include',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ grant_id: grantId, job_id: jobId })
      }).then(function(r) { return r.json(); }).then(function(data) {
          if (data.ok) {
              var row = document.getElementById('grantee-row-' + grantId);
              if (row) row.remove();
              _loadShareGrantees();
          } else {
              alert(data.error || 'Failed to revoke access.');
          }
      }).catch(function() { alert('Network error.'); });
      }); /* end ocConfirm */
  }
  function closeShareModal() {
      var m = document.getElementById('share-modal');
      if (m) m.classList.add('hidden');
  }
  function openExportModal() {
      var m = document.getElementById('export-modal');
      if (m) m.classList.remove('hidden');
  }
  function closeExportModal() {
      var m = document.getElementById('export-modal');
      if (m) m.classList.add('hidden');
  }

  /* ---- Select-all/none checkboxes ---- */
  function toggleAllFiles(checked) {
      document.querySelectorAll('.file-checkbox').forEach(function(cb) { cb.checked = checked; });
  }
  function selectNoneFiles() {
      document.querySelectorAll('.file-checkbox').forEach(function(cb) { cb.checked = false; });
      ['select-all-files', 'select-all-files-bottom'].forEach(function(id) {
          var el = document.getElementById(id);
          if (el) el.checked = false;
      });
  }

  function updateFeedbackCounter(textarea) {
      var counter = document.getElementById('feedback-counter');
      if (counter) counter.textContent = textarea.value.length + ' / 4000';
  }

  function showPreviewModal() {
      var urls = getCheckedUrls();
      if (!urls.length) { alert('Please select a file to preview.'); return; }
      window.open(urls[0], '_blank');
  }

  function showFileInfoForSelected() {
      var rows = document.querySelectorAll('.file-checkbox:checked');
      if (!rows.length) { alert('Please select a file first.'); return; }
      var first = rows[0];
      showFileInfo(null, first.dataset.name, first.dataset.size, first.dataset.url);
  }

  /* ---- Checked file URLs helper ---- */
  function getCheckedUrls() {
      var urls = [];
      document.querySelectorAll('.file-checkbox:checked').forEach(function(cb) {
          urls.push(cb.dataset.url);
      });
      return urls;
  }

  /* ---- Share link ---- */
  var _currentShareToken = null;
  var _shareApiBase = {% if subdomains_enabled and base_domain %}'{{ request.scheme }}://{{ base_domain }}'{% else %}''{% endif %};

  function createShareLink() {
      var oc = window._oc_output || {};
      var password = '';
      var pwEl = document.getElementById('share-password');
      if (pwEl) password = pwEl.value;
      var oneTime = false;
      var otEl = document.getElementById('share-onetime');
      if (otEl) oneTime = otEl.checked;
      var expiresIn = '';
      var expEl = document.getElementById('share-expiry');
      if (expEl) expiresIn = expEl.value;

      var errEl = document.getElementById('share-error');
      if (errEl) errEl.classList.add('hidden');
      var btn = document.getElementById('btn-create-share');
      if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> Creating...'; }

      fetch(_shareApiBase + '/share/create', {
          method: 'POST',
          credentials: 'include',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
              job_id: oc.job_id || '',
              password: password,
              is_one_time: oneTime,
              expires_in_hours: expiresIn ? parseInt(expiresIn) : null,
          })
      }).then(function(r) { return r.json(); }).then(function(data) {
          if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa fa-link"></i> Create Share Link'; }
          if (data.ok) {
              _currentShareToken = data.token || null;
              _shareLinkUrl = data.url || null;
              var urlEl = document.getElementById('share-url-display');
              if (urlEl) urlEl.value = data.url;
              var formSec = document.getElementById('share-form-section');
              if (formSec) formSec.classList.add('hidden');
              var resSec = document.getElementById('share-result');
              if (resSec) resSec.classList.remove('hidden');
              // Update Copy link button
              var copyBtn = document.getElementById('btn-create-share');
              if (copyBtn) { copyBtn.innerHTML = '<i class="fa fa-check text-xs"></i> Copied!'; navigator.clipboard.writeText(data.url).catch(function(){}); setTimeout(function() { if (copyBtn) copyBtn.innerHTML = '<i class="fa fa-link text-xs"></i> Copy link'; }, 3000); }
              // Update access label and refresh link count
              _shareStateLinks = 1;
              _updateAccessLabel(true, _shareStateGrants);
              _loadShareLinks();
          } else {
              var errMsg = document.getElementById('share-error-msg');
              if (errMsg) errMsg.textContent = data.error || 'Failed to create share link.';
              if (errEl) errEl.classList.remove('hidden');
          }
      }).catch(function() {
          if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa fa-link"></i> Create Share Link'; }
          var errMsg = document.getElementById('share-error-msg');
          if (errMsg) errMsg.textContent = 'Network error. Please try again.';
          if (errEl) errEl.classList.remove('hidden');
      });
  }

  function revokeShareLink() {
      if (!_currentShareToken) return;
      var btn = document.getElementById('btn-revoke-share');
      if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fa fa-spinner fa-spin text-xs"></i> Revoking...'; }
      fetch(_shareApiBase + '/share/' + _currentShareToken + '/revoke', { method: 'POST', credentials: 'include' })
          .then(function(r) { return r.json(); }).then(function(data) {
              if (data.ok) {
                  _currentShareToken = null;
                  resetShareForm();
                  var errEl = document.getElementById('share-error');
                  var errMsg = document.getElementById('share-error-msg');
                  if (errMsg) errMsg.textContent = 'Link revoked successfully.';
                  if (errEl) errEl.classList.remove('hidden');
              }
          }).catch(function() {
              if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa fa-ban text-xs"></i> Revoke link'; }
          });
  }

  function copyShareUrl() {
      var urlEl = document.getElementById('share-url-display');
      if (!urlEl) return;
      navigator.clipboard.writeText(urlEl.value).then(function() {
          var btn = document.getElementById('copy-share-btn');
          if (btn) { btn.innerHTML = '<i class="fa fa-check"></i> Copied!'; setTimeout(function() { btn.innerHTML = '<i class="fa fa-copy"></i> Copy'; }, 2000); }
      }).catch(function() { urlEl.select(); document.execCommand('copy'); });
  }

  function resetShareForm() {
      var formSec = document.getElementById('share-form-section');
      if (formSec) formSec.classList.remove('hidden');
      var resSec = document.getElementById('share-result');
      if (resSec) resSec.classList.add('hidden');
      var pwEl = document.getElementById('share-password');
      if (pwEl) pwEl.value = '';
  }

  /* ---- Feedback widget ---- */
  var _currentRating = 0;
  function setRating(val) {
      _currentRating = val;
      document.querySelectorAll('.star-btn').forEach(function(btn) {
          var bval = parseInt(btn.dataset.value);
          btn.style.opacity = bval <= val ? '1' : '0.35';
          btn.style.transform = bval === val ? 'scale(1.3)' : '';
      });
      var row = document.getElementById('feedback-comment-row');
      if (row) row.classList.remove('hidden');
  }

  function submitFeedback() {
      var oc = window._oc_output || {};
      var comment = '';
      var commEl = document.getElementById('feedback-comment');
      if (commEl) comment = commEl.value;
      fetch('/output/feedback/' + (oc.job_id || ''), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ rating: _currentRating, comment: comment })
      }).then(function() {
          var row = document.getElementById('feedback-comment-row');
          if (row) row.classList.add('hidden');
          var stars = document.getElementById('star-rating');
          if (stars) stars.classList.add('hidden');
          var thanks = document.getElementById('feedback-thanks');
          if (thanks) thanks.classList.remove('hidden');
      }).catch(function() {});
  }

  /* ---- Cloud export helpers ---- */
  function _setExportStatus(msg) {
      var el = document.getElementById('export-status');
      var msgEl = document.getElementById('export-status-msg');
      if (!msg) { if (el) el.classList.add('hidden'); return; }
      if (msgEl) msgEl.textContent = msg;
      if (el) el.classList.remove('hidden');
  }

  /* Google Drive export via GIS token + Drive API multipart upload */
  function exportToGoogleDrive() {
      var oc = window._oc_output || {};
      if (!oc.can_gdrive) { alert('Your plan does not include Google Drive export. Please upgrade.'); return; }
      var clientId = oc.gdrive_client_id;
      if (!clientId) { alert('Google Drive not configured.'); return; }
      var urls = getCheckedUrls();
      if (!urls.length) { alert('No files selected.'); return; }
      _setExportStatus('Connecting to Google Drive…');

      function doUpload(token) {
          var done = 0;
          urls.forEach(function(url) {
              fetch(url).then(function(r) { return r.blob(); }).then(function(blob) {
                  var fname = url.split('/').pop().split('?')[0] || 'file';
                  var metadata = { name: fname, mimeType: blob.type || 'application/octet-stream' };
                  var form = new FormData();
                  form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
                  form.append('file', blob);
                  return fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
                      method: 'POST', headers: { Authorization: 'Bearer ' + token }, body: form
                  });
              }).then(function() {
                  done++;
                  _setExportStatus('Uploaded ' + done + '/' + urls.length + ' to Google Drive.');
                  if (done === urls.length) setTimeout(function() { _setExportStatus(null); }, 4000);
              }).catch(function(err) { _setExportStatus('Upload error: ' + (err.message || err)); });
          });
      }

      function initAuth() {
          var client = google.accounts.oauth2.initTokenClient({
              client_id: clientId,
              scope: 'https://www.googleapis.com/auth/drive.file',
              callback: function(resp) {
                  if (resp.error) { _setExportStatus('Auth failed: ' + resp.error); return; }
                  doUpload(resp.access_token);
              }
          });
          client.requestAccessToken();
      }

      if (!window.google || !window.google.accounts) {
          var s = document.createElement('script');
          s.src = 'https://accounts.google.com/gsi/client';
          s.onload = initAuth;
          document.head.appendChild(s);
      } else { initAuth(); }
  }

  /* Dropbox Saver */
  function exportToDropbox() {
      var oc = window._oc_output || {};
      if (!oc.can_dropbox) { alert('Your plan does not include Dropbox export. Please upgrade.'); return; }
      var appKey = oc.dropbox_app_key;
      if (!appKey) { alert('Dropbox not configured.'); return; }
      var urls = getCheckedUrls();
      if (!urls.length) { alert('No files selected.'); return; }

      function runSaver() {
          var files = urls.map(function(u) {
              return { url: u, filename: u.split('/').pop().split('?')[0] || 'file' };
          });
          Dropbox.save({
              files: files,
              success: function() { _setExportStatus('Saved to Dropbox!'); setTimeout(function() { _setExportStatus(null); }, 4000); },
              error: function(msg) { _setExportStatus('Dropbox error: ' + msg); }
          });
      }

      if (!window.Dropbox) {
          _setExportStatus('Loading Dropbox SDK…');
          var s = document.createElement('script');
          s.id = 'dropboxjs';
          s.setAttribute('data-app-key', appKey);
          s.src = 'https://www.dropbox.com/static/api/2/dropins.js';
          s.onload = function() { _setExportStatus(null); runSaver(); };
          document.head.appendChild(s);
      } else { runSaver(); }
  }

  /* OneDrive export */
  function exportToOneDrive() {
      var oc = window._oc_output || {};
      if (!oc.can_onedrive) { alert('Your plan does not include OneDrive export. Please upgrade.'); return; }
      var clientId = oc.onedrive_client_id;
      if (!clientId) { alert('OneDrive not configured.'); return; }
      var urls = getCheckedUrls();
      if (!urls.length) { alert('No files selected.'); return; }
      _setExportStatus('Connecting to OneDrive…');

      function doSave() {
          OneDrive.save({
              clientId: clientId, action: 'save', files: urls,
              success: function() { _setExportStatus('Saved to OneDrive!'); setTimeout(function() { _setExportStatus(null); }, 4000); },
              error: function(err) { _setExportStatus('OneDrive error: ' + (err.message || JSON.stringify(err))); },
              cancel: function() { _setExportStatus(null); }
          });
      }

      if (!window.OneDrive) {
          var s = document.createElement('script');
          s.src = 'https://js.live.net/v7.2/OneDrive.js';
          s.onload = function() { _setExportStatus(null); doSave(); };
          document.head.appendChild(s);
      } else { doSave(); }
  }

    // ── Tools tab: open converter with auto-upload ───────────────────────────
    function openToolConverter(category, ext) {
        // Pick the first checked output file (fall back to first file)
        var checked = document.querySelectorAll('.file-checkbox:checked[data-url]');
        var el = checked.length ? checked[0] : document.querySelector('.file-checkbox[data-url]');
        var fileUrl = el ? el.getAttribute('data-url') : null;
        var fileName = el ? (el.getAttribute('data-name') || fileUrl.split('/').pop().split('?')[0]) : null;
        // Store in sessionStorage so the converter page can auto-upload it
        if (fileUrl) {
            try {
                sessionStorage.setItem('_oc_auto_upload', JSON.stringify({url: fileUrl, name: fileName}));
            } catch(e) {}
        }
        // Build converter URL: subdomain or path-based fallback
        {% if subdomains_enabled and base_domain %}
        var converterUrl = 'https://' + category + '.{{ base_domain }}/convert-to-' + ext;
        {% else %}
        var converterUrl = '/' + category + '/convert-to-' + ext;
        {% endif %}
        window.location.href = converterUrl;
    }
  
    function sendShareInvite() {
        var emailEl = document.getElementById('share-invite-email');
        var statusEl = document.getElementById('share-invite-status');
        var btn = document.getElementById('btn-send-invite');
        var email = emailEl ? emailEl.value.trim() : '';
        var jobId = (window._oc_output || {}).job_id || '';

        function showStatus(msg, isError) {
            if (!statusEl) return;
            statusEl.textContent = msg;
            statusEl.className = 'mt-2 text-xs px-3 py-2 rounded-lg ' + (isError
                ? 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300'
                : 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300');
            statusEl.classList.remove('hidden');
        }

        if (!email || email.indexOf('@') === -1) {
            showStatus('Please enter a valid email address.', true);
            return;
        }
        if (!jobId) {
            showStatus('Could not determine file ID. Please refresh.', true);
            return;
        }

        if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fa fa-spinner fa-spin text-xs"></i> Sending…'; }
        fetch(_shareApiBase + '/share/grant', {
            method: 'POST',
            credentials: 'include',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ job_id: jobId, email: email })
        }).then(function(r) { return r.json(); }).then(function(data) {
            if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa fa-paper-plane text-xs"></i> Send'; }
            if (data.ok) {
                var msg = data.email_warning
                    ? 'Access granted to ' + email + '. (Note: ' + data.email_warning + ')'
                    : 'Invitation sent to ' + email;
                showStatus(msg, false);
                if (emailEl) emailEl.value = '';
                setTimeout(_loadShareGrantees, 400);
            } else {
                showStatus(data.error || 'Failed to send invitation.', true);
            }
        }).catch(function() {
            if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa fa-paper-plane text-xs"></i> Send'; }
            showStatus('Network error. Please try again.', true);
        });
    }
    </script>
{% endblock %}