---
// Port of preview/pages/form-elements.html
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import FormElements1 from '@shared/components/forms/FormElements1.astro';
import FormElements2 from '@shared/components/forms/FormElements2.astro';
import FormElements3 from '@shared/components/forms/FormElements3.astro';
import FormElements4 from '@shared/components/forms/FormElements4.astro';
import FormElements5 from '@shared/components/forms/FormElements5.astro';
import FormElements6 from '@shared/components/forms/FormElements6.astro';
import Layout from '@shared/components/cards/form/Layout.astro';
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
import InputMask from '@shared/components/ui/form/InputMask.astro';
import Button from '@shared/components/Button.astro';
import Avatar from '@shared/components/ui/Avatar.astro';
import people from '@data/people.json';

const httpMethods = ['GET', 'POST', 'PUT', 'HEAD', 'DELETE', 'PATCH'];
const comparisons = [
	['EQUALS', 'Equals'], ['NOT_EQUALS', 'Not equals'], ['HAS_KEY', 'Has key'],
	['NOT_HAS_KEY', 'Not has key'], ['HAS_VALUE', 'Has value'], ['NOT_HAS_VALUE', 'Not has value'],
	['IS_EMPTY', 'Is empty'], ['NOT_EMPTY', 'Is not empty'], ['GREATER_THAN', 'Greater than'],
	['LESS_THAN', 'Less than'],
];
const sources = [
	['STATUS_CODE', 'Status code'], ['JSON_BODY', 'JSON body'], ['HEADERS', 'Headers'],
	['TEXT_BODY', 'Text body'], ['RESPONSE_TIME', 'Response time'],
];
// assertion rows: [sourceSel, targetVal, comparisonSel]
const rows = [
	{ source: 'STATUS_CODE', comparison: 'EQUALS', target: '200', prop: '' },
	{ source: 'JSON_BODY', comparison: 'HAS_VALUE', target: 'string', prop: 'parameters.alt.type' },
	{ source: 'RESPONSE_TIME', comparison: 'LESS_THAN', target: '500', prop: '' },
	{ source: 'HEADERS', comparison: 'EQUALS', target: 'application/json; charset=UTF-8', prop: 'content-type' },
];
---

<DefaultLayout
	title="Form elements"
	pageHeader="Form elements"
	pageMenu="form.elements"
	pageLibs={['nouislider', 'autosize', 'tabler-flags', 'tabler-payments', 'litepicker', 'tom-select', 'imask']}
>
	<div class="row row-cards">
		<div class="col-12">
			<form action="https://httpbin.org/post" method="post" class="card">
				<div class="card-header">
					<h4 class="card-title">Form elements</h4>
				</div>
				<div class="card-body">
					<div class="row g-5">
						<div class="col-xl-4">
							<div class="row">
								<div class="col-md-6 col-xl-12"><FormElements1 /></div>
								<div class="col-md-6 col-xl-12"><FormElements2 /></div>
							</div>
						</div>
						<div class="col-xl-4">
							<div class="row">
								<div class="col-md-6 col-xl-12"><FormElements3 /></div>
								<div class="col-md-6 col-xl-12"><FormElements4 /></div>
							</div>
						</div>
						<div class="col-xl-4">
							<div class="row">
								<div class="col-md-6 col-xl-12"><FormElements5 /></div>
								<div class="col-md-6 col-xl-12"><FormElements6 /></div>
							</div>
						</div>
					</div>
				</div>
				<div class="card-footer text-end">
					<div class="d-flex">
						<a href="#" class="btn btn-link">Cancel</a>
						<button type="submit" class="btn btn-primary ms-auto">Send data</button>
					</div>
				</div>
			</form>
		</div>

		<div class="col-md-6">
			<div class="card h-100">
				<div class="card-body">
					<h3 class="card-title">Project ID</h3>
					<p class="card-subtitle">Used when interacting with the API.</p>
					<InputIcon icon="files" value="prj_5ae74426fe935327a8fa178b07d84ad9" readonly />
				</div>
				<div class="card-footer">
					<div class="row align-items-center">
						<div class="col">Learn more about <a href="#">Project ID</a></div>
						<div class="col-auto"><Button text="Save" color="primary" /></div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-md-6">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">Node.js Version</h3>
					<p class="card-subtitle">
						The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect.
					</p>
					<select class="form-select">
						<option>14.x</option>
						<option>12.x</option>
					</select>
				</div>
				<div class="card-footer">Learn more about <a href="#">Node.js Version</a></div>
			</div>
		</div>

		<div class="col-12 col-lg-4"><Layout /></div>

		<div class="col-lg-8">
			<div class="row row-cards">
				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header"><h3 class="card-title">Input mask</h3></div>
						<div class="card-body">
							<div class="mb-3"><label class="form-label">Date</label><InputMask mask="00/00/0000" visible /></div>
							<div class="mb-3"><label class="form-label">Hour</label><InputMask mask="00:00:00" visible /></div>
							<div class="mb-3"><label class="form-label">Date &amp; Hour</label><InputMask mask="00/00/0000 00:00:00" visible /></div>
							<div class="mb-3"><label class="form-label">ZIP Code</label><InputMask mask="00000-000" visible /></div>
							<div class="mb-3"><label class="form-label">Money</label><InputMask mask="000.000.000.000.000,00" visible reverse /></div>
							<div class="mb-3"><label class="form-label">Telephone</label><InputMask mask="0000-0000" visible /></div>
							<div class="mb-3"><label class="form-label">Telephone with Code Area</label><InputMask mask="(00) 0000-0000" visible /></div>
							<div class="mb-3"><label class="form-label">IP Address</label><InputMask mask="099.099.099.099" placeholder="000.000.000.000" visible /></div>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-6">
					<form class="card h-100">
						<div class="card-header"><h3 class="card-title">My Profile</h3></div>
						<div class="card-body">
							<div class="mb-3">
								<div class="row">
									<div class="col-auto"><Avatar person={people[2]} size="md" /></div>
									<div class="col">
										<div class="mb-3">
											<label class="form-label">Email-Address</label>
											<input class="form-control" placeholder="your-email@domain.com" />
										</div>
									</div>
								</div>
							</div>
							<div class="mb-3">
								<label class="form-label">Bio</label>
								<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
							</div>
							<div class="mb-3">
								<label class="form-label">Email-Address</label>
								<input class="form-control" placeholder="your-email@domain.com" />
							</div>
							<div class="mb-3">
								<label class="form-label">Password</label>
								<input type="password" class="form-control" value="password" />
							</div>
						</div>
						<div class="card-footer text-end"><Button text="Save" color="primary" /></div>
					</form>
				</div>
			</div>
		</div>

		<div class="col-lg-12">
			<div class="row row-cards">
				<div class="col-12 col-lg-6">
					<form class="card">
						<div class="card-body">
							<h3 class="card-title">Edit Profile</h3>
							<div class="row row-cards">
								<div class="col-md-5"><div class="mb-3"><label class="form-label">Company</label><input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc." /></div></div>
								<div class="col-sm-6 col-md-3"><div class="mb-3"><label class="form-label">Username</label><input type="text" class="form-control" placeholder="Username" value="michael23" /></div></div>
								<div class="col-sm-6 col-md-4"><div class="mb-3"><label class="form-label">Email address</label><input type="email" class="form-control" placeholder="Email" /></div></div>
								<div class="col-sm-6 col-md-6"><div class="mb-3"><label class="form-label">First Name</label><input type="text" class="form-control" placeholder="Company" value="Chet" /></div></div>
								<div class="col-sm-6 col-md-6"><div class="mb-3"><label class="form-label">Last Name</label><input type="text" class="form-control" placeholder="Last Name" value="Faker" /></div></div>
								<div class="col-md-12"><div class="mb-3"><label class="form-label">Address</label><input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia" /></div></div>
								<div class="col-sm-6 col-md-4"><div class="mb-3"><label class="form-label">City</label><input type="text" class="form-control" placeholder="City" value="Melbourne" /></div></div>
								<div class="col-sm-6 col-md-3"><div class="mb-3"><label class="form-label">Postal Code</label><input type="test" class="form-control" placeholder="ZIP Code" /></div></div>
								<div class="col-md-5"><div class="mb-3"><label class="form-label">Country</label><select class="form-control form-select"><option value="">Germany</option></select></div></div>
								<div class="col-md-12">
									<div class="mb-3 mb-0">
										<label class="form-label">About Me</label>
										<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
You doubt I'll bother, reading into it
I'll probably won't, left to my own devices
But that's the difference in our opinions.</textarea>
									</div>
								</div>
							</div>
						</div>
						<div class="card-footer text-end"><button type="submit" class="btn btn-primary">Update Profile</button></div>
					</form>
				</div>
				<div class="col-12 col-lg-6">
					<div class="card h-100">
						<div class="card-header"><h3 class="card-title">HTTP Request</h3></div>
						<div class="card-body">
							<div class="row row-cards">
								<div class="mb-3 col-sm-4 col-md-2">
									<label class="form-label required">Method</label>
									<select class="form-select">
										{httpMethods.map((m) => <option value={m}>{m}</option>)}
									</select>
								</div>
								<div class="mb-3 col-sm-8 col-md-10">
									<label class="form-label required">URL</label>
									<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest" />
								</div>
							</div>
							<div class="form-label">Assertions</div>
							<div class="table-responsive">
								<table class="table mb-0">
									<thead>
										<tr><th>Source</th><th>Property</th><th>Comparison</th><th>Target</th></tr>
									</thead>
									<tbody>
										{
											rows.map((row) => (
												<tr>
													<td>
														<select class="form-select">
															{sources.map(([v, l]) => <option value={v} selected={v === row.source || undefined}>{l}</option>)}
														</select>
													</td>
													<td><input type="text" class="form-control" value={row.prop || undefined} /></td>
													<td>
														<select class="form-select">
															{comparisons.map(([v, l]) => <option value={v} selected={v === row.comparison || undefined}>{l}</option>)}
														</select>
													</td>
													<td><input type="text" class="form-control" value={row.target} /></td>
												</tr>
											))
										}
									</tbody>
								</table>
							</div>
						</div>
						<div class="card-footer text-end"><button type="submit" class="btn btn-primary">Make request</button></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>