{% extends "base.html" %}
{% block title %}{{ algorithm_name }} {% trans %}Hash Result{% endtrans %} | OnlineConvert.cc{% endblock %}
{% block description %}{% trans algo=algorithm_name %}Your {{ algo }} hash has been generated successfully{% endtrans %}{% endblock %}

{% block head %}
{{ super() }}
<meta name="robots" content="noindex, nofollow">
<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; }
    
    /* Format badge styles */
    .format-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-left: 0.5rem;
    }
    .format-badge-hex { background: #e5e7eb; color: #374151; }
    .format-badge-uppercase { background: #ede9fe; color: #6d28d9; }
    .format-badge-colons { background: #fce7f3; color: #9d174d; }
    .format-badge-base64 { background: #fef3c7; color: #92400e; }
    .dark .format-badge-hex { background: #1f2937; color: #9ca3af; }
    .dark .format-badge-uppercase { background: #2e1065; color: #c4b5fd; }
    .dark .format-badge-colons { background: #831843; color: #fbcfe8; }
    .dark .format-badge-base64 { background: #78350f; color: #fde68a; }
    
    @media (max-width: 640px) {
        .hash-label {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
        .code-container {
            font-size: 0.75rem;
            padding: 0.75rem;
        }
    }
</style>
{% endblock %}

{% block content %}
{% set _oh_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 _oh_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 _oh_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 _oh_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 %}HASH RESULT{% 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>{{ algorithm_name }} {% trans %}Generated{% endtrans %}
            </h1>
            <p class="text-lg text-white/90 max-w-2xl leading-relaxed">{% trans %}Your hash has been computed successfully. Copy the results below.{% endtrans %}</p>
        </div>
    </div>
</section>

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

    {% if error and error.message %}
    <div class="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 mb-6 slide-up">
        <i class="fa fa-circle-exclamation text-lg"></i>
        <span>{{ error.message }}</span>
    </div>
    {% endif %}

    {% if results2 and results2|length > 0 %}
    <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-emerald-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 %}Hash Generated Successfully!{% endtrans %}</div>
                <div class="text-xs text-white/80">{{ algorithm_name }} &middot; Multiple formats available</div>
            </div>
        </div>

        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for result in results2 %}
                {% set parts = result.split(': ', 1) %}
                {% set full_label = parts[0] %}
                {% set hash_value = parts[1] if parts|length > 1 else parts[0] %}
                
                {# Parse input source and format type #}
                {% if '(' in full_label %}
                    {% set input_source = full_label.split(' (')[0] %}
                    {% set format_type = full_label.split(' (')[1]|replace(')', '') %}
                {% else %}
                    {% set input_source = full_label %}
                    {% set format_type = 'original' %}
                {% endif %}
                
                <div class="p-6">
                    <div class="flex items-center justify-between mb-3 hash-label">
                        <div class="flex items-center gap-2">
                            {# Icon based on input source #}
                            {% if 'Text input' in input_source %}
                            <div class="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center">
                                <i class="fa fa-keyboard text-blue-500 text-sm"></i>
                            </div>
                            {% else %}
                            <div class="w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
                                <i class="fa fa-file text-amber-500 text-sm"></i>
                            </div>
                            {% endif %}
                            
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ input_source }}</span>
                            
                            {# Format badge #}
                            {% if format_type == 'original' %}
                                <span class="format-badge format-badge-hex">HEX</span>
                            {% elif format_type == 'HEX uppercase' %}
                                <span class="format-badge format-badge-uppercase">{% trans %}UPPERCASE{% endtrans %}</span>
                            {% elif format_type == 'HEX with colons' %}
                                <span class="format-badge format-badge-colons">{% trans %}COLONS{% endtrans %}</span>
                            {% elif format_type == 'Base64' %}
                                <span class="format-badge format-badge-base64">{% trans %}BASE64{% endtrans %}</span>
                            {% endif %}
                        </div>
                        <span class="text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded font-mono uppercase">{{ algorithm_name }}</span>
                    </div>
                    
                    <div class="relative group">
                        <div class="bg-gray-900 dark:bg-gray-800 rounded-xl p-4 pr-14 code-container">
                            <code class="text-sm font-mono text-green-400 break-all leading-relaxed select-all" 
                                  id="hash-value-{{ loop.index }}">{{ hash_value }}</code>
                        </div>
                        <button type="button" 
                                class="copy-btn absolute top-3 right-3 w-9 h-9 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white flex items-center justify-center transition-all opacity-0 group-hover:opacity-100"
                                data-hash="{{ hash_value }}" 
                                data-label="{{ full_label }}"
                                data-index="{{ loop.index }}"
                                title="{% trans %}Copy to clipboard{% endtrans %}">
                            <i class="fa fa-copy text-sm"></i>
                        </button>
                    </div>
                </div>
            {% endfor %}
        </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() }}" 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 %}Hash Another{% endtrans %}
            </a>
            <button type="button" id="btn-copy-all" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300 font-medium text-sm hover:bg-green-200 dark:hover:bg-green-900/60 transition-all">
                <i class="fa fa-copy"></i> {% trans %}Copy All{% endtrans %}
            </button>
        </div>
    </div>
    {% else %}
    <div class="border border-gray-200 dark:border-gray-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg slide-up p-10 text-center">
        <div class="w-16 h-16 mx-auto bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center text-gray-400 text-2xl mb-4">
            <i class="fa fa-hashtag"></i>
        </div>
        <h3 class="font-semibold text-gray-900 dark:text-white mb-2">{% trans %}No Results{% endtrans %}</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{% trans %}No hash results were generated. Please try again.{% endtrans %}</p>
        <a href="{{ full_url('/convert/hash/' + algorithm) }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 text-white font-semibold text-sm shadow-lg hover:shadow-xl transition-all duration-300">
            <i class="fa fa-rotate-left"></i> {% trans %}Try Again{% endtrans %}
        </a>
    </div>
    {% endif %}

    <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-green-500 to-emerald-600 rounded-xl flex items-center justify-center text-white text-xl mb-3">
                <i class="fa fa-hashtag"></i>
            </div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-1 text-sm">{{ algorithm_name }}</h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Hash Algorithm{% 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-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl mb-3">
                <i class="fa fa-key"></i>
            </div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-1 text-sm">
                {% if supports_hmac %}
                    {% trans %}HMAC Supported{% endtrans %}
                {% elif supports_salt %}
                    {% trans %}Salt Supported{% endtrans %}
                {% else %}
                    {% trans %}Standard Hash{% endtrans %}
                {% endif %}
            </h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Authentication{% 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-purple-500 to-purple-600 rounded-xl flex items-center justify-center text-white text-xl mb-3">
                <i class="fa fa-shield-halved"></i>
            </div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-1 text-sm">{% trans %}Secure{% endtrans %}</h4>
            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Server-side processing{% 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 %}Copied to clipboard{% endtrans %}</span>
</div>
{% endblock %}

{% block footer %}
{{ super() }}
<script>
jQuery(function($){
    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);
    }

    function copyText(text, btnEl){
        if(navigator.clipboard){
            navigator.clipboard.writeText(text).then(function(){
                showCopyFeedback(btnEl);
                showToast("{% trans %}Copied to clipboard{% endtrans %}");
            });
        } else {
            var ta = document.createElement('textarea');
            ta.value = text;
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy');
            document.body.removeChild(ta);
            showCopyFeedback(btnEl);
            showToast("{% trans %}Copied to clipboard{% endtrans %}");
        }
    }

    function showCopyFeedback(btnEl){
        if(!btnEl) return;
        var icon = btnEl.querySelector('i');
        if(icon){
            var originalClass = icon.className;
            icon.className = 'fa fa-check text-sm text-green-400';
            setTimeout(function(){
                icon.className = originalClass;
            }, 2000);
        }
    }

    $(document).on('click', '.copy-btn', function(){
        var hash = $(this).data('hash');
        copyText(hash, this);
    });

    $('#btn-copy-all').on('click', function(){
        var all = [];
        $('.copy-btn').each(function(){
            var container = $(this).closest('.p-6');
            var label = container.find('.text-sm.font-medium').text().trim();
            var formatBadge = container.find('.format-badge').text().trim();
            var hash = $(this).data('hash');
            
            if(formatBadge) {
                all.push(`${label} (${formatBadge}): ${hash}`);
            } else {
                all.push(`${label}: ${hash}`);
            }
        });
        copyText(all.join('\n\n'), this);
    });
});
</script>
{% endblock %}

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