Vacancies Table

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

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

    .filters {

        &__inner {
            background-color: var(--background-color, var(--white)) !important;
        }
    }

    .results{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }  
    
    .pagination{
        margin-top: 1rem;
        &-navigation{
            @include fluid-type(18,26)
        }
    }

    .career-table-item {
        background-color: var(--primary);
        color: var(--white);
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        text-decoration: none;
        gap: 1rem 2rem;
        border-radius: 10px;
        font-size: 16px;
        position: relative;
        
        @include bp($md) {
            font-size: 18px;
            align-items: center;
        }

        @include bp($md, true) {
            flex-direction: column;
            flex-wrap: nowrap;
        }
    
    
        &:hover {
            .arrow-icon {
                background-color: var(--secondary);    
            }
        }
    
    
        &__title {
            @include fluid-type(18, 22);
            flex-grow: 1;
            flex-basis: 100%;
    
            @include bp($md) {
                flex-basis: 40%;
            }
        }
    
        &__location {
            flex-basis: 15%;
            flex-grow: 1;
        }
        
        &__employment-type {
            flex-basis: 15%;
        }
    
        &__arrow {
            
            display: flex;
            justify-content: flex-end;
            position: relative;
    
            @include bp($md) {
                height: 40px;
            }

            @include bp($md, true) {
                position: absolute;
                bottom: 1rem;
                right: 1rem;
            }
    
            width: 40px;
			height: 40px;
			border: solid var(--white) 1px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100px;
			transition: .3s ease-in-out;
			cursor: pointer;

			.ico{
				width: 20px;
				height: 20px;

				&--arrow-right{
					background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A");
				}
			}
        }

        &:hover {
            .career-table-item__arrow {
                background-color: var(--white);    

                .ico--arrow-right {
                    background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
                }
            }
        }
    }

    .nice-select {
		border: none;
		width: 100%;
		background-color: var(--white);
		display: flex;
    	align-items: center;
        font-family: 'Source Sans 3';
        font-size: 22px;

		&-dropdown {
			border-radius: 15px;
			border: 2px solid var(--secondary);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			width:100%;
            z-index: 500;
		}
	}
}

class VacanciesTable {

	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');

		const niceSelects = this.block.querySelectorAll('select');
		niceSelects.forEach((select) => {
			NiceSelect.bind(select);
		});

		// 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',
				});

				// get dropdown
				const dropdown = feed.querySelector('.btn--dropdown');
				// console.log(dropdown);
				if (dropdown) {
					dropdown.classList.remove('open');
				}
			
			});
			feed.addEventListener('post-feed-update', (data) => {
				// console.log(data.detail);
				if (!data) {
					return;
				}


				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');

				totalPostsElem.innerHTML = data.detail.found_posts;
			});

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

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-vacancies-table').forEach((block) => {
		new VacanciesTable(block);
	});
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/vacancies-table",
    "title": "Vacancies Table",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-vacancies-table.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 - Vacancies Table",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/vacancies-table/block-vacancies-table.css", "nice-select"],
    "viewScript": ["nice-select","vacancies-table"]
}