{layout='layouts/_html-wrapper'}
{partial_search_functions}

<div class="container my-12 mx-auto px-4 md:px-12 w-10 inline-block align-top">
    <div id="addon-results" class="flex flex-wrap -mx-1 lg:-mx-4">

    </div>
</div>

<script>
        //we're going to need the baseURL for several things here
        function baseUrl() {
            return location.protocol + '//' + location.hostname + (location.port ? ':' + location.port: '');
        }
        const resultsTarget = document.getElementById("addon-results");
        const rp = baseUrl() + '/ajax/addon-results'
        
        //on load create AJAX request
        document.addEventListener('DOMContentLoaded', event =>{
            
            //submit the response with fetch()
            fetch(baseUrl() + "/ajax/addon-results")
                // take our response and get the HTML we really want
                .then(response => {
                    return response.text();
                    })
                // take our HTML and replace the contents of our #addon-results element
                .then(data => {
                    resultsTarget.innerHTML = data;
                    paginationLinks();
                });
        });

        function ajaxFormSubmit () {
            //get the form data
            var searchForm = document.getElementById("addon_filter");
            var formData = new FormData(searchForm);

            //submit the data via AJAX
            fetch(searchForm.action, {
                method: 'post',
                body: formData
            })
            // take our response and get the HTML we really want
            .then(response => {
                return response.text();
            })
            // take our HTML and replace the contents of our #addon-results element
            .then(data =>{
                resultsTarget.innerHTML = data;
                paginationLinks();
            })
        }

        //paginationLinks
			//adds event listners to pagination
			//must be called AFTER ajax loads
			function paginationLinks() {
				document.querySelectorAll('.pagination__page').forEach(pageLink => {
					pageLink.addEventListener('click', (event) => {
						event.preventDefault();
						var pageUrl = pageLink.href;
						fetch(pageUrl)
							.then(response => {
								return response.text();
							})
							.then(data => {
								resultsTarget.innerHTML = data;
								paginationLinks();
							});


					})
				});
			}

</script>