---
import Button from "@components/Button.astro";
import UIString from "./UIString.astro";
import { useTranslation } from "@i18n/utils";
import { actions } from "astro:actions";

const t = useTranslation(Astro);
const formResult = Astro.getActionResult(actions.appeal);
---

<>
	<form name="contact" action={actions.appeal} method="post">
		<div class="flex">
			<div>
				<input name="name" placeholder={t("input.nameField")} type="text" maxlength="20" autocomplete="off" required />
			</div>
			<div>
				<input name="email" placeholder="example@email.com" type="email" autocomplete="off" required />
			</div>
			<div class="hp-field" aria-hidden="true">
				<label for="website_url">Оставьте это поле пустым:</label>
				<input type="text" autocomplete="off" id="website_url" name="website_url" tabindex="-1" autocomplete="off" />
			</div>
		</div>
		<input name="subject" placeholder={t("input.subjectField")} type="text" autocomplete="off" required />
		<textarea
			name="message"
			placeholder={t("input.messageField")}
			id="message"
			autocomplete="off"
			cols={30}
			rows={10}
			required></textarea>
		<div class="footer">
			{
				formResult?.error && (
					<span>
						<UIString key={formResult.error.status === 429 ? "submitted.limit" : "submitted.error"} />
					</span>
				)
			}
			<Button type={"submit"}>
				<UIString key={"btn.submit"} />
			</Button>
		</div>
	</form>
</>

<style lang="scss">
	form {
		display: flex;
		flex-direction: column;
		row-gap: 7px;
		margin-bottom: 3.125rem;
		& .hp-field {
			position: absolute;
			left: -9999px;
			top: -9999px;
			opacity: 0;
			pointer-events: none;
		}
		& .flex {
			column-gap: 10px;
			& div {
				width: 100%;
			}
		}
		& input.error-input,
		& textarea.error-input {
			border: 1px solid var(--color-error);
		}
		& .footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 12px;
		}
	}
	@media screen and (max-width: 560px) {
		form .flex {
			flex-direction: column;
			row-gap: 7px;
		}
	}
</style>