<section class="section" id="forms">
	<h2 class="section-title">Forms</h2>

	<div class="block form-group">
		<label class="label">
			Text input
			<input type="text" class="input" placeholder="Введите текст">
		</label>
	</div>

	<div class="block form-group">
		<label class="label error">
			Text input
			<i class="ph ph-user"></i>
			<input type="text" class="input" placeholder="Введите текст">
		</label>
		<div class="input-info"><i class="ph ph-warning-circle"></i> Field cannot be empty</div>
	</div>

	<div class="block form-group">
		<label class="label">
			Password
			<input type="password" class="input" placeholder="••••••">
		</label>
	</div>

	<div class="block form-group">
		<label class="label">
			Text Area
			<i class="ph ph-text-aa"></i>
			<textarea class="input" placeholder="Введите текст"></textarea>
		</label>
	</div>

	<div class="block form-group">
		<label class="label">
			Select
			<div class="select-wrap">
				<select class="input select">
					<option>Option 1</option>
					<option>Option 2</option>
				</select>
			</div>
		</label>
	</div>

	<div class="block form-group">
		<label class="label">
			Select
			<i class="ph ph-selection-all"></i>
			<div class="select-wrap">
				<select class="input select">
					<option>Option 1</option>
					<option>Option 2</option>
				</select>
			</div>
		</label>
	</div>

	<div class="block form-group">
		<label class="label error">
			Advanced Select
			<i class="ph ph-user"></i>
			<input type="text" class="input advanced-select-input" placeholder="Search">
		</label>
		<div class="advanced-select-container"></div>
		<div class="input-info"><i class="ph ph-warning-circle"></i> Field cannot be empty</div>
	</div>

	<script>
		document.addEventListener("DOMContentLoaded", e => {
			setTimeout(() => {
				document.querySelector(".advanced-select-container").append(advancedSelect(
					document.querySelector(".advanced-select-input"),
					{
						"name_1": "Joe",
						"name_2": "James",
						"name_3": "Jack",
						"name_4": "Eliza",
						"name_5": "Emily",
						"name_6": "Eleanor",
						"name_7": "Ella",
						"name_8": "Ellie",
						"name_9": "John",
						"name_10": "David"
					}, 
					"Nothing found"
				));				
			}, 300);
		});
	</script>

	<div class="block form-group">
		<label class="checkbox">
			<input type="checkbox">
			<span class="checkbox-control" aria-hidden="true"></span>
			<span class="checkbox-label">Checkbox 1</span>
		</label>

		<label class="checkbox mt-3">
			<input type="checkbox">
			<span class="checkbox-control" aria-hidden="true"></span>
			<span class="checkbox-label">Checkbox 2</span>
		</label>

		<label class="checkbox mt-3">
			<input type="checkbox" disabled>
			<span class="checkbox-control" aria-hidden="true"></span>
			<span class="checkbox-label">Disabled</span>
		</label>

		<label class="checkbox mt-3">
			<input type="checkbox" disabled checked>
			<span class="checkbox-control" aria-hidden="true"></span>
			<span class="checkbox-label">Disabled & Checked</span>
		</label>
	</div>

	<div class="block form-group">
		<label class="radio">
			<input type="radio" name="radio-demo">
			<span class="radio-control" aria-hidden="true"></span>
			<span class="radio-label">Radio 1</span>
		</label>

		<label class="radio ml-2">
			<input type="radio" name="radio-demo">
			<span class="radio-control" aria-hidden="true"></span>
			<span class="radio-label">Radio 2</span>
		</label>

		<label class="radio ml-2">
			<input type="radio" name="radio-demo" disabled>
			<span class="radio-control" aria-hidden="true"></span>
			<span class="radio-label">Radio 3</span>
		</label>
	</div>
</section>