package templates

templ ContactForm(enabled bool) {
	<section id="contact" class="contact">
		<h2>Contact</h2>
		<p class="contact-intro">
			Interested in a project or collaboration? Send a message below.
		</p>
		if !enabled {
			<p class="contact-unavailable">
				The contact form is not configured yet.
			</p>
		} else {
			<form
				class="contact-form"
				method="post"
				action="/contact"
				hx-post="/contact"
				hx-target="#contact-result"
				hx-swap="innerHTML"
				hx-boost="false"
				hx-disabled-elt="find button[type=submit]"
			>
				<div class="form-row">
					<label for="name">Name</label>
					<input type="text" id="name" name="name" required autocomplete="name" maxlength="120"/>
				</div>
				<div class="form-row">
					<label for="email">Email</label>
					<input type="email" id="email" name="email" required autocomplete="email" maxlength="254"/>
				</div>
				<div class="form-row">
					<label for="message">Message</label>
					<textarea id="message" name="message" required minlength="20" rows="6" maxlength="8000" placeholder="Tell us about your project or question."></textarea>
				</div>
				<input
					class="hp-field"
					type="text"
					name="website"
					id="website"
					tabindex="-1"
					autocomplete="off"
					aria-hidden="true"
				/>
				<button type="submit" class="btn btn-primary">Send message</button>
			</form>
		}
		<div id="contact-result" class="contact-result"></div>
	</section>
}

templ ContactSuccess() {
	<div class="alert alert-success" role="status">
		<p>Thanks — your message has been sent. We will get back to you soon.</p>
	</div>
}

templ ContactValidationAlert(errs map[string]string) {
	<div class="alert alert-error" role="alert">
		<p>Please fix the following:</p>
		<ul>
			for _, msg := range errs {
				<li>{ msg }</li>
			}
		</ul>
	</div>
}

templ ContactSendError() {
	<div class="alert alert-error" role="alert">
		<p>Something went wrong sending your message. Please try again later.</p>
	</div>
}

templ ContactRateLimited() {
	<div class="alert alert-error" role="alert">
		<p>Too many messages from your network. Please try again later.</p>
	</div>
}