{% extends "base.html" %}
{% from "macros/format_selector_macro.html" import format_selector %}
{% set _page_id = normalize_page_id(static_page='index') %}
{% set _cms_title = get_page_content(_page_id, 'title', g.lang_code) %}
{% set _cms_desc = get_page_content(_page_id, 'description', g.lang_code) %}
{% set _cms_heading = get_page_content(_page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = get_page_content(_page_id, 'page_description', g.lang_code) %}
{% set _cms_head_html = get_page_content(_page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = get_page_content(_page_id, 'og_image', g.lang_code) %}
{% set _cms_converter_heading = get_page_content(_page_id, 'converter_section_heading', g.lang_code) %}
{% set _cms_converter_desc = get_page_content(_page_id, 'converter_section_description', g.lang_code) %}
{% set _cms_tools_heading = get_page_content(_page_id, 'tools_section_heading', g.lang_code) %}
{% set _cms_tools_desc = get_page_content(_page_id, 'tools_section_description', g.lang_code) %}
{% set _cms_tool_currency_icon = get_page_content(_page_id, 'tool_currency_icon', g.lang_code) %}
{% set _cms_tool_currency_title = get_page_content(_page_id, 'tool_currency_title', g.lang_code) %}
{% set _cms_tool_currency_desc = get_page_content(_page_id, 'tool_currency_desc', g.lang_code) %}
{% set _cms_tool_screenshot_icon = get_page_content(_page_id, 'tool_screenshot_icon', g.lang_code) %}
{% set _cms_tool_screenshot_title = get_page_content(_page_id, 'tool_screenshot_title', g.lang_code) %}
{% set _cms_tool_screenshot_desc = get_page_content(_page_id, 'tool_screenshot_desc', g.lang_code) %}
{% set _cms_tool_bgremove_icon = get_page_content(_page_id, 'tool_bgremove_icon', g.lang_code) %}
{% set _cms_tool_bgremove_title = get_page_content(_page_id, 'tool_bgremove_title', g.lang_code) %}
{% set _cms_tool_bgremove_desc = get_page_content(_page_id, 'tool_bgremove_desc', g.lang_code) %}
{% block title %}{% if _cms_title %}{{ _cms_title }}{% else %}{%trans %}Fast and Free Online File Converter | OnlineConvert{% endtrans %}{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Convert online files Like images, video, documents, audio and more to any desired formats with this free onlineconvert.cc toolkit.{% endtrans %}{% endif %}{% endblock %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block extra_head %}{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}
<style>
      #fsSourceDropdown, #fsTargetDropdown { z-index: 9999 !important; }
  </style>

  {% set _fs_filetypes = selector_types() %}
  {% set _hero_type = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
  {% set _hero_img  = site.get('hero_bg_image', '') if site is defined else '' %}
  {% set _hero_lcl  = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
  {% set _hero_lcd  = (site.get('hero_img_left_color_dark',  '#0f172a') if site is defined) or '#0f172a' %}

  <section class="hero-gradient relative overflow-hidden">
          {% if _hero_type == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _hero_type == 'gradient' %}
      <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
      
      {% endif %}
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-stretch">
              <div class="animate-slide-up py-8 md:py-12">
                  <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-sm text-sm text-white/90 mb-6 border border-white/10">
                      <i class="fa fa-bolt text-yellow-300"></i> {{ site.get('hero_badge', 'Free &amp; Unlimited Conversions') }}
                  </div>
                  <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5">
                      {{ _cms_heading if _cms_heading else site.get('hero_heading', 'THE ULTIMATE FREE ONLINE FILE CONVERTER') }}
                  </h1>
                  <p class="text-lg text-white/90 leading-relaxed">
                      {{ _cms_page_desc if _cms_page_desc else site.get('hero_description', 'Unlimited All in One File Converter with Audio, Video, Images, Documents, PDFs, Ebooks, Softwares, Compressions and Much More.') }}
                  </p>
              </div>
              <div class="hero-sel-col flex items-center justify-center relative z-50 overflow-visible">
                  {% if _hero_type == 'image' and _hero_img %}<div class="hero-col-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>{% endif %}
                <div class="flex items-center justify-center gap-3 flex-wrap relative z-10">
                      <span class="font-semibold text-lg text-white flex-shrink-0">{% trans %}Convert{% endtrans %}</span>
                      <div class="relative min-w-[140px]" id="fs-source-selector">
                          <button type="button" onclick="fsToggleSource()"
                              class="px-4 py-3 bg-white dark:bg-gray-900 border-2 border-white/30 rounded-xl flex items-center justify-between hover:border-blue-500 transition-all group">
                              <span class="text-gray-500 dark:text-gray-400 font-semibold truncate" id="fs-selected-source">...</span>
                              <i class="fas fa-chevron-down text-gray-400 group-hover:text-blue-500 transition-colors ml-2 flex-shrink-0"></i>
                          </button>
                          <div id="fsSourceDropdown"
                               class="absolute mt-2 bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden hidden"
                               style="z-index:9999;"
                               data-filetypes="{{ _fs_filetypes|tojson|forceescape }}">
                              <div class="w-full">{{ format_selector(_fs_filetypes) }}</div>
                          </div>
                      </div>
                      <span class="font-semibold text-lg text-white flex-shrink-0">{% trans %}to{% endtrans %}</span>
                      <div class="relative min-w-[140px]" id="fs-target-selector">
                          <button type="button" onclick="fsToggleTarget()"
                              class="px-4 py-3 bg-white dark:bg-gray-900 border-2 border-white/30 rounded-xl flex items-center justify-between hover:border-green-500 transition-all group">
                              <span class="text-gray-500 dark:text-gray-400 font-semibold truncate" id="fs-selected-target">...</span>
                              <i class="fas fa-chevron-down text-gray-400 group-hover:text-green-500 transition-colors ml-2 flex-shrink-0"></i>
                          </button>
                          <div id="fsTargetDropdown"
                               class="absolute mt-2 bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden hidden"
                               style="z-index:9999;"
                               data-filetypes="{{ _fs_filetypes|tojson|forceescape }}">
                              <div class="w-full">{{ format_selector(_fs_filetypes) }}</div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>
  

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

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="text-center mb-12">
        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-3">{{ _cms_converter_heading if _cms_converter_heading else site.get('converter_heading', _('Choose Your Converter')) }}</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">{{ _cms_converter_desc if _cms_converter_desc else site.get('converter_description', _('Select a file type below to get started with your conversion')) }}</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 min-[1600px]:grid-cols-4 gap-4">
        {% for key, item in filetypes.items() %}
        {% if not item['category'] %}
        <div class="file-card-hover group ftc-{{ item.get('color', 'blue') }}">
            <div class="file-card h-full p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 cursor-pointer transition-theme">
                <div class="flex items-start gap-4">
                    {% set _box_page_id = normalize_page_id(filetype=key) %}
                    {% set _box_icon = get_page_content(_box_page_id, 'filetype_icon', g.lang_code) %}
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10 flex items-center justify-center">
                        <i class="{{ _box_icon if _box_icon else item['icon-class'] }} text-xl text-primary dark:text-primary-light"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                {% set _box_desc = get_page_content(_box_page_id, 'filetype_description', g.lang_code) %}
                                {% set _box_title = get_page_content(_box_page_id, 'filetype_title', g.lang_code) %}
                                <h3 class="font-semibold text-gray-900 dark:text-white text-base">{{ _box_title if _box_title else _(item['title']) }}</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">{{ _box_desc if _box_desc else _(item['description']) }}</p>
                            </div>
                            <i class="fa fa-chevron-right text-xs text-gray-400 dark:text-gray-600 mt-1.5 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                        </div>
                        <form method="get" action="{{ full_url('/') }}" class="mt-3">
                            <input type="hidden" name="type" value="{{ key }}">
                            <label for="format-{{ key }}" class="sr-only">{{ _(item['title']) }} - ...</label>
                            <select name="format" id="format-{{ key }}" class="w-full px-3 py-2.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all" required data-testid="select-format-{{ key }}">
                                <option value="none">{% trans %}Select target format...{% endtrans %}</option>
                                {% for filetype in item['ext'] %}
                                    {% if not item['_prefix'] %}
                                        <option value="{{ filetype }}"
                                            {% if key == 'device' or key == 'webservice' %}
                                                title="{{ filetype }}"
                                                data-url="/converter/{{ key }}/{{ filetype.lower() }}"
                                            {% elif key == 'pdf' and '-to-' in filetype %}
                                                value="{{ filetype }}"
                                                title="{{ filetype }}"
                                            {% endif %}>
                                            {% if key == 'device' or key == 'webservice' %}
                                                {% trans %}Convert for {{ filetype }}{% endtrans %}
                                            {% elif key == 'pdf' and not '-to-' in filetype %}
                                                {{ filetype }}
                                            {% else %}
                                                {% trans %}Convert to {{ filetype }}{% endtrans %}
                                            {% endif %}
                                        </option>
                                    {% else %}
                                        <option value="{{ filetype }}"
                                            {% if key == 'device' or key == 'webservice' %}
                                                title="{{ filetype }}"
                                                data-url="/converter/{{ key }}/{{ filetype.lower() }}"
                                            {% elif key == 'pdf' and '-to-' in filetype %}
                                                title="{{ filetype }}"
                                            {% endif %}>
                                            {% if key == 'pdf' and not '-to-' in filetype %}
                                                {{ filetype }}
                                            {% else %}
                                                {{ item["_prefix"] | replace("{}", filetype) | replace("-", " ") | splitpart(0, '_') }}
                                            {% endif %}
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}

        {% for key, item in filetypes.items() %}
        {% if item['category'] %}
        <div class="file-card-hover group ftc-{{ item.get('color', 'blue') }}">
            <div class="file-card h-full p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 cursor-pointer transition-theme">
                <div class="flex items-start gap-4">
                    {% set _box_page_id2 = normalize_page_id(filetype=key) %}
                    {% set _box_icon2 = get_page_content(_box_page_id2, 'filetype_icon', g.lang_code) %}
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/10 to-primary/10 dark:from-accent-light/10 dark:to-primary-light/10 flex items-center justify-center">
                        <i class="{{ _box_icon2 if _box_icon2 else item['icon-class'] }} text-xl text-accent dark:text-accent-light"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                {% set _box_desc2 = get_page_content(_box_page_id2, 'filetype_description', g.lang_code) %}
                                {% set _box_title2 = get_page_content(_box_page_id2, 'filetype_title', g.lang_code) %}
                                <h3 class="font-semibold text-gray-900 dark:text-white text-base">{{ _box_title2 if _box_title2 else _(item['title']) }}</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">{{ _box_desc2 if _box_desc2 else _(item['description']) }}</p>
                            </div>
                            <i class="fa fa-chevron-right text-xs text-gray-400 dark:text-gray-600 mt-1.5 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                        </div>
                        <form method="get" class="mt-3">
                            <input type="hidden" name="type" value="{{ key }}">
                            <label for="format-cat-{{ key }}" class="sr-only">{{ _(item['title']) }} - ...</label>
                            <select name="format" id="format-cat-{{ key }}" class="w-full px-3 py-2.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all" required data-testid="select-format-cat-{{ key }}">
                                <option value="none">{% trans %}Select target format...{% endtrans %}</option>
                                {% for filetype in item['ext'] %}
                                    {% if not item['_prefix'] %}
                                        <option value="{{ filetype }}"
                                            {% if key == 'device' or key == 'webservice' %}
                                                title="{{ filetype }}"
                                                data-url="/converter/{{ key }}/{{ filetype.lower() }}"
                                            {% elif key == 'pdf' and '-to-' in filetype %}
                                                value="{{ filetype }}"
                                                title="{{ filetype }}"
                                            {% endif %}>
                                            {% if key == 'device' or key == 'webservice' %}
                                                {% trans %}Convert for {{ filetype }}{% endtrans %}
                                            {% elif key == 'pdf' and '-to-' in filetype %}
                                                {{ filetype }}
                                            {% else %}
                                                {% trans %}Convert to {{ filetype }}{% endtrans %}
                                            {% endif %}
                                        </option>
                                    {% else %}
                                        <option value="{{ filetype }}"
                                            {% if key == 'device' or key == 'webservice' %}
                                                title="{{ filetype }}"
                                                data-url="/converter/{{ key }}/{{ filetype.lower() }}"
                                            {% elif key == 'pdf' and '-to-' in filetype %}
                                                title="{{ filetype }}"
                                            {% endif %}>
                                            {% if key == 'pdf' and '-to-' in filetype %}
                                                {{ filetype }}
                                            {% else %}
                                                {{ item["_prefix"] | replace("{}", filetype) | replace("-", " ") | splitpart(0, '_') }}
                                            {% endif %}
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}

        {% for key, item in hashtypes.items() %}
        {% if item['category'] %}
        <div class="file-card-hover group ftc-{{ item.get('color', 'purple') }}">
            <div class="file-card h-full p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 cursor-pointer transition-theme">
                <div class="flex items-start gap-4">
                    {% set _hash_box_page_id = normalize_page_id(generator_type=key) %}
                    {% set _hash_box_icon = get_page_content(_hash_box_page_id, 'filetype_icon', g.lang_code) %}
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-secondary/10 to-accent/10 dark:from-secondary-light/10 dark:to-accent-light/10 flex items-center justify-center">
                        <i class="{{ _hash_box_icon if _hash_box_icon else item['icon-class'] }} text-xl text-secondary dark:text-secondary-light"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                {% set _hash_box_desc = get_page_content(_hash_box_page_id, 'filetype_description', g.lang_code) %}
                                {% set _hash_box_title = get_page_content(_hash_box_page_id, 'filetype_title', g.lang_code) %}
                                <h3 class="font-semibold text-gray-900 dark:text-white text-base">{{ _hash_box_title if _hash_box_title else _(item['title']) }}</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">{{ _hash_box_desc if _hash_box_desc else _(item['description']) }}</p>
                            </div>
                            <i class="fa fa-chevron-right text-xs text-gray-400 dark:text-gray-600 mt-1.5 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                        </div>
                        <form method="get" class="mt-3">
                            <input type="hidden" name="type" value="{{ _(item['typeee']) }}" id="typeInput">
                            <label for="format-hash-{{ key }}" class="sr-only">{{ _(item['title']) }} - ...</label>
                            <select name="format" id="format-hash-{{ key }}" class="w-full px-3 py-2.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all" required data-testid="select-format-hash-{{ key }}">
                                <option value="none">{% trans %}Select target format...{% endtrans %}</option>
                                {% for filetype in item['ext'] %}
                                    {% if not item['_prefix'] %}
                                        <option value="{{ filetype }}"
                                            {% if key == 'device' or key == 'webservice' %}
                                                title="{{ filetype }}"
                                                data-url="/converter/{{ key }}/{{ filetype.lower() }}"
                                            {% elif key == 'pdf' and '-to-' in filetype %}
                                                value="{{ filetype }}"
                                                title="{{ filetype }}"
                                            {% endif %}>
                                            {% if key == 'device' or key == 'webservice' %}
                                                {% trans %}Convert for {{ filetype }}{% endtrans %}
                                            {% elif key == 'pdf' and '-to-' in filetype %}
                                                {{ filetype }}
                                            {% else %}
                                                {% trans %}Convert to {{ filetype }}{% endtrans %}
                                            {% endif %}
                                        </option>
                                    {% else %}
                                        <option value="{{ filetype }}"
                                            {% if key == 'device' or key == 'webservice' %}
                                                title="{{ filetype }}"
                                                data-url="/converter/{{ key }}/{{ filetype.lower() }}"
                                            {% elif key == 'pdf' and '-to-' in filetype %}
                                                title="{{ filetype }}"
                                            {% endif %}>
                                            {% if key == 'pdf' and '-to-' in filetype %}
                                                {{ filetype }}
                                            {% else %}
                                                {{ item["_prefix"] | replace("{}", filetype) | replace("-", " ") | splitpart(0, '_') }}
                                            {% endif %}
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}
    </div>
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="text-center mb-8">
        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-3">{{ _cms_tools_heading if _cms_tools_heading else _('More Useful Tools') }}</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">{{ _cms_tools_desc if _cms_tools_desc else _('Additional tools to help with your everyday tasks') }}</p>
    </div>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Currency Converter Box -->
        <a href="/currencies" class="file-card-hover group block no-underline">
            <div class="file-card h-full p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 cursor-pointer transition-theme">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/10 to-emerald-500/10 dark:from-green-500/20 dark:to-emerald-500/20 flex items-center justify-center">
                        <i class="{{ _cms_tool_currency_icon if _cms_tool_currency_icon else 'fas fa-exchange-alt' }} text-2xl text-green-600 dark:text-green-400"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                <h3 class="font-semibold text-gray-900 dark:text-white text-lg mb-1">{{ _cms_tool_currency_title if _cms_tool_currency_title else _('Currency Converter') }}</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">{{ _cms_tool_currency_desc if _cms_tool_currency_desc else _('Convert between 150+ world currencies with real-time exchange rates') }}</p>
                            </div>
                            <i class="fa fa-chevron-right text-xs text-gray-400 dark:text-gray-600 mt-2 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors"></i>
                        </div>
                        <div class="mt-4 flex items-center text-xs text-gray-500 dark:text-gray-400">
                            <i class="fas fa-globe mr-1"></i>
                            <span>{% trans %}150+ currencies • Real-time rates{% endtrans %}</span>
                        </div>
                    </div>
                </div>
            </div>
        </a>

        <!-- Screenshot Tool Box -->
        <a href="/screenshot" class="file-card-hover group block no-underline">
            <div class="file-card h-full p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 cursor-pointer transition-theme">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/20 flex items-center justify-center">
                        <i class="{{ _cms_tool_screenshot_icon if _cms_tool_screenshot_icon else 'fas fa-camera' }} text-2xl text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                <h3 class="font-semibold text-gray-900 dark:text-white text-lg mb-1">{{ _cms_tool_screenshot_title if _cms_tool_screenshot_title else _('Screenshot Tool') }}</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">{{ _cms_tool_screenshot_desc if _cms_tool_screenshot_desc else _('Capture, edit, and annotate screenshots instantly in your browser') }}</p>
                            </div>
                            <i class="fa fa-chevron-right text-xs text-gray-400 dark:text-gray-600 mt-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"></i>
                        </div>
                        <div class="mt-4 flex items-center text-xs text-gray-500 dark:text-gray-400">
                            <i class="fas fa-edit mr-1"></i>
                            <span>{% trans %}Annotate • Edit • Share{% endtrans %}</span>
                        </div>
                    </div>
                </div>
            </div>
        </a>

        <!-- Image Background Remover Box -->
        <a href="/image-bg-remove" class="file-card-hover group block no-underline">
            <div class="file-card h-full p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 cursor-pointer transition-theme">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/10 to-pink-500/10 dark:from-purple-500/20 dark:to-pink-500/20 flex items-center justify-center">
                        <i class="{{ _cms_tool_bgremove_icon if _cms_tool_bgremove_icon else 'fas fa-magic' }} text-2xl text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                <h3 class="font-semibold text-gray-900 dark:text-white text-lg mb-1">{{ _cms_tool_bgremove_title if _cms_tool_bgremove_title else _('Background Remover') }}</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">{{ _cms_tool_bgremove_desc if _cms_tool_bgremove_desc else _('Remove image backgrounds automatically with AI-powered precision') }}</p>
                            </div>
                            <i class="fa fa-chevron-right text-xs text-gray-400 dark:text-gray-600 mt-2 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors"></i>
                        </div>
                        <div class="mt-4 flex items-center text-xs text-gray-500 dark:text-gray-400">
                            <i class="fas fa-brain mr-1"></i>
                            <span>{% trans %}AI-powered • Instant • HD quality{% endtrans %}</span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900/50 transition-theme py-12">
    {% include "shared/tools.html" %}
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    {% include "shared/some-content-index.html" %}
</div>
{% include "shared/reviews.html" %}
{% endblock %}

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

{% block footer %}
    {{ super() }}
  <script>
    const _idxSubdomainsOn = {{ use_subdomains | tojson }};
    const _idxMainDomain   = '{{ main_domain() }}';
    const _idxLangPrefix   = '{{ lang_prefix() }}';

    // Function to format PDF options nicely
    function formatPdfOptions() {
        // Find all PDF select elements
        $('select[name="format"]').each(function() {
            const $select = $(this);
            const $form = $select.closest('form');
            const typeInput = $form.find('[name="type"]');
            
            // Check if this is a PDF selector
            if (typeInput.length && (typeInput.val() === 'pdf' || typeInput.val() === 'PDF')) {
                // Loop through each option (skip the first "none" option)
                $select.find('option').each(function(index) {
                    if (index === 0) return; // Skip the "..." option
                    
                    const $this = $(this);
                    const value = $this.val();
                    
                    // Format the display text
                    let displayText = value.split('-')
                        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                        .join(' ')
                        .replace(/Pdf/g, 'PDF')
                        .replace(/Jpg/g, 'JPG')
                        .replace(/Png/g, 'PNG')
                        .replace(/Bmp/g, 'BMP')
                        .replace(/Tiff/g, 'TIFF')
                        .replace(/Txt/g, 'TXT')
                        .replace(/Html/g, 'HTML')
                        .replace(/Zip/g, 'ZIP')
                        .replace(/Gif/g, 'GIF')
                        .replace(/Word/g, 'Word')
                        .replace(/Excel/g, 'Excel')
                        .replace(/Powerpoint/g, 'PowerPoint')
                        .replace(/To/g, 'to');
                    
                    // Special case for "pdf to something"
                    if (value.startsWith('pdf-to-')) {
                        const target = value.replace('pdf-to-', '');
                        displayText = 'PDF to ' + target.split('-')
                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                            .join(' ')
                            .replace(/Jpg/g, 'JPG')
                            .replace(/Png/g, 'PNG')
                            .replace(/Bmp/g, 'BMP')
                            .replace(/Tiff/g, 'TIFF')
                            .replace(/Txt/g, 'TXT')
                            .replace(/Html/g, 'HTML')
                            .replace(/Zip/g, 'ZIP');
                    }
                    
                    // Special case for "something to pdf"
                    if (value.endsWith('-to-pdf')) {
                        const source = value.replace('-to-pdf', '');
                        displayText = source.split('-')
                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                            .join(' ')
                            .replace(/Jpg/g, 'JPG')
                            .replace(/Png/g, 'PNG')
                            .replace(/Bmp/g, 'BMP')
                            .replace(/Tiff/g, 'TIFF')
                            .replace(/Gif/g, 'GIF')
                            .replace(/Word/g, 'Word')
                            .replace(/Excel/g, 'Excel')
                            .replace(/Powerpoint/g, 'PowerPoint')
                            .replace(/Txt/g, 'TXT')
                            .replace(/Html/g, 'HTML') + ' to PDF';
                    }
                    
                    // Update the option text
                    $this.text(displayText);
                });
            }
        });
    }

    function _buildConverterUrl(type, format) {
        const ltype = (type || '').toLowerCase();
        const lfmt  = (format || '').toLowerCase();

        if (ltype === "hash") {
            return lfmt === "none" ? ltype : `${ltype}/${lfmt}-generator`;
        }

        // Helper — produces subdomain URL or path-based fallback
        function _idxUrl(subdomain, path) {
            if (_idxSubdomainsOn) {
                return `https://${subdomain}.${_idxMainDomain}${_idxLangPrefix}${path}`;
            } else {
                // Non-subdomain: rewrite subdomain-specific path patterns
                if (path.startsWith('/do/')) {
                    return `${_idxLangPrefix}${path}`;
                }
                if (path.startsWith('/convert-to-')) {
                    const targetFormat = path.replace('/convert-to-', '');
                    return `${_idxLangPrefix}/converter/${subdomain}/${targetFormat}`;
                }
                if (path.startsWith('/convert-for-')) {
                    const targetFormat = path.replace('/convert-for-', '');
                    return `${_idxLangPrefix}/converter/${subdomain}/${targetFormat}`;
                }
                if (path.startsWith('/compress-')) {
                    const targetFormat = path.replace('/compress-', '');
                    return `${_idxLangPrefix}/converter/${subdomain}/${targetFormat}`;
                }
                // For regular paths like /png
                if (path.startsWith('/')) {
                    return `${_idxLangPrefix}/converter/${subdomain}${path}`;
                }
                return `${_idxLangPrefix}/converter/${subdomain}${path}`;
            }
        }

        if (lfmt === "none") {
            // No format selected - go to category page
            if (_idxSubdomainsOn) {
                return `https://${ltype}.${_idxMainDomain}${_idxLangPrefix}/`;
            } else {
                return `${_idxLangPrefix}/converter/${ltype}/`;
            }
        } 
        // Handle different type categories
        else if (ltype === "pdf") {
            return _idxUrl('pdf', `/do/${lfmt}`);
        } 
        else if (ltype === "device" || ltype === "webservice") {
            // For device/webservice, use /convert-for- path
            return _idxUrl(ltype, `/convert-for-${lfmt}`);
        } 
        else {
            // For ALL OTHER types (archive, image, video, audio, document, etc.)
            // Use /convert-to- path
            return _idxUrl(ltype, `/convert-to-${lfmt}`);
        }
    }

    // Run when document is ready
    $(document).ready(function() {
        formatPdfOptions();
    });

    // Handle form submission
    $(".file-card form").on("submit", function(e) {
        e.preventDefault();
        const type = $(this).find("[name='type']").val();
        const format = $(this).find("[name='format']").val();
        if (!type || !format || format === 'none') return;
        window.location.href = _buildConverterUrl(type, format);
    });

    // Handle card clicks - go to main type page
    $(".file-card").on("click", function(e) {
        const $target = $(e.target);
        
        // If clicking on select, option, or any form element, don't trigger card click
        if ($target.is('select') || $target.is('option') || $target.closest('select').length || 
            $target.closest('form').length || $target.is('form')) {
            return;
        }
        
        // Get the type from the form
        const $form = $(this).find("form");
        const type = $form.find("[name='type']").val();
        
        if (type) {
            e.preventDefault();
            // Navigate to the main type page (with no format selected)
            window.location.href = _buildConverterUrl(type, 'none');
        }
    });

    // Handle select change
    $("[name='format']").on("change", function(e) {
        e.stopPropagation(); // Prevent event bubbling
        const type = $(this).parents("form").find("[name='type']").val();
        const format = $(this).val();
        if (format && format !== 'none') {
            window.location.href = _buildConverterUrl(type, format);
        }
    });

    // Stop propagation on select clicks to prevent card click
    $(document).on('click', '.file-card select, .file-card option', function(e) {
        e.stopPropagation();
    });
</script>
{% endblock %}