package pages

import (
	"strconv"
	"fmt"

	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
)

type AboutData struct {
	ShowCacheWarning bool
	FrontendTabs     []AboutTab
	BackendTabs      []AboutTab
}

type AboutTab struct {
	Title string
	Body  string
}

templ About(p page.Page, data AboutData) {
	if len(data.FrontendTabs) > 0 {
		<p class="subtitle mt-5">Frontend</p>
		<p class="mb-4">The following incredible projects make developing advanced, modern frontends possible and simple without having to write a single line of JS or CSS. You can go extremely far without leaving the comfort of Go with server-side rendered HTML.</p>
		@tabs(data.FrontendTabs)
		<div class="mb-4"></div>
	}
	if len(data.BackendTabs) > 0 {
		<p class="subtitle mt-5">Backend</p>
		<p class="mb-4">The following incredible projects provide the foundation of the Go backend. See the repository for a complete list of included projects.</p>
		@tabs(data.BackendTabs)
		<div class="mb-4"></div>
	}
	if (data.ShowCacheWarning) {
		<article class="message is-warning mt-6">
			<div class="message-header">
				<p>Warning</p>
			</div>
			<div class="message-body">
				This route has caching enabled so hot-reloading in the local environment will not work.
			</div>
		</article>
	}
}

templ tabs(t []AboutTab) {
	<div x-data="{tab: 0}">
		<div class="tabs">
			<ul>
				for i, tab := range t {
					<li :class={ fmt.Sprintf("{'is-active': tab === %d}", i) } @click={ "tab = " + strconv.Itoa(i) }><a>{ tab.Title }</a></li>
				}
			</ul>
		</div>
		for i, tab := range t {
			<div x-show={ "tab === " + strconv.Itoa(i) }>
				<p>
					@templ.Raw(tab.Body)
				</p>
			</div>
		}
	</div>
}