{% extends "base.html" %}
{% block title %}{% trans %}Screenshot Result{% endtrans %} | OnlineConvert.cc{% endblock %}
{% block description %}{% trans %}Your website screenshot is ready to download{% endtrans %}{% endblock %}

{% block head %}
{{ super() }}
<style>
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes bounceIn {
        0% { transform: scale(0.3); opacity: 0; }
        50% { transform: scale(1.05); }
        70% { transform: scale(0.95); }
        100% { transform: scale(1); opacity: 1; }
    }
    .fade-in { animation: fadeIn 0.3s ease-out; }
    .slide-up { animation: slideUp 0.5s ease-out; }
    .bounce-in { animation: bounceIn 0.6s ease-out; }
    .screenshot-preview { transition: all 0.3s ease; }
    .screenshot-preview:hover { transform: scale(1.02); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.25); }
</style>
{% endblock %}

{% block content %}
{% set _rs_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 _rs_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 _rs_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>
{% elif _rs_hero_type == '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-20 relative z-10">
        <div class="max-w-3xl animate-slide-up">
            <div class="flex items-center gap-3 mb-4">
                <span class="tool-badge">{% trans %}SCREENSHOT{% endtrans %}</span>
            </div>
            <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">
                <i class="fa fa-check-circle mr-2 text-green-300"></i>{% trans %}Screenshot Result{% endtrans %}
            </h1>
            <p class="text-lg text-white/90 max-w-2xl leading-relaxed">{% trans %}Your website screenshot is ready. Preview and download below.{% endtrans %}</p>
        </div>
    </div>
</section>

<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="border border-gray-200 dark:border-gray-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg slide-up">
        <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 bounce-in">
                <i class="fa fa-check text-xl"></i>
            </div>
            <div class="flex-1">
                <div class="font-semibold text-white">{% trans %}Screenshot Complete!{% endtrans %}</div>
                <div class="text-xs text-white/80">{% trans %}Your screenshot has been captured successfully{% endtrans %}</div>
            </div>
        </div>

        <div class="p-6">
            <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 mb-6">
                <div class="mb-4">
                    {% set fname = screenshot_path.split('/')[-1] %}
                    {% set fext = fname.rsplit('.', 1)[-1]|lower if '.' in fname else 'png' %}
                    {% if fext == 'pdf' %}
                    <div class="rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <iframe src="{{ screenshot_path }}" class="w-full border-0" style="height:80vh;" title="{% trans %}PDF Screenshot Preview{% endtrans %}"></iframe>
                    </div>
                    <div class="text-center mt-3">
                        <a href="{{ screenshot_path }}" target="_blank" class="text-sm text-blue-500 hover:text-blue-600 hover:underline">
                            <i class="fa fa-external-link mr-1"></i>{% trans %}Open PDF in new tab{% endtrans %}
                        </a>
                    </div>
                    {% else %}
                    <div class="rounded-xl border border-gray-200 dark:border-gray-700 overflow-y-auto" style="max-height:80vh;">
                        <a href="{{ screenshot_path }}" target="_blank" class="block">
                            <img src="{{ screenshot_path }}" alt="{% trans %}Website Screenshot{% endtrans %}"
                                class="screenshot-preview w-full rounded-xl cursor-pointer"
                                id="screenshot-image">
                        </a>
                    </div>
                    {% endif %}
                </div>
                <div class="flex items-center justify-center gap-6 text-sm text-gray-500 dark:text-gray-400">
                    <span class="flex items-center gap-1">
                        {% if fext == 'pdf' %}
                        <i class="fa fa-file-pdf text-red-500"></i>
                        {% elif fext == 'jpg' or fext == 'jpeg' %}
                        <i class="fa fa-file-image text-amber-500"></i>
                        {% elif fext == 'tiff' or fext == 'tif' %}
                        <i class="fa fa-file-image text-purple-500"></i>
                        {% else %}
                        <i class="fa fa-file-image text-blue-500"></i>
                        {% endif %}
                        <span id="file-name">{{ fname }}</span>
                        <span class="ml-1 px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-xs font-mono uppercase">{{ fext }}</span>
                    </span>
                    {% if fext != 'pdf' %}
                    <span class="flex items-center gap-1" id="image-dimensions" style="display:none;">
                        <i class="fa fa-expand text-green-500"></i>
                        <span id="dim-text"></span>
                    </span>
                    {% endif %}
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <a href="{{ screenshot_path }}" download="{{ fname }}" class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold text-sm shadow-lg hover:shadow-xl transition-all duration-300">
                    <i class="fa fa-download"></i> {% trans %}Download{% endtrans %} {{ fext|upper }}
                </a>
                <a href="{{ screenshot_path }}" target="_blank" class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold text-sm shadow-lg hover:shadow-xl transition-all duration-300">
                    {% if fext == 'pdf' %}
                    <i class="fa fa-file-pdf"></i> {% trans %}Open PDF{% endtrans %}
                    {% else %}
                    <i class="fa fa-expand"></i> {% trans %}View Full Size{% endtrans %}
                    {% endif %}
                </a>
            </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">
            <a href="{{ full_url('/screenshot') }}" class="inline-flex items-center gap-2 px-5 py-2.5 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">
                <i class="fa fa-rotate-left"></i> {% trans %}Take Another Screenshot{% endtrans %}
            </a>
            <div class="flex items-center gap-2">
                <button type="button" id="btn-copy-link" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300 text-sm font-medium hover:bg-purple-200 dark:hover:bg-purple-900/60 transition-all">
                    <i class="fa fa-link"></i> {% trans %}Copy Link{% endtrans %}
                </button>
            </div>
        </div>
    </div>

    <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5 shadow-sm text-center slide-up" style="animation-delay:0.1s;">
            <div class="w-12 h-12 mx-auto bg-gradient-to-r from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white text-xl mb-3">
                <i class="fa fa-file-pdf"></i>
            </div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-1 text-sm">{% trans %}Save as PDF{% endtrans %}</h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Convert your screenshot to PDF format{% endtrans %}</p>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5 shadow-sm text-center slide-up" style="animation-delay:0.2s;">
            <div class="w-12 h-12 mx-auto bg-gradient-to-r from-amber-500 to-orange-500 rounded-xl flex items-center justify-center text-white text-xl mb-3">
                <i class="fa fa-image"></i>
            </div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-1 text-sm">{% trans %}Multiple Formats{% endtrans %}</h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Export as PNG, JPG, PDF or TIFF{% endtrans %}</p>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5 shadow-sm text-center slide-up" style="animation-delay:0.3s;">
            <div class="w-12 h-12 mx-auto bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl mb-3">
                <i class="fa fa-desktop"></i>
            </div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-1 text-sm">{% trans %}Custom Resolution{% endtrans %}</h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Set width, height and zoom level{% endtrans %}</p>
        </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>
{% endblock %}

{% block footer %}
{{ super() }}
<script>
jQuery(function ($) {
    var img = $("#screenshot-image");
    if (img.length) {
        img.on("load", function () {
            var w = this.naturalWidth;
            var h = this.naturalHeight;
            if (w && h) {
                $("#dim-text").text(w + " \u00d7 " + h + " px");
                $("#image-dimensions").show();
            }
        });
        if (img[0].complete && img[0].naturalWidth) {
            img.trigger("load");
        }
    }

    $("#btn-copy-link").on("click", function () {
        var url = window.location.origin + "{{ screenshot_path }}";
        if (navigator.clipboard) {
            navigator.clipboard.writeText(url).then(function () {
                showToast("{% trans %}Link copied to clipboard{% endtrans %}");
            });
        } else {
            var ta = document.createElement("textarea");
            ta.value = url;
            document.body.appendChild(ta);
            ta.select();
            document.execCommand("copy");
            document.body.removeChild(ta);
            showToast("{% trans %}Link copied to clipboard{% endtrans %}");
        }
    });

    function showToast(msg) {
        var toast = $("#toast");
        $("#toast-message").text(msg);
        toast.removeClass("translate-y-20 opacity-0");
        setTimeout(function () {
            toast.addClass("translate-y-20 opacity-0");
        }, 3000);
    }
});
</script>
{% endblock %}