Card Grid

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

@import "../../resources/scss/partials/post-card";
@import "../../resources/scss/partials/pagination";

.block-card-grid {
	&:not([class*=pad-top]) {
		@include padding-top( rem-calc( 96 ) );
	}

	&:not([class*=pad-bottom]) {
		@include padding-bottom( rem-calc( 96 ) );
	}

	&__content-row {
		@include margin-bottom( rem-calc(44) );
	}

	&__button-col {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.heading {
		font-weight: 400;
		margin-bottom: 0;
	}

	&__filters-row {
		@include margin-bottom( rem-calc(48) );
	}

	&__filters-col {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: rfs-fluid-value( rem-calc(48) );

		select {
			width: rem-calc(200);
			min-height: auto;
			border: none;
			flex-grow: 0;
			text-overflow: ellipsis;
			overflow:hidden;
			white-space:nowrap;
			padding: 0;
			margin-bottom: 0;
		}
	}

	&__card-row {
		gap: rfs-fluid-value( rem-calc(48) ) 0;
	}
}

class CardGrid {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		this.blockId = this.block.getAttribute( 'id' );

		this.filters = block.querySelectorAll( '.block-card-grid__filters-col select' );
		this.filters.forEach( filter => {
			filter.addEventListener( 'change', () => {
				this.updateURL();
			});
		});
	}

	updateURL() {
		this.block.classList.add( 'loading' );

		const urlWithParams = new URL( `${window.location.origin}${window.location.pathname}` );

		this.filters.forEach( filter => {
			if ( filter.options[filter.selectedIndex].value !== '' ) {
				urlWithParams.searchParams.append( filter.getAttribute( 'name' ), filter.options[filter.selectedIndex].value );
			}
		});

		let href = urlWithParams.href;
		if ( this.blockId ) {
			href = `${urlWithParams.href}#${this.blockId}`;
		}

		if ( window.location.href !== href ) {
			window.location = href;
		}
	}
}

document.querySelectorAll('.block-card-grid').forEach((block) => {
	new CardGrid( block );
});