{% extends "base.html" %}
{% set tool_id = fileformat|lower %}
{% set _page_id = normalize_page_id(filetype=filetype, fileformat=fileformat) %}
{% set meta = tool_meta[tool_id] if tool_meta is defined and tool_id in tool_meta else {"title": tool_id|replace("-"," ")|title, "desc": "", "icon": "fa-file-pdf", "accept": ".pdf", "multi": false, "category": "tools"} %}

{% block title %}{{ meta.title }} - {% trans %}Free Online PDF Tool{% endtrans %} | OnlineConvert.cc{% endblock %}
{% block description %}{{ meta.desc }}{% endblock %}

{% block head %}
{{ super() }}
<style>
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOut {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(-100%); opacity: 0; }
    }
    @keyframes flyToTrash {
        0% { transform: scale(1) rotate(0deg); opacity: 1; }
        50% { transform: scale(0.8) rotate(10deg); opacity: 0.5; }
        100% { transform: scale(0) rotate(20deg) translateY(-50px); opacity: 0; }
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .fly-to-trash { animation: flyToTrash 0.5s ease-out forwards; pointer-events: none; }
    .slide-in { animation: slideIn 0.3s ease-out; }
    .slide-out { animation: slideOut 0.3s ease-out; }
    .fade-in { animation: fadeIn 0.3s ease-out; }
    .slide-up { animation: slideUp 0.3s ease-out; }
    .pulse { animation: pulse 2s infinite; }
    .page-thumb { transition: all 0.2s ease; cursor: grab; }
    .page-thumb:active { cursor: grabbing; }
    .page-thumb.rotating { transition: transform 0.2s ease; }
    .dropzone-highlight { border-color: #3b82f6 !important; background-color: rgba(59, 130, 246, 0.1) !important; }
    .zoom-modal-content { max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
    .zoom-modal-content canvas, .zoom-modal-content img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
    .processing-timer { font-family: monospace; font-size: 1.2rem; font-weight: bold; }
    .sortable-ghost { opacity: 0.4; border: 2px dashed #3b82f6 !important; background: rgba(59, 130, 246, 0.1) !important; }
    .sortable-drag { opacity: 0.8; transform: rotate(2deg); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
    .signature-canvas { border: 2px solid #e5e7eb; border-radius: 0.5rem; background: white; cursor: crosshair; }
    .dark .signature-canvas { background: #1f2937; border-color: #4b5563; }
    .page-preview { transition: all 0.3s ease; }
    .page-preview:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); }
    .move-input { width: 3rem; text-align: center; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.75rem; padding: 2px 4px; }
    .dark .move-input { border-color: #4b5563; background: #1f2937; color: #e5e7eb; }
</style>
{% endblock %}

{% block header_menu %}
<ul class="flex items-center">
    <li class="relative" data-dropdown="tool-tip">
        <button class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
            {% trans %}PDF Tools{% endtrans %}
            <i class="fa fa-chevron-down text-xs transition-transform"></i>
        </button>
        <div class="dropdown-menu-2 hidden absolute top-full left-0 mt-2 w-auto min-w-[350px] bg-white dark:bg-gray-900 rounded-xl shadow-2xl dark:shadow-black/30 border border-gray-200 dark:border-gray-700 p-4 z-50 animate-fade-in">
            <div class="grid grid-cols-2 gap-2">
                {% for tid, tmeta in tool_meta.items() %}
                    {% if tmeta.category == 'organize' %}
                    <a href="{{ full_url(path='/do/' ~ tid, filetype='pdf') }}" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all">
                        <i class="fa {{ tmeta.icon }} w-5 text-blue-500"></i> {{ tmeta.title }}
                    </a>
                    {% endif %}
                {% endfor %}
                <div class="col-span-2 border-t my-1"></div>
                {% for tid, tmeta in tool_meta.items() %}
                    {% if tmeta.category == 'optimize' %}
                    <a href="{{ full_url(path='/do/' ~ tid, filetype='pdf') }}" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all">
                        <i class="fa {{ tmeta.icon }} w-5 text-green-500"></i> {{ tmeta.title }}
                    </a>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </li>
</ul>
{% endblock %}

{% block content %}
{% set _ht_converter_ = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
{% set _hero_img = site.get('hero_bg_image', '') if site is defined else '' %}
{% set _hero_lcl = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
{% set _hero_lcd = (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' %}
<section class="hero-gradient relative overflow-hidden">
        {% if _ht_converter_ == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _ht_converter_ == '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>
{% elif _ht_converter_ == 'image' and _hero_img %}
    <div class="hero-bg-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>
{% endif %}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
        <div class="max-w-3xl animate-slide-up">
            <div class="flex items-center gap-3 mb-4">
                <span class="tool-badge {{ meta.category }}">{{ meta.category|upper }}</span>
                {% if meta.multi %}
                <span class="tool-badge">{% trans %}MULTI-FILE{% endtrans %}</span>
                {% endif %}
            </div>
            <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4" data-testid="text-tool-title">
                <i class="fa {{ meta.icon }} mr-2"></i>{{ meta.title }}
            </h1>
            <p class="text-lg text-white/90 max-w-2xl leading-relaxed" data-testid="text-tool-desc">{{ meta.desc }}</p>
        </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-8"
     id="pdf-tool-root"
     data-tool-id="{{ tool_id }}"
     data-tool-title="{{ meta.title }}"
     data-multi="{{ 'true' if meta.multi else 'false' }}"
     data-accept="{{ meta.accept }}"
     data-category="{{ meta.category }}">

    <div id="upload-section">
        <div class="relative border-2 border-dashed border-white/40 rounded-2xl bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all hover:scale-[1.02] hover:shadow-2xl cursor-pointer p-12 text-center" id="drop-zone" data-testid="drop-zone">
            <input type="file" id="file-input" accept="{{ meta.accept }}" {{ "multiple" if meta.multi }} class="absolute inset-0 opacity-0 cursor-pointer z-10" data-testid="input-file">
            <div class="pointer-events-none">
                <div class="mb-4">
                    <svg class="mx-auto" width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M50 40H10C5.6 40 2 36.4 2 32C2 28 4.8 24.6 8.6 24C8.2 22.8 8 21.4 8 20C8 12.8 13.6 7 20.8 6C28 5 34.6 9.6 36.4 16.4C37.4 16.2 38.6 16 40 16C46.6 16 52 21.4 52 28V28.2C57 29.2 61 33.6 61 39C61 39.4 60.8 39.8 60.8 40" stroke="rgba(255,255,255,0.9)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M32 38V22M32 22L24 30M32 22L40 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <p class="text-white/90 text-lg font-medium mb-1">{% trans %}Drag files here or click to upload{% endtrans %}</p>
                <p class="text-white/60 text-sm mb-4">{{ meta.desc }}</p>
                <span class="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-white hover:bg-gray-100 text-gray-700 font-semibold text-sm border border-gray-200 shadow-sm transition-all">
                    <i class="fa fa-folder-open"></i> {% trans %}Choose file{% endtrans %}
                </span>
                <p class="text-white/50 text-xs mt-3">
                    {% if meta.multi %}{% trans %}Multiple files supported{% endtrans %} &middot; {% endif %}{{ meta.accept }}
                </p>
            </div>
        </div>
    </div>

    <div id="workspace-section" class="hidden">
        <div class="border border-gray-200 dark:border-gray-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg slide-up" id="workspace">
            <div class="flex items-center gap-3 p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800" id="ws-header"></div>
            <div id="ws-options"></div>
            <div class="p-5" id="ws-body"></div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex items-center justify-between flex-wrap gap-3" id="ws-footer">
                <div class="flex items-center gap-2 flex-wrap" id="ws-footer-left"></div>
                <div class="flex items-center gap-2">
                    <button type="button" id="btn-reset" class="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-all">
                        <i class="fa fa-undo mr-1"></i> {% trans %}Reset{% endtrans %}
                    </button>
                    <button type="button" id="btn-add-more" class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-sm transition-all">
                        <i class="fa fa-plus mr-1"></i> {% trans %}Add More{% endtrans %}
                    </button>
                    <button type="button" id="btn-process" class="inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg bg-green-500 hover:bg-green-600 text-white font-semibold text-sm shadow-lg shadow-green-500/30 hover:shadow-xl transition-all duration-200" data-testid="button-process">
                        <i class="fa fa-bolt"></i> <span id="btn-process-text">{{ meta.title }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <input type="file" id="file-input-hidden" accept="{{ meta.accept }}" {{ "multiple" if meta.multi }} class="hidden" data-testid="input-file-hidden">

    <div id="processing-section" class="mt-8 hidden">
        <div class="border border-gray-200 dark:border-gray-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg">
            <div class="p-10 text-center">
                <div class="w-20 h-20 mx-auto bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center text-white text-3xl shadow-lg mb-4">
                    <i class="fa fa-cog fa-spin"></i>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white text-lg mb-1" id="processing-title">{% trans %}Processing...{% endtrans %}</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-3" id="processing-status">{% trans %}Initializing...{% endtrans %}</p>
                <div class="w-full max-w-md mx-auto h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <div class="h-full bg-gradient-to-r from-blue-500 to-green-500 rounded-full transition-all duration-300" id="progress-bar" style="width:0%"></div>
                </div>
                <p class="text-xs text-gray-400 mt-2" id="processing-details"></p>
                <div class="mt-4 text-sm text-gray-500 dark:text-gray-400" id="processing-timer">
                    <span class="processing-timer" id="timer-seconds">0</span> seconds elapsed
                </div>
            </div>
        </div>
    </div>

    <div id="result-section" class="mt-8 hidden">
        <div class="border border-gray-200 dark:border-gray-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg">
            <div class="flex items-center gap-3 p-4 bg-gradient-to-r from-green-500 to-green-600">
                <div class="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-white">
                    <i class="fa fa-check"></i>
                </div>
                <div class="flex-1">
                    <div class="font-semibold text-white" data-testid="text-result-title">{% trans %}Processing Complete!{% endtrans %}</div>
                    <div class="text-xs text-white/80">{% trans %}Download your processed files below.{% endtrans %}</div>
                </div>
            </div>
            <div class="p-5">
                <div id="result-files" class="space-y-3"></div>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex items-center justify-between flex-wrap gap-3">
                <button type="button" id="btn-start-over" class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 font-medium text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-all" data-testid="button-start-over">
                    <i class="fa fa-rotate-left"></i> {% trans %}Start Over{% endtrans %}
                </button>
                <div class="flex items-center gap-2">
                    <button type="button" id="btn-download-all" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-green-500 hover:bg-green-600 text-white font-semibold text-sm shadow-lg transition-all" data-testid="button-download-all">
                        <i class="fa fa-download"></i> {% trans %}Download All{% endtrans %}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="error-section" class="mt-8 hidden">
        <div class="border border-red-300 dark:border-red-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg">
            <div class="flex items-center gap-3 p-4 bg-gradient-to-r from-red-500 to-red-600">
                <div class="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-white">
                    <i class="fa fa-circle-exclamation"></i>
                </div>
                <div class="flex-1">
                    <div class="font-semibold text-white" data-testid="text-error-title">{% trans %}Something went wrong{% endtrans %}</div>
                    <div class="text-xs text-white/80" id="error-message"></div>
                </div>
            </div>
            <div class="p-5 text-center">
                <i class="fa fa-bug text-5xl text-red-500 mb-3"></i>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4" id="error-details"></p>
                <div class="flex gap-2 justify-center">
                    <button type="button" onclick="location.reload()" class="px-4 py-2 rounded-lg bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300 text-sm font-medium hover:bg-red-200 dark:hover:bg-red-900/60 transition-all" data-testid="button-try-again">
                        <i class="fa fa-rotate-left"></i> {% trans %}Try Again{% endtrans %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="zoom-modal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-[9999] hidden transition-opacity duration-300" style="opacity:0;">
    <div class="relative w-full h-full flex items-center justify-center">
        <button id="zoom-close" class="absolute top-5 right-5 w-12 h-12 rounded-full bg-white/20 border-2 border-white text-white hover:bg-white hover:text-black transition-all z-10">
            <i class="fa fa-times text-xl"></i>
        </button>
        <button id="zoom-prev" class="absolute left-5 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/20 border-2 border-white text-white hover:bg-white hover:text-black transition-all z-10 disabled:opacity-30 disabled:cursor-not-allowed">
            <i class="fa fa-chevron-left text-xl"></i>
        </button>
        <button id="zoom-next" class="absolute right-5 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/20 border-2 border-white text-white hover:bg-white hover:text-black transition-all z-10 disabled:opacity-30 disabled:cursor-not-allowed">
            <i class="fa fa-chevron-right text-xl"></i>
        </button>
        <button id="zoom-download" class="absolute bottom-5 right-5 w-12 h-12 rounded-full bg-green-500 border-2 border-white text-white hover:bg-green-600 transition-all z-10">
            <i class="fa fa-download text-xl"></i>
        </button>
        <div id="zoom-content" class="zoom-modal-content"></div>
        <div id="zoom-page-info" class="absolute bottom-5 left-1/2 -translate-x-1/2 bg-black/50 text-white px-4 py-2 rounded-full text-sm backdrop-blur-sm border border-white/20 flex gap-4">
            <span id="zoom-page-current">1</span> / <span id="zoom-page-total">1</span>
            <span class="mx-2">|</span>
            <span id="zoom-page-size"></span>
        </div>
    </div>
</div>

<div id="toast" class="fixed bottom-5 right-5 bg-gray-900 text-white px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-y-20 opacity-0 z-50 flex items-center gap-2">
    <i class="fa fa-check-circle text-green-400"></i>
    <span id="toast-message">{% trans %}Action completed{% endtrans %}</span>
</div>

<div id="confirm-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9998] hidden transition-opacity duration-300" style="opacity:0;">
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-2xl p-6 max-w-md w-full shadow-2xl">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4" id="confirm-title">{% trans %}Confirm Action{% endtrans %}</h3>
        <p class="text-gray-600 dark:text-gray-400 mb-6" id="confirm-message">{% trans %}Are you sure?{% endtrans %}</p>
        <div class="flex gap-3 justify-end">
            <button id="confirm-cancel" class="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all">{% trans %}Cancel{% endtrans %}</button>
            <button id="confirm-ok" class="px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white transition-all">{% trans %}Confirm{% endtrans %}</button>
        </div>
    </div>
</div>

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

{% block footer %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
<script src="{{ url_for('static', filename='js/pdf-tools-3.js') }}"></script>
{% endblock %}