<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agent List</title>
    {{template "views/partials/header"}}
    <style>
        .button-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 8px; /* Adjusts the spacing to your liking */
        }
    </style>
</head>
<body class="bg-gray-900 p-4 text-white font-sans">
    {{template "views/partials/menu"}}
    <div class="max-w-6xl mx-auto">
        <header class="text-center mb-8">
            <h1 class="text-3xl md:text-5xl font-bold">Smart Agent List</h1>
        </header>
        <div class="button-container">
            <a href="/create" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
                Add New Agent
            </a>
        </div>
        <section class="flex flex-col">
            <div class="overflow-x-auto">
                <div class="py-2 align-middle inline-block min-w-full">
                    <div class="shadow overflow-hidden border-b border-gray-700 rounded-lg">
                        <table class="min-w-full divide-y divide-gray-700">
                            <thead class="bg-gray-700">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                                        Name
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                                        Status
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-center">
                                        <span class="sr-only">Talk</span>
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-center">
                                        <span class="sr-only">Start</span>
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-center">
                                        <span class="sr-only">Stop</span>
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-center">
                                        <span class="sr-only">Settings</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-gray-800 divide-y divide-gray-700">
                                <!-- Dynamic agent rows go here -->
                                {{ $status := .Status }}
                                {{ range .Agents }}
                                <tr hx-ext="sse">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">{{.}}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                                        Online: {{ index $status . }}
                                        <a href="/status/{{.}}" class="text-indigo-500 hover:text-indigo-400">
                                            <i class="fas fa-info"></i> Status
                                        </a>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                                        <a href="/talk/{{.}}" class="text-indigo-500 hover:text-indigo-400">
                                            <i class="fas fa-comments"></i> Talk
                                        </a>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                                        <button hx-put="/start/{{.}}">
                                            Start
                                        </button>                                          
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                                        <button hx-put="/pause/{{.}}">
                                            Pause
                                        </button>    
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                                        <a href="/settings/{{.}}" class="text-indigo-500 hover:text-indigo-400">
                                            <i class="fas fa-cog"></i> Settings
                                        </a>
                                    </td>
                                </tr>
                                {{ end }}
                                <!-- Repeat for each agent -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
            <footer class="mt-8 text-center">
             

        <!-- File Upload Form -->
        <div class="section-box">
            <form id='form' hx-encoding='multipart/form-data' hx-post='/settings/import'>
                <h2>Import</h2>
                <label for="file">File:</label>
                <input type='file' name='file' id='file'>
                <button type="submit">Upload File</button>
                <progress id='progress' value='0' max='100'></progress>
            </form>
        </div>
        
            </footer>
        </div>
    </body>
</html>
