import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Form',
};
const Template = new Builder(args => `<div class="card p-4">
		<x-form ${toProps(args)}>
			<legend>Form example</legend>
			<hr>
			<x-form-group>
				<x-textarea label="Address" placeholder="3rd Street, 2nd avenue" autocomplete="street-address" name="address" minlength="10" maxlength="100" required validate></x-textarea>
				<x-input-error errors-for="address"></x-input-error>
			</x-form-group>
			<x-form-group>
				<x-input label="Country" name="country" required validate>
					<x-input-suggestion>
						<x-input-suggestion-item>
							<x-flag slot="left" code="HN" class="mr-2"></x-flag>
							Honduras
						</x-input-suggestion-item>
						<x-input-suggestion-item>
							<x-flag slot="left" code="PA" class="mr-2"></x-flag>
							Panama
						</x-input-suggestion-item>
						<x-input-suggestion-item>
							<x-flag slot="left" code="CR" class="mr-2"></x-flag>
							Costa Rica
						</x-input-suggestion-item>
						<x-input-suggestion-item>
							<x-flag slot="left" code="MX" class="mr-2"></x-flag>
							Mexico
						</x-input-suggestion-item>
						<span slot="results">Mostrando <strong>4</strong> recomendacion(es)</span>
					</x-input-suggestion-item>
				</x-input>
				<x-input-error errors-for="country"></x-input-error>
			</x-form-group>
			<x-form-group>
				<x-input type="tel" label="Phone" placeholder="+504 9999-9999" autocomplete="tel" name="phone" minlength="8" maxlength="14" required validate></x-input>
				<x-input-error errors-for="phone"></x-input-error>
			</x-form-group>
			<x-form-group>
				<hr>
				<x-button color="default" type="submit" tabindex="0">Send</x-button>
			</x-form-group>
			<div class="alert-block">
				<code></code>
			</div>
		</x-form>
	</div>`);
export const Simple = Template.args({
    method: 'POST',
    // action: 'https://pixelpay.app/version',
    action: 'http://playground-v9.test/api/test/',
}).build();
