<section class="section docs-section" id="forms">
	<h2 class="section-title">Forms</h2>
	<p class="docs-section-description">
		Формы используют `.form-group`, `.label` и `.input`.
		Ошибки задаются на label через `.error`, а пояснение выводится соседним `.input-info`.
	</p>

	<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-grid">
		<div class="form-group">
			<label class="label success">
				Validated
				<input type="text" class="input" value="Release Plan">
			</label>
			<div class="input-info"><i class="ph ph-check-circle"></i> Looks good</div>
		</div>

		<div class="form-group">
			<label class="label warning">
				Needs review
				<input type="text" class="input" value="Draft">
			</label>
			<div class="input-info"><i class="ph ph-warning-circle"></i> Check before publishing</div>
		</div>

		<div class="form-group">
			<label class="label">
				Readonly
				<input type="text" class="input" value="run_1048" readonly>
			</label>
		</div>

		<div class="form-group">
			<label class="label">
				Disabled
				<input type="text" class="input" value="Locked" disabled>
			</label>
		</div>
	</div>

	<div class="block form-grid">
		<div class="form-group">
			<label class="label">
				Search
				<i class="ph ph-magnifying-glass"></i>
				<input type="search" class="input" value="release" placeholder="Search">
			</label>
		</div>

		<div class="form-group">
			<label class="label">
				Number
				<input type="number" class="input" value="42" min="0" max="100">
			</label>
		</div>
	</div>

	<div class="block">
		<fieldset class="fieldset">
			<legend class="legend">Date & Time</legend>
			<div class="form-grid">
				<div class="form-group">
					<label class="label">
						Date
						<i class="ph ph-calendar-blank"></i>
						<input type="date" class="input input-date" value="2026-04-23" data-date-picker>
					</label>
				</div>

				<div class="form-group">
					<label class="label">
						Time
						<i class="ph ph-clock"></i>
						<input type="time" class="input input-time" value="14:30" data-date-picker>
					</label>
				</div>

				<div class="form-group">
					<label class="label">
						Date & time
						<i class="ph ph-calendar-dots"></i>
						<input type="datetime-local" class="input input-datetime" value="2026-04-23T14:30" data-date-picker>
					</label>
				</div>

				<div class="form-group">
					<label class="label">
						Month
						<i class="ph ph-calendar"></i>
						<input type="month" class="input input-month" value="2026-04" data-date-picker>
					</label>
				</div>
			</div>
		</fieldset>
	</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">
		<fieldset class="fieldset">
			<legend class="legend">Fieldset</legend>
			<div class="form-grid">
				<div class="form-group">
					<label class="label">
						First name
						<input type="text" class="input" value="Ada">
					</label>
				</div>
				<div class="form-group">
					<label class="label">
						Last name
						<input type="text" class="input" value="Lovelace">
					</label>
				</div>
			</div>
		</fieldset>
	</div>

	<div class="block">
		<label class="file-upload">
			<i class="ph ph-upload-simple"></i>
			Upload file
			<input type="file">
		</label>
	</div>

	<div class="block">
		<div class="file-upload-panel">
			<form class="file-upload-form" action="#" method="post" enctype="multipart/form-data">
				<div class="file-upload-header">
					<div class="file-upload-heading">
						<h3 class="file-upload-title">Upload files</h3>
						<p class="file-upload-description">Attach documents, archives, screenshots or product images for review.</p>
					</div>
					<span class="badge badge-info">Max 12 MB</span>
				</div>

				<label class="file-upload-dropzone">
					<span class="file-upload-icon" aria-hidden="true">
						<i class="ph ph-cloud-arrow-up"></i>
					</span>
					<span class="file-upload-body">
						<span class="file-upload-primary">Choose files</span>
						<span class="file-upload-secondary">Images get thumbnails, other files show their type</span>
					</span>
					<input type="file" name="files" multiple data-file-upload-input>
				</label>

				<div class="file-upload-preview" data-file-upload-preview hidden></div>

				<div class="file-upload-actions">
					<button class="btn btn-secondary btn-small" type="reset">Reset</button>
					<button class="btn btn-accent btn-small with-icon" type="submit">
						<i class="ph ph-upload-simple"></i>
						Upload
					</button>
				</div>
			</form>
		</div>
	</div>

	<div class="block range">
		<label class="label">
			Range
			<input type="range" min="0" max="100" value="64">
		</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>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Forms HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="form-group"&gt;
  &lt;label class="label error"&gt;
    Project name
    &lt;i class="ph ph-user"&gt;&lt;/i&gt;
    &lt;input class="input" type="text" placeholder="Launch Plan"&gt;
  &lt;/label&gt;
  &lt;div class="input-info"&gt;
    &lt;i class="ph ph-warning-circle"&gt;&lt;/i&gt;
    Field cannot be empty
  &lt;/div&gt;
&lt;/div&gt;

&lt;fieldset class="fieldset"&gt;
  &lt;legend class="legend"&gt;Fieldset&lt;/legend&gt;
  &lt;label class="label success"&gt;
    Validated
    &lt;input class="input" type="text" value="Release Plan"&gt;
  &lt;/label&gt;
&lt;/fieldset&gt;

&lt;label class="file-upload"&gt;
  Upload file
  &lt;input type="file"&gt;
&lt;/label&gt;

&lt;fieldset class="fieldset"&gt;
  &lt;legend class="legend"&gt;Date &amp; Time&lt;/legend&gt;
  &lt;div class="form-grid"&gt;
    &lt;label class="label"&gt;
      Date
      &lt;i class="ph ph-calendar-blank"&gt;&lt;/i&gt;
      &lt;input class="input input-date" type="date" value="2026-04-23" data-date-picker&gt;
    &lt;/label&gt;
    &lt;label class="label"&gt;
      Time
      &lt;i class="ph ph-clock"&gt;&lt;/i&gt;
      &lt;input class="input input-time" type="time" value="14:30" data-date-picker&gt;
    &lt;/label&gt;
    &lt;label class="label"&gt;
      Date &amp; time
      &lt;i class="ph ph-calendar-dots"&gt;&lt;/i&gt;
      &lt;input class="input input-datetime" type="datetime-local" value="2026-04-23T14:30" data-date-picker&gt;
    &lt;/label&gt;
  &lt;/div&gt;
&lt;/fieldset&gt;

&lt;div class="file-upload-panel"&gt;
  &lt;form class="file-upload-form" enctype="multipart/form-data"&gt;
    &lt;div class="file-upload-header"&gt;
      &lt;div class="file-upload-heading"&gt;
        &lt;h3 class="file-upload-title"&gt;Upload files&lt;/h3&gt;
        &lt;p class="file-upload-description"&gt;Attach documents, archives or images.&lt;/p&gt;
      &lt;/div&gt;
      &lt;span class="badge badge-info"&gt;Max 12 MB&lt;/span&gt;
    &lt;/div&gt;

    &lt;label class="file-upload-dropzone"&gt;
      &lt;span class="file-upload-icon" aria-hidden="true"&gt;
        &lt;i class="ph ph-cloud-arrow-up"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;span class="file-upload-body"&gt;
        &lt;span class="file-upload-primary"&gt;Choose files&lt;/span&gt;
        &lt;span class="file-upload-secondary"&gt;Images get thumbnails, other files show their type&lt;/span&gt;
      &lt;/span&gt;
      &lt;input type="file" name="files" multiple data-file-upload-input&gt;
    &lt;/label&gt;

    &lt;div class="file-upload-preview" data-file-upload-preview hidden&gt;&lt;/div&gt;

    &lt;div class="file-upload-actions"&gt;
      &lt;button class="btn btn-secondary btn-small" type="reset"&gt;Reset&lt;/button&gt;
      &lt;button class="btn btn-accent btn-small" type="submit"&gt;Upload&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>