{% if jobs %}
    <div class="space-y-3">
    {% for job in jobs %}
        <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="space-y-1">
                    <p class="text-sm font-semibold text-gray-900 dark:text-white">
                        {{ job.server.name if job.server else _('Unknown Server') }}
                        <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-300">
                            {{ (job.server.server_type|title) if job.server else '' }}
                        </span>
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-300">
                        {{ _('Range') }}: {{ job.days_back }} {{ _('days') }}
                        • {{ _('Limit') }}: {{ job.max_results if job.max_results else _('Unlimited') }}
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-300">
                        {{ _('Started') }}: {{ job.created_at|local_date('%Y-%m-%d %H:%M') }}
                    </p>
                    {% if job.finished_at %}
                        <p class="text-xs text-gray-500 dark:text-gray-300">
                            {{ _('Finished') }}: {{ job.finished_at|local_date('%Y-%m-%d %H:%M') }}
                        </p>
                    {% endif %}
                </div>
                <div class="flex items-start gap-3">
                    <div class="text-right">
                        {% set status_classes = {
                            'queued': 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200',
                            'running': 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200',
                            'completed': 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200',
                            'failed': 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200'
                        } %}
                        <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold {{ status_classes.get(job.status, 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200') }}">
                            {{ job.status_label }}
                        </span>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">
                            {{ _('Processed') }}: {{ job.total_processed }} / {{ job.total_fetched }}
                        </p>
                        <p class="text-xs text-gray-500 dark:text-gray-300">
                            {{ _('Stored') }}: {{ job.total_stored }}
                        </p>
                    </div>
                    {% if not job.is_active %}
                        <form
                            hx-post="{{ url_for('activity.delete_historical_job', job_id=job.id) }}"
                            hx-target="#historical-jobs-container"
                            hx-swap="innerHTML"
                            class="mt-0"
                        >
                            <input type="hidden" name="server_id" value="{{ selected_server_id or '' }}">
                            <button type="submit"
                                    title="{{ _('Remove job') }}"
                                    class="h-8 w-8 inline-flex items-center justify-center rounded-md text-white bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 transition-colors">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M10 11v6" />
                                    <path d="M14 11v6" />
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                                    <path d="M3 6h18" />
                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                                </svg>
                            </button>
                        </form>
                    {% endif %}
                </div>
            </div>

            {% if job.is_active %}
                <div class="mt-3">
                    <div class="h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                        <div class="h-full bg-blue-500 dark:bg-blue-400" style="width: {{ job.progress_percent }}%"></div>
                    </div>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
                        {{ _('Import in progress…') }} ({{ job.progress_percent }}%)
                    </p>
                </div>
            {% elif job.error_message %}
                <p class="mt-3 text-xs text-red-600 dark:text-red-300">
                    {{ job.error_message }}
                </p>
            {% endif %}
        </div>
    {% endfor %}
    </div>
{% else %}
    <div class="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 p-4 text-sm text-gray-500 dark:text-gray-300">
        {{ _('No historical import jobs yet.') }}
    </div>
{% endif %}