Team Listing

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-team-listing {
	padding-top: clamp(40px, 8vw, 140px);
	padding-bottom: clamp(40px, 8vw, 140px);

    &__posts {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

        @include bp($xl) {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
    }

    .post-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(1, 1fr);

        @include bp($sm) {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 1fr;
            grid-auto-flow: dense;
        }

        @include bp($md) {
            grid-template-columns: repeat(3, 1fr);
        }

        @include bp($lg) {
            grid-template-columns: repeat(4, 1fr);
        }

    }

    .card-post {
        &.d-flex {
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
    }

    &__results {
        .results-meta {
            display: block;
            text-align: right;
            font-size: .875rem;
            margin-bottom: 1rem;
        }

        .pagination {
            transition-delay: .3s;
            margin-top: 1rem;

            @include bp($md) {
                margin-top: 2rem;
            }

            @include bp($xl) {
                margin-top: 4rem;
            }
        }
    }

    .card-team__team-back {
        background-color: var(--secondary);
        
        .card-team__team-name,
        .card-team__team-job,
        .card-team__team-back-bio p,
        .card-team__button .btn {
            color: var(--primary);
        }

        .card-team__team-job {
            border-color: var(--primary);
        }
    }

    .card-team__button .btn {
        color: var(--primary) !important;
        &::after {
            background-image: url("data:image/svg+xml,%3Csvg width='18' height='27' viewBox='0 0 18 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.870117 19.6006L8.87012 26.0006L16.8701 19.6006' stroke='%23383551'/%3E%3Cpath d='M8.87011 26L8.87012 0' stroke='%23383551'/%3E%3C/svg%3E%0A");
            border-color: var(--primary);
        }
    }

    .filters {
        &.department-filters {
            diplay: flex;
            flex-direction: row;
            gap: 1rem;
            justify-content: center;
            align-items: center;

            input {
                position: absolute;
                left: -9999px;
                height: 0;
                width: 0;

                &:checked + label {
                    background-color: var(--secondary);
                    border-color: var(--secondary);
                    color: var(--primary);
                }
            }

            label {
                border: 1px solid var(--primary);
                border-radius: 50px;
                padding: .5rem 1rem;
                text-transform: uppercase;
                transition: all .3s ease;
                font-family: Montserrat;
                font-size: rem-calc(14);
                font-weight: 700;
                cursor: pointer;


                &:hover {
                    background-color: var(--secondary);
                    border-color: var(--secondary);
                    color: var(--primary);
                }
            }
        }
    }

    .results:not(.is-page-one) {
        & > a:nth-last-of-type(1) {
            @include bp($xl) {
                grid-column: span 2;
            }
        }
    }
}

class TeamListing {
	block;

	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		const feed = this.block.querySelector('[data-post-feed]');
		const resultsElem = feed.querySelector('.results');
		const resultsMeta = feed.querySelector('.results-meta');
		const scrollHint = feed.querySelector('.filters__scroll-hint');
		const filters = feed.querySelector('.filters__inner');

		// on scroll hint, scroll the filters horizontally by 100px
		if (scrollHint) {
			scrollHint.addEventListener('click', () => {
				filters.scrollBy({
					left: 200,
					behavior: 'smooth',
				});
			});
		}

		if (feed) {
			feed.addEventListener('post-feed-pre-update', (data) => {
				// scroll to top of block, but add offset of 100
				const blockTop = this.block.getBoundingClientRect().top + window.scrollY;
				window.scrollTo({
					top: blockTop - 100,
					behavior: 'smooth',
				});
			
			});
			feed.addEventListener('post-feed-update', (data) => {
				console.log(data.detail);
				if (!data) {
					return;
				}

				if(data.detail.customFunctionResults){
					data.detail.customFunctionResults.forEach(result => {
						// convert to html
						const html = new DOMParser().parseFromString(result, 'text/html');
						console.log(html);
						// get the id and check that the dialog doesn't already exist
						const id = html.body.firstChild.getAttribute('id');
						if(!document.getElementById(id)){
							// add it to the bottom of the page
							// add the modal to the page
							document.body.appendChild(html.body.firstChild);
						}
					});
				}


				if (!data.detail && !data.detail.results) {
					if(data.results){
						resultsElem.innerHTML = data.results;
					}
					return;
				}

				const results = data.detail.results;
				resultsElem.innerHTML = '';

				results.forEach(result => {
					resultsElem.innerHTML += result;
				});

				resultsElem.classList.remove('is-page-one');
			});

			feed.addEventListener('post-feed-error', (data) => {
				if(data.detail && data.detail.reason){
					resultsElem.innerHTML = data.detail.reason;
				}
			});
		}
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-team-listing').forEach((block) => {
		new TeamListing(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/team-listing",
    "title": "Team Listing",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-team-listing.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Team Listing",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/team-listing/block-team-listing.css"],
    "viewScript": ["a11y-dialog", "team-listing"]
}