// all about vertical grids
const vertical_grids = document.querySelector('.vertical-grids');

for (let i = endingOfY; i > 0; i -= gapInY) {
    vertical_grids.innerHTML += `<div class="vertical-grid-portion grid-portion">${valuePrefix}${i}${valuePostfix}</div>`;
}

const vertical_grid_portion = document.querySelector('.vertical-grid-portion')
const verticalGridHeightInCSS = getComputedStyle(vertical_grid_portion).height.slice(0, -2);

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

nftCollectibleObj.forEach((item, i) => {
    horizontal_grids.innerHTML += `
    <div class="horizontal-grid-portion grid-portion">
        <div class="value-label">
            <div class="exact-point">
                <span class="currency-symbol">${valuePrefix}</span><span>${item.value}${valuePostfix}</span>
            </div>
            <div class="percentage-change ${(item.isValueIncreased) ? '' : 'percentage-down'}">
                <span>${item.percentageChange}</span><span class="percentage-symbol">%</span>
                <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.99975 0C3.83674 0 3.68373 0.0795 3.59023 0.2135L0.0900377 5.2135C-0.0169682 5.366 -0.0289688 5.5655 0.0560358 5.731C0.142541 5.8965 0.31305 6 0.49956 6H7.50044C7.68695 6 7.85796 5.8965 7.94396 5.731C8.02897 5.5655 8.01697 5.366 7.90996 5.2135L4.40977 0.2135C4.31677 0.0795 4.16376 0 4.00075 0H3.99975C4.00025 0 4.00025 0 3.99975 0Z"></path>
                </svg>
            </div>
            <div class="point-down-triangle-main">
                <div class="point-down-triangle"></div>
            </div>
        </div>
        <div class="chart-line" style="height:${((item.value / gapInY) - 1) * verticalGridHeightInCSS}px;"></div>
        <div class="collectible-img-main">
            <div class="collectible-img">
                <img src="./dashboard/uploads/${item.image}" alt="${item.name}" title="${item.name}">
            </div>
            <div class="name-with-logo">${item.nameWithLogo ? item.name : ''}</div>
        </div>
    </div>
    `
});