{% extends "base.html" %}
{% block title %} {% trans %}Home{% endtrans %}{% endblock %}
{% block head %}
{{ super() }}
<style>
    @keyframes sk-stretchdelay {
        0%, 40%, 100% { transform: scaleY(0.4); }
        20% { transform: scaleY(1.0); }
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    {% if job.is_finished %}
        {% if job.result.error %}
        <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>
            <button onclick="window.history.back()" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-yellow-500 hover:bg-yellow-600 text-white font-medium transition-all">
                <i class="fa fa-arrow-left"></i> {% trans %}Go Back{% endtrans %}
            </button>
        </div>
        {% else %}
        <div class="mb-6">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{% trans %}Generation Completed!{% endtrans %}</h2>
        </div>

        <div class="flex flex-col lg:flex-row gap-8">
            <div class="flex-1 min-w-0">
                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-center text-sm">{% trans %}Your generated hash{% endtrans %}</h3>
                    </div>
                    {% for file_url in job.result.results2 %}
                    <div class="px-6 py-3 border-b border-gray-50 dark:border-gray-800/50 last:border-0">
                        <p class="text-sm text-gray-700 dark:text-gray-300 font-mono break-all">{{ file_url }}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="w-full lg:w-72 flex-shrink-0 text-center">
                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 transition-theme">
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}Ad Space{% endtrans %}</p>
                </div>
            </div>
        </div>
        {% endif %}
    {% else %}
    <div class="mb-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-3">
            <i class="fa fa-cog fa-spin text-primary dark:text-primary-light"></i>
            {% trans %}Your files are creating Hash, please wait..{% endtrans %}
        </h2>
        <p id="status" class="text-gray-500 dark:text-gray-400">{% trans %}Waiting to initiate a process{% endtrans %}</p>
    </div>

    <div class="flex flex-col lg:flex-row gap-8">
        <div class="flex-1 min-w-0">
            <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800">
                    <h3 class="font-semibold text-gray-900 dark:text-white">{% trans %}Please Wait ...{% endtrans %}</h3>
                </div>
                <div class="p-8 flex justify-center">
                    <div class="flex items-end gap-1 h-10">
                        <div class="w-1.5 bg-primary dark:bg-primary-light rounded-full" style="animation: sk-stretchdelay 1.2s ease-in-out infinite; height: 100%;"></div>
                        <div class="w-1.5 bg-primary/90 dark:bg-primary-light/90 rounded-full" style="animation: sk-stretchdelay 1.2s ease-in-out -1.1s infinite; height: 100%;"></div>
                        <div class="w-1.5 bg-primary/80 dark:bg-primary-light/80 rounded-full" style="animation: sk-stretchdelay 1.2s ease-in-out -1.0s infinite; height: 100%;"></div>
                        <div class="w-1.5 bg-primary/70 dark:bg-primary-light/70 rounded-full" style="animation: sk-stretchdelay 1.2s ease-in-out -0.9s infinite; height: 100%;"></div>
                        <div class="w-1.5 bg-accent dark:bg-accent-light rounded-full" style="animation: sk-stretchdelay 1.2s ease-in-out -0.8s infinite; height: 100%;"></div>
                        <div class="w-1.5 bg-accent/80 dark:bg-accent-light/80 rounded-full" style="animation: sk-stretchdelay 1.2s ease-in-out -0.7s infinite; height: 100%;"></div>
                        <div class="w-1.5 bg-accent/60 dark:bg-accent-light/60 rounded-full" style="animation: sk-stretchdelay 1.2s ease-in-out -0.6s infinite; height: 100%;"></div>
                        <div class="w-1.5 bg-accent/40 dark:bg-accent-light/40 rounded-full" style="animation: sk-stretchdelay 1.2s ease-in-out -0.5s infinite; height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-72 flex-shrink-0 text-center">
            <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 transition-theme">
                <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}Ad Space{% endtrans %}</p>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block footer %}
    {{super()}}
    {% if job.is_finished is sameas false %}
    <script>
        setInterval(function(){
            $.get("/job/status/{{job_id}}", function(response){
                if(response.is_started)
                    $("#status").text("Your files are creating Hash, please wait..");
                if(response.is_queued)
                    $("#status").text("Files are in queue, be patient");
                if(response.is_finished){
                    $("#status").text("Hash generate completed.");
                    window.location.reload();
                }
            });
        }, 1000)
    </script>
    {% endif %}
{% endblock %}