{% if not jobs %}
    <div class="text-gray-500 dark:text-gray-400 text-sm">
        No upcoming scheduled backups
    </div>
{% else %}
    {% for job in jobs %}
        <div class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg mb-3 bg-white dark:bg-gray-800">
            <div>
                <div class="font-medium text-gray-900 dark:text-gray-100">
                    {{ job.name or 'Unknown' }}
                </div>
                <div class="text-sm text-gray-600 dark:text-gray-300">
                    <span class="font-medium">Next run:</span> {{ job.next_run | format_datetime_browser("%m/%d/%Y, %I:%M:%S %p", browser_tz_offset) if job.next_run else job.next_run_display }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                    <span class="font-medium">Time until:</span> {{ job.time_until }}
                </div>
            </div>
            <div class="text-right">
                <div class="text-sm text-gray-500 dark:text-gray-400 font-medium">
                    {{ job.cron_description }}
                </div>
            </div>
        </div>
    {% endfor %}
{% endif %}