{% if vms %}
<div class="overflow-x-auto">
    <table class="min-w-full bg-table border border-dark">
        <thead class="bg-light">
            <tr>
                <th class="px-6 py-3 border-b border-card text-left text-xs font-medium text-description uppercase tracking-wider">
                    VM Name
                </th>
                <th class="px-6 py-3 border-b border-card text-left text-xs font-medium text-description uppercase tracking-wider">
                    Status
                </th>
                <th class="px-6 py-3 border-b border-card text-left text-xs font-medium text-description uppercase tracking-wider">
                    Location
                </th>
                <th class="px-6 py-3 border-b border-card text-left text-xs font-medium text-description uppercase tracking-wider">
                    Size
                </th>
                <th class="px-6 py-3 border-b border-card text-left text-xs font-medium text-description uppercase tracking-wider">
                    Public IP
                </th>
                <th class="px-6 py-3 border-b border-card text-left text-xs font-medium text-description uppercase tracking-wider">
                    Submission ID
                </th>
                <th class="px-6 py-3 border-b border-card text-left text-xs font-medium text-description uppercase tracking-wider">
                    Actions
                </th>
            </tr>
        </thead>
        <tbody class="bg-table divide-y divide-dark">
            {% for vm in vms %}
            <tr class="hover:bg-table-hover">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-heading">
                    {{ vm.name }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-description">
                    <span class="badge
                        {% if vm.power_state == 'running' %}
                            badge-finished
                        {% elif vm.power_state == 'stopped' or vm.power_state == 'deallocated' %}
                            badge-error
                        {% elif vm.power_state == 'starting' %}
                            badge-running
                        {% else %}
                            badge-gray
                        {% endif %}">
                        {{ vm.power_state | title }}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-description">
                    {{ vm.location or 'N/A' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-description">
                    {{ vm.vm_size or 'N/A' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-description">
                    {% if vm.public_ip %}
                        <code class="bg-code px-2 py-1 rounded text-xs">{{ vm.public_ip }}</code>
                    {% else %}
                        N/A
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-description">
                    {% if vm.submission_id %}
                        <a href="/submissions" class="link-info hover:underline">{{ vm.submission_id }}</a>
                    {% else %}
                        N/A
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button
                        data-auth-required
                        onclick="deleteVM('{{ vm.name }}')"
                        class="btn-danger text-xs">
                        Delete
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center py-8">
    <div class="text-muted text-6xl mb-4">🖥️</div>
    <h3 class="text-lg font-medium text-heading mb-2">No VMs Found</h3>
    <p class="text-description">No virtual machines are currently running in this resource group.</p>
</div>
{% endif %}

<script>
function deleteVM(vmName) {
    if (confirm(`Are you sure you want to delete VM "${vmName}"? This action cannot be undone.`)) {
        fetch(`{{ API_BASE_URL }}/api/vms/${vmName}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.message) {
                alert(data.message);
                // Refresh the VM list
                htmx.trigger("#vms-list", "load");
            } else if (data.error) {
                alert(`Error: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while deleting the VM');
        });
    }
}
</script>