<!DOCTYPE html>
<html>

<head>
    <title>SPP Marketplace</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 py-10">
    <div class="container mx-auto">
        <h1 class="text-3xl font-bold mb-10">Smallest Possible Product (SPP) Platform</h1>

        <h2 class="text-xl font-semibold mb-4">Available SPPs</h2>
        <ul class="bg-white shadow rounded p-4 mb-10">
            {% for spp in spps %}
            <li class="border-b last:border-b-0 pb-2 pt-2 flex justify-between">
                {{ spp.name }}
                <form action="/run/{{ spp.id }}" method="post">
                    <button type="submit" class="text-white bg-blue-500 rounded px-4 py-1">Run</button>
                </form>
            </li>
            {% endfor %}
        </ul>

        <h2 class="text-xl font-semibold mb-4">Running SPPs</h2>
        <ul class="bg-white shadow rounded p-4">
            {% for spp in running_spps %}
            <li class="border-b last:border-b-0 pb-2 pt-2 flex justify-between">
                {{ spp.name }} (Container ID: {{ spp.id }})
                <a href="javascript:void(0);" onclick="viewLogs('{{ spp.id }}')"
                    class="text-blue-500 hover:underline">View Logs</a>
            </li>
            {% endfor %}
        </ul>
    </div>


    <script>
        function runSPP(sppId) {
            fetch(`/run/${sppId}`, { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Error: ' + data.error);
                    } else {
                        alert(data.message);
                        location.reload();  // Reload the page to update the list of running SPPs
                    }
                });
        }
        function viewLogs(containerId) {
            fetch(`/logs/${containerId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Error: ' + data.error);
                    } else {
                        alert('Logs for container ' + containerId + ':\n\n' + data.logs);
                    }
                });
        }
    </script>
</body>

</html>