<!DOCTYPE html>
<html>
<head>
    <title>Next Task</title>
    <style>
        .task-container { margin: 20px; padding: 15px; border: 1px solid #ddd; }
        .task-actions { margin-top: 10px; }
        button { margin-right: 5px; }
    </style>
</head>
<body>
    <div class="task-container">
        <h2>Task ID: {{ task_id }}</h2>
        <pre>{{ task_data }}</pre>
        <div class="task-actions">
            <button onclick="processTask('approve')">Approve</button>
            <button onclick="processTask('reject')">Reject</button>
            <button onclick="processTask('defer')">Defer</button>
        </div>
    </div>

    <script>
        async function processTask(action) {
            const response = await fetch(`/tasks/{{ task_id }}/process`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Client-Cert-User': '{{ user }}',
                    'X-Client-Cert-Role': '{{ role }}'
                },
                body: JSON.stringify({ action })
            });
            const result = await response.json();
            alert(result.status || result.error);
            if (result.status === 'success') {
                window.location.reload();
            }
        }
    </script>
</body>
</html>