<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scheduled Jobs</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.css') }}">
    <script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</head>
<body class="bg-gray-100 p-8">
    <div class="container mx-auto w-full max-w-full">
        <h1 class="text-3xl font-bold mb-4">Scheduled Jobs</h1>

        <!-- Conditionally show the add job form only if not in production -->
        {% if debug %}

        <div class="bg-yellow-500 text-white p-4 rounded-lg mb-4">
            <strong>Warning:</strong> The application is running in DEBUG mode.
        </div>

        <form hx-post="{{ url_for('jobs.joblist') }}" hx-target="#jobs-body" hx-swap="innerHTML" class="mb-4">
            <input type="text" name="name" placeholder="Job Name" class="border p-2 mr-2" required>
            <input type="number" name="interval" placeholder="Interval (seconds)" class="border p-2 mr-2" required>
            <button type="submit" class="bg-blue-500 text-white p-2 rounded">Add Job</button>
        </form>
        {% endif %}

        <table class="w-full max-w-full min-w-full bg-white shadow-md rounded-lg table-fixed">
            <thead>
                <tr>
                    <th class="w-2/6 px-6 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase">Job ID</th>
                    <th class="w-2-6 px-6 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase">Name</th>
                    <th class="w-1/6 px-6 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase">Interval</th>
                    <th class="w-1/6 px-6 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase">Next Run Time</th>
						        {% if debug %}
                    <th class="w-24 px-6 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase">Actions</th>
                    {% endif %}
                </tr>
            </thead>
            <tbody id="jobs-body">
                {% include "jobs_partial.html" %}
            </tbody>
        </table>
    </div>
</body>
</html>
