app.templ

package popui

import (
	"github.com/invopop/popui.go/classes"
	"github.com/invopop/popui.go/htmx"
	"github.com/invopop/popui.go/props"
	"github.com/invopop/popui.go/tailwind"
)

const (
	// AppID is the ID used for the main app container.
	AppID = "app-container"
	// AppTarget is the CSS selector for targeting the main app container.
	AppTarget = "#" + AppID
)

// App provides the root application container for a full-window app
// designed to be a standalone application or embedded inside the Invopop
// Console in an iframe.
//
// It sets up the basic layout and styling for the app, including the
// base HTML header and body structure ready to just add content.
//
// Applications will always include Alpine.js for interactivity.
//
// If the HTMX option is enabled and the request is detected as an HTMX
// request, only the body's content will be rendered. This assumes that
// the request was made with the `hx-swap` property set to `innerHTML`,
// the default behavior.
//
// Ensure that the `hx-target` property is set to use the AppTarget selector
// so that HTMX knows where to swap the content.
templ App(opts ...props.App) {
	{{ p := props.First(opts) }}
	if p.HTMX && htmx.IsRequest(ctx) {
		// HTMX request, only render the inner contents.
		@appBody(p) {
			{ children... }
		}
	} else {
		@HTML() {
			@Head(props.Head{
				Title:       p.Title,
				Description: p.Description,
				AlpineJS:    true,
				HTMX:        p.HTMX,
				Axios:       p.Axios,
				Auth:        p.Auth,
				Stylesheets: p.Stylesheets,
				Scripts:     p.Scripts,
			}) {
				if p.Head != nil {
					@p.Head
				}
			}
			@Body(props.Body{ID: AppID}) {
				@appBody(p) {
					{ children... }
				}
			}
		}
	}
}

templ appBody(p props.App) {
	// Main app container uses universal ID for HTMX targeting.
	<div
		if p.Data != "" {
			x-data={ p.Data }
		}
		if p.AccentColor != "" {
			data-accent-color={ p.AccentColor }
		}
		class="grid grid-cols-[auto_1fr] grid-rows-[auto_1fr_auto] w-full h-full [&_nav]:col-start-1 [&_nav]:row-span-full bg-background text-foreground"
	>
		{ children... }
	</div>
}

// Main provides a wrapper for the main content area of apps.
// This should be used outside the Header, or Footer components.
// For the contents, you may want to use the Article component that provides
// padding.
templ Main(opts ...props.Main) {
	{{ p := props.First(opts) }}
	<main
		if p.ID != "" {
			id={ p.ID }
		}
		if p.Cloak {
			x-cloak
		}
		if p.Data != "" {
			x-data={ p.Data }
		}
		class={
			tailwind.Merge(
				"overflow-auto col-start-2 row-start-2 flex flex-col gap-4",
				classes.If(!p.Center, "justify-between"),
				classes.If(p.Center, "items-center"),
				p.Class,
			),
		}
		if p.Data != "" {
			x-data={ p.Data }
		}
		{ p.Attributes... }
	>
		{ children... }
	</main>
}

// Article is used to wrap content sections inside a main area providing
// padding and fixed width that makes the contents more readable. If you
// want a full-width article, set FullWidth to true.
templ Article(opts ...props.Article) {
	{{ p := props.First(opts) }}
	<article
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			tailwind.Merge(
				"flex flex-col p-4 flex-1 w-full gap-4",
				classes.If(!p.FullWidth, "lg:w-200"),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</article>
}

// Block provides a simple block container that stacks its children
// vertically with a gap in the same way as the Article and Main components.
// This can be used inside Articles or Mains to group related content.
templ Block(opts ...props.Block) {
	{{ p := props.First(opts) }}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			tailwind.Merge(
				"flex flex-col flex-1 w-full gap-4",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

// Header provides a header area for apps with a set of breadcrumbs
// if provided for navigation. This should be used directly inside
// the App component, and not inside Main.
templ Header(opts ...props.Header) {
	{{ p := props.First(opts) }}
	<header
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			tailwind.Merge(
				"bg-background z-[2] h-12 sticky inset-0 flex px-4 justify-between items-center border-b border-border transition-[left] duration-300 ease-in-out col-start-2 col-span-2 row-start-1",
				p.Class,
			),
		}
		if p.Data != "" {
			x-data={ p.Data }
		}
		{ p.Attributes... }
	>
		/* TODO: add menu button
			<button class="block p-[5px] mr-2 md:hidden">
				@icons.Menu()
			</button>
        */
		<div class="flex items-center gap-1">
			if p.Title != nil {
				@p.Title
			}
			if p.Breadcrumbs != nil {
				if p.Breadcrumbs != nil {
					@Breadcrumbs() {
						for _, b := range p.Breadcrumbs {
							@Breadcrumb(b)
						}
					}
				}
			}
		</div>
		<div class="flex items-center gap-2">
			{ children... }
		</div>
	</header>
}

// Aside provides a fixed-width sidebar on the right side of the app
// next to the Main content area, between the Header and Footer.
// It has a fixed width of 400px.
templ Aside(opts ...props.Aside) {
	{{ p := props.First(opts) }}
	<aside
		if p.ID != "" {
			id={ p.ID }
		}
		if p.Data != "" {
			x-data={ p.Data }
		}
		class={
			tailwind.Merge(
				"col-start-3 row-start-2 w-[400px] overflow-auto border-l border-border bg-background",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</aside>
}

// Footer provides a footer to be used inside the App with contents
// justified to the end. This should be used directly inside the App
// component.
templ Footer(opts ...props.Footer) {
	{{ p := props.First(opts) }}
	<footer
		if p.ID != "" {
			id={ p.ID }
		}
		if p.Data != "" {
			x-data={ p.Data }
		}
		class={
			tailwind.Merge(
				"flex flex-col justify-end w-full col-start-2 col-span-2 row-start-3",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		<div class="flex justify-end border-t border-border gap-3 p-4">
			{ children... }
		</div>
	</footer>
}