// all about horizontal grids
const horizontal_grids = document.querySelector('.pcl-horizontal-grids');
const pcl_total_div = document.querySelector('.pcl-total');

let pcl_total = 0;


nftCollectibleObj.forEach((item, i) => {
    pcl_total += nftCollectibleObj[i].value;
    const percentageForLongs = nftCollectibleObj[i].percentageForLongs;

    // shorts bar in the chart has margin-bottom of 0.6rem (9.2px), I divided 9.2 into 2 and subtracted it from both the height variables below to reach perfect 100%
    const heightAdjustmentConstant = 4.8;
    const heightOfShorts = (500 * (100 - percentageForLongs) / 100) - heightAdjustmentConstant;
    const heightOfLongs = (500 * percentageForLongs / 100) - heightAdjustmentConstant;

    horizontal_grids.innerHTML += `
    <div class="horizontal-grid-portion grid-portion">
        <div class="pcl-value-label">
            <div class="exact-point">
                <span>${valuePrefix}${nftCollectibleObj[i].value}${valuePostfix}</span>
            </div>
        </div>
        <div class="pcl-chart-line pcl-chart-line-shorts" style="height:${heightOfShorts}px;">
            <span class="pcl-percentage-value">${(100 - percentageForLongs).toFixed(1)}%</span>
        </div>
        <div class="pcl-chart-line pcl-chart-line-longs" style="height:${heightOfLongs}px;">
            <span class="pcl-percentage-value">${(percentageForLongs).toFixed(1)}%</span>
        </div>
        <div class="collectible-img">
            <img src="./dashboard/uploads/${nftCollectibleObj[i].image}" alt="Axie Infinity" title="Axie Infinity">
        </div>
    </div>
    `
});

pcl_total_div.innerHTML = `Total: ${valuePrefix}${pcl_total}${valuePostfix}`;