<script>
document.addEventListener("DOMContentLoaded", function(e) {
	const showMoreBtn = document.querySelector(".btn-pocaz");
	const productsGrid = document.querySelector(".b-products_grid");
	const productCard = productsGrid.querySelector(".b-product-card");

	const maxProductsGridHeight = productsGrid.getBoundingClientRect().height;
	const productsCount = productsGrid.querySelectorAll(".b-product-card_grid").length;

	const gridRowGap = getGridRowGap(productsGrid);

	const productCardHeight = getCardHeight();
	let rowsCount = getMaxRowsCount();
	let openedRowsCount = 2;

	function getMaxRowsCount() {
		return Math.floor(maxProductsGridHeight / getCardHeight());
	}

	function setMaxHeight(height) {
		productsGrid.style.maxHeight = `${height}px`;
	}

	function getGridRowGap(grid) {
		return parseInt(getComputedStyle(grid).gridRowGap.replace("px", ""));
	}

	function getCardHeight() {
		let gridRowGap = getGridRowGap(productsGrid);
		return productCard.getBoundingClientRect().height + gridRowGap;
	}

	function triggerResize() {
		let el = window;
		let event = document.createEvent("HTMLEvents");
		event.initEvent("resize", true, false);
		el.dispatchEvent(event);
	}

	function changeBtnText(btn) {
		let texts = {
			"hide": "Скрыть",
			"show": "Показать ещё"
		}

		if(openedRowsCount === rowsCount + 1) {
			btn.innerText = texts.hide;
		} else {
			btn.innerText = texts.show;
		}
	}

	setMaxHeight(productCardHeight);
	triggerResize();

	showMoreBtn.addEventListener("click", function(e) {
		changeBtnText(showMoreBtn);
	    if(openedRowsCount <= rowsCount + 1) {
	        let maxHeight = getCardHeight() * openedRowsCount;

	        productsGrid.style.maxHeight = `${maxHeight}px`;
	        openedRowsCount += 1;
	    } else {
	        productsGrid.style.maxHeight = `${productCardHeight}px`;
	        openedRowsCount = 2;
	        changeBtnText(btn);
	    }
	});

	window.addEventListener("resize", function(e) {
		let newCardHeight = getCardHeight();

		setMaxHeight(newCardHeight);
	});


});
</script>