console.log('product_select.js loaded');

// Get containers
let mainSelectionDiv = document.getElementById('mainSelect');

const baseStruct = document.getElementById("baseStruct");

let globalData;

// On load
document.addEventListener('DOMContentLoaded', async function() {
	let data = await returnTableDataByTableName('products');
	console.info(`Found ${data.count} products`);
	const result = data.result;
	globalData = result;


	for(let i = 0; i < result.length; i++) {
		let product = result[i];
		if(product.visible) {
			let newDiv = baseStruct.cloneNode(true);
			newDiv.id = `product_${product.id}`;
			newDiv.style.display = 'block';
			newDiv.querySelector('.product_name').innerText = product.name;
			newDiv.querySelector('.product_description').innerText = product.description || "";
			let price = parseFloat(product.price).toFixed(2);
			
			newDiv.querySelector('.product_price').innerText = price + " €";
			newDiv.querySelector('.product_ean').innerText = product.gtin;
			newDiv.querySelector('.product_image').src = product.image || "https://bulma.io/assets/images/placeholders/1280x960.png";
			mainSelectionDiv.appendChild(newDiv);
		}
	}

});