/**
 * Disk Checker - Main JavaScript
 * Handles HTMX events and dynamic content rendering
 */

// Render drives after HTMX loads them
function renderDrives(data) {
    const container = document.getElementById('drives-content');
    if (!container) return;
    
    container.innerHTML = '';

    if (!data.drives || data.drives.length === 0) {
        container.innerHTML = '<div class="col-12"><p class="text-muted">No drives found.</p></div>';
        return;
    }

    data.drives.forEach(drive => {
        const col = document.createElement('div');
        col.className = 'col-md-4 mb-3';

        const card = document.createElement('div');
        card.className = `drive-card ${drive.mounted ? 'disabled' : 'available'}`;

        card.innerHTML = `
            <div class="card-body">
                <h5 class="card-title">${drive.name}</h5>
                <p class="card-text">
                    <strong>Size:</strong> ${drive.size}<br>
                    <strong>Model:</strong> ${drive.model || 'Unknown'}<br>
                    ${drive.serial ? `<strong>Serial:</strong> ${drive.serial}<br>` : ''}
                    ${drive.mount_point ? `<strong>Mounted at:</strong> ${drive.mount_point}<br>` : ''}
                </p>
                <div>
                    ${drive.mounted
                        ? '<span class="badge bg-secondary">Mounted - Unavailable</span>'
                        : '<span class="badge bg-success">Available for Benchmark</span>'
                    }
                </div>
            </div>
        `;

        col.appendChild(card);
        container.appendChild(col);
    });
}

// Listen for HTMX events
document.addEventListener('htmx:afterRequest', function(evt) {
    if (evt.detail.target.id === 'drives-content') {
        renderDrives(JSON.parse(evt.detail.xhr.response));
    }
});

// Optional: Listen for HTMX load event as fallback
document.addEventListener('htmx:load', function(evt) {
    if (evt.target.id === 'drives-content') {
        // HTMX will load the content via hx-get
        // The afterRequest event will handle rendering
    }
});