package main

import (
	"fmt"
	"strings"
)

templ index(character, mood string) {
	<form>
		<input id="character" name="character" type="text" placeholder="Numa" value={ character }/>
		<input id="mood" name="mood" type="text" placeholder="delet" value={ mood }/>
		<button>Submit</button>
	</form>
	if character != "" && mood != "" {
		<div id="image">
			<img
				width="256"
				src={ fmt.Sprintf("/sticker/%s/%s", strings.ToLower(character), mood) }
			/>
			<p>Inline</p>
			<div style="margin: 1rem 0; display: flex; gap: 1rem; border-radius: 0.375rem; color: #000000; border: 1px solid #d1d5db; background-color: #f3f4f6; padding: 0.75rem; max-width: 65ch; margin-left: auto; margin-right: auto; min-height: fit-content;">
				<div style="display: flex; padding-top: 0.5rem; padding-bottom: 0.5rem; max-height: 4rem; flex-shrink: 0; align-items: center; justify-content: center; align-self: center;">
					<img
						style="max-height: 6rem"
						alt={ fmt.Sprintf("%s is %s", character, mood) }
						loading="lazy"
						src={ fmt.Sprintf("/sticker/%s/%s", strings.ToLower(character), mood) }
					/>
				</div>
				<div style="min-width: 0; align-self: center;">
					&lt;<a href="/"><b>{ character }</b></a>&gt; 
					Have you ever been far even as decided to use even go want to do look more like?
				</div>
			</div>
			<p>Standalone</p>
			<div style="margin: 1rem 0; display: flex; gap: 1rem; border-radius: 0.375rem; color: #000000; border: 1px solid #d1d5db; background-color: #f3f4f6; padding: 0.75rem; max-width: 75ch; margin-left: auto; margin-right: auto; min-height: fit-content;">
				<div style="display: flex; padding-top: 1.5rem; padding-bottom: 1.5rem; max-height: 4rem; flex-shrink: 0; align-items: center; justify-content: center; align-self: center;">
					<img
						style="max-height: 8rem"
						alt={ fmt.Sprintf("%s is %s", character, mood) }
						loading="lazy"
						src={ fmt.Sprintf("/sticker/%s/%s", strings.ToLower(character), mood) }
					/>
				</div>
				<div style="min-width: 0; align-self: center;">
					&lt;<a href="/"><b>{ character }</b></a>&gt; 
					Have you ever been far even as decided to use even go want to do look more like?
				</div>
			</div>
		</div>
	}
}