package pagination 

import "strconv"

templ Pagination(length int, currentPage int, link string, contentID 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 }
						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-on::before-request={ HideContent(contentID) }
						hx-on::after-request={ ShowContent(contentID) }
						hx-target={ "#" + contentID }
					>{ strconv.Itoa(i+1) }</a>
				} else {
					<a
						hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID }
						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
						hx-swap="outerHTML"
						hx-indicator="#indicator"
						hx-trigger="click"
						hx-on::before-request={ HideContent(contentID) }
						hx-on::after-request={ ShowContent(contentID) }
						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);

}
