{% extends "base.html" %}

{% block title %}Profiles{% endblock %}

{% block content %}
<div class="mx-auto">
    <!-- Header -->
    <div class="card card-header mb-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold text-heading">Profiles</h2>
            <div class="space-x-3">
                <a href="/profiles/create" class="btn btn-primary" data-auth-required>
                    Create New Profile
                </a>
                <button 
                    onclick="htmx.ajax('GET', '/templates/profiles', {target: '#profiles-list', swap: 'innerHTML'})"
                    class="btn btn-secondary">
                    Refresh
                </button>
            </div>
        </div>
        
        <!-- Profiles List -->
        <div id="loading-indicator" class="htmx-indicator">
            <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 spinner-border"></div>
            <span class="ml-2 text-sm text-secondary">Refreshing...</span>
        </div>
        <div id="profiles-list" 
             hx-get="/templates/profiles" 
             hx-trigger="load, every 10s"
             hx-swap="innerHTML swap:300ms"
             hx-indicator="#loading-indicator">
            <div class="text-center py-8">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 spinner-border"></div>
                <p class="mt-2 text-secondary">Loading profiles...</p>
            </div>
        </div>
    </div>

</div>

<script>
// Add CSS for loading indicator
const style = document.createElement('style');
style.textContent = `
    .htmx-indicator {
        opacity: 0;
        transition: opacity 200ms ease-in;
    }
    .htmx-request .htmx-indicator {
        opacity: 1;
    }
    .htmx-request.htmx-indicator {
        opacity: 1;
    }
`;
document.head.appendChild(style);

function deleteProfile(profileId, profileName) {
    if (confirm(`Are you sure you want to delete profile "${profileName}"?`)) {
        fetch(`/api/profiles/${profileId}/delete`, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert('Error: ' + data.error);
            } else {
                // Show success message briefly
                const tempMsg = document.createElement('div');
                tempMsg.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
                tempMsg.textContent = 'Profile deleted successfully!';
                document.body.appendChild(tempMsg);
                
                // Remove message after 2 seconds
                setTimeout(() => {
                    document.body.removeChild(tempMsg);
                }, 2000);
                
                // Refresh the profiles list immediately
                htmx.ajax('GET', '/templates/profiles', {target: '#profiles-list', swap: 'innerHTML'});
            }
        })
        .catch(error => {
            alert('Error: ' + error);
        });
    }
}

function releaseLock(profileId, profileName) {
    if (confirm(`Are you sure you want to release the lock for profile "${profileName}"?`)) {
        fetch(`/api/profiles/${profileId}/release_lock`, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert('Error: ' + data.error);
            } else {
                // Show success message briefly
                const tempMsg = document.createElement('div');
                tempMsg.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
                tempMsg.textContent = data.message || 'Lock released successfully!';
                document.body.appendChild(tempMsg);
                
                // Remove message after 2 seconds
                setTimeout(() => {
                    document.body.removeChild(tempMsg);
                }, 2000);
                
                // Refresh the profiles list immediately to update status
                htmx.ajax('GET', '/templates/profiles', {target: '#profiles-list', swap: 'innerHTML'});
            }
        })
        .catch(error => {
            alert('Error: ' + error);
        });
    }
}

function rebootProfile(profileId, profileName) {
    if (confirm(`Are you sure you want to reboot the VM for profile "${profileName}"?`)) {
        fetch(`/api/profiles/${profileId}/reboot`, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.error || data.detail) {
                alert('Error: ' + (data.error || data.detail));
            } else {
                // Show success message briefly
                const tempMsg = document.createElement('div');
                tempMsg.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
                tempMsg.textContent = data.message || 'VM reboot initiated!';
                document.body.appendChild(tempMsg);
                
                // Remove message after 3 seconds
                setTimeout(() => {
                    document.body.removeChild(tempMsg);
                }, 3000);
                
                // Refresh the profiles list after a delay to show updated status
                setTimeout(() => {
                    htmx.ajax('GET', '/templates/profiles', {target: '#profiles-list', swap: 'innerHTML'});
                }, 1000);
            }
        })
        .catch(error => {
            alert('Error: ' + error);
        });
    }
}

function revertProfile(profileId, profileName) {
    if (confirm(`Are you sure you want to revert the VM to snapshot for profile "${profileName}"?\n\nThis will:\n1. Stop the VM\n2. Revert to the configured snapshot\n3. Start the VM again`)) {
        // Show processing message
        const processingMsg = document.createElement('div');
        processingMsg.id = 'revert-processing-msg';
        processingMsg.className = 'fixed top-4 right-4 processing-box px-4 py-3 rounded z-50';
        processingMsg.innerHTML = '<div class="flex items-center"><div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 spinner-border mr-2"></div>Reverting VM... This may take a minute.</div>';
        document.body.appendChild(processingMsg);
        
        fetch(`/api/profiles/${profileId}/revert`, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            // Remove processing message
            const msg = document.getElementById('revert-processing-msg');
            if (msg) document.body.removeChild(msg);
            
            if (data.error || data.detail) {
                alert('Error: ' + (data.error || data.detail));
            } else {
                // Show success message
                const tempMsg = document.createElement('div');
                tempMsg.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
                tempMsg.textContent = data.message || 'VM reverted and restarted successfully!';
                document.body.appendChild(tempMsg);
                
                // Remove message after 3 seconds
                setTimeout(() => {
                    document.body.removeChild(tempMsg);
                }, 3000);
                
                // Refresh the profiles list
                htmx.ajax('GET', '/templates/profiles', {target: '#profiles-list', swap: 'innerHTML'});
            }
        })
        .catch(error => {
            // Remove processing message
            const msg = document.getElementById('revert-processing-msg');
            if (msg) document.body.removeChild(msg);
            
            alert('Error: ' + error);
        });
    }
}

</script>
{% endblock %}