package pagination 

import "strconv"

templ PaginationV1(length int, currentPage int, link string, contentID string, searchQueryParam string) {
	// hx-on::before-request={ HideContent(contentID) }
	// hx-on::after-request="alert('Done making a request!')"
	<div class="d-flex justify-content-between align-items-center flex-wrap">
		<div class="d-flex flex-wrap py-2 mr-3">
			for i:=0; i<length; i++ {
				if (i+1) == currentPage {
					<a
						hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID + searchQueryParam }
						class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
						hx-swap="outerHTML"
						hx-indicator="#indicator"
						hx-trigger="click"
						hx-target={ "#" + contentID }
					>{ strconv.Itoa(i+1) }</a>
				} else {
					<a
						hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID + searchQueryParam }
						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
						hx-swap="outerHTML"
						hx-indicator="#indicator"
						hx-trigger="click"
						hx-target={ "#" + contentID }
					>{ strconv.Itoa(i+1) }</a>
				}
			}
		</div>
	</div>
}

// script ShowContent(contentID string) {
// 	console.log("Show Content");
// 	console.log(contentID);
// 	document.getElementById(contentID).setAttribute("visible","");
//     // document.querySelector('#'+contentID).style.display = 'block';
//     // document.querySelector('#'+contentID).setAttribute("visible","");

// }

// script HideContent(contentID string) {
// 	console.log("Hide Content");
// 	console.log(contentID);
// 	document.getElementById(contentID).setAttribute("hidden","");
//     // document.querySelector('#'+contentID).style.display = 'none';
//     // document.querySelector('#'+contentID).setAttribute("hidden","");
// }

// script CobaContent(contentID string) {
// 	console.log(contentID);

// }
