{% extends "djust_admin/base.html" %}

{% block breadcrumb_items %}
<span class="mx-2 text-gray-400">/</span>
<span class="text-gray-700">Progress</span>
{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">
            {% if action_label %}{{ action_label }}{% else %}Running action{% endif %}
        </h1>
    </div>

    {% if error %}
    <div class="mb-4 rounded-md bg-red-50 p-4 border border-red-200">
        <h3 class="text-sm font-medium text-red-800">Error</h3>
        <p class="mt-1 text-sm text-red-700">{{ error }}</p>
    </div>
    {% endif %}

    {% if cancelled %}
    <div class="mb-4 rounded-md bg-yellow-50 p-4 border border-yellow-200">
        <p class="text-sm text-yellow-800">Cancelled.</p>
    </div>
    {% elif done %}
    <div class="mb-4 rounded-md bg-green-50 p-4 border border-green-200">
        <p class="text-sm text-green-800">Done — processed {{ current }} of {{ total }} item(s).</p>
    </div>
    {% endif %}

    <div class="bg-white rounded-lg shadow p-6">
        <div class="mb-2 flex items-center justify-between">
            <span class="text-sm text-gray-700">{{ current }} / {{ total }}</span>
            <span class="text-sm text-gray-500">{{ percent }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
            <div class="h-3 bg-indigo-600 transition-all"
                 style="width: {{ percent }}%"></div>
        </div>

        {% if message %}
        <p class="mt-3 text-sm text-gray-700">{{ message }}</p>
        {% endif %}

        <div class="mt-6 flex gap-3">
            {% if not done %}
            <button type="button"
                    dj-click="cancel"
                    class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Cancel
            </button>
            {% endif %}
            {% if done and redirect_url %}
            <a href="{{ redirect_url }}"
               class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                Back to list
            </a>
            {% endif %}
        </div>
    </div>

    {% if log_lines %}
    <div class="mt-6 bg-white rounded-lg shadow">
        <div class="px-4 py-3 border-b border-gray-200">
            <h3 class="text-sm font-medium text-gray-900">Log</h3>
        </div>
        <ul class="divide-y divide-gray-100 max-h-80 overflow-y-auto">
            {% for line in log_lines %}
            <li class="px-4 py-2 text-sm text-gray-700">{{ line }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endblock %}