{% include parts/form/input-datalist.html %}
{% include parts/form/input-range.html %}

<div class="mb-3">
	<label class="form-label">Datepicker</label>
	{% include ui/form/calendar.html class="mb-2" %}
	{% include ui/form/calendar.html id="time" layout="icon" %}
</div>

<div class="mb-3">
	<label class="form-label">Inline datepicker</label>
	{% include ui/form/calendar.html id="inline" inline=true %}
</div>

<div class="mb-3">
	<label class="form-label">Progress</label>
	{% include ui/progress.html class="mb-2" %}
	{% include ui/progress.html indeterminate=true color="green" %}
</div>

<div class="mb-3">
	<label class="form-label">Form buttons</label>
	<div class="row">
		<div class="col">
			{% include ui/button.html color="white" block=true icon="brand-github" icon-color="github" text="Login with Github" %}
		</div>
		<div class="col">
			{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}
		</div>
	</div>
</div>

<div class="mb-3">
	<label class="form-label">Tags input</label>
	{% include ui/form/selectize.html key="tags" %}
</div>

<div class="mb-3">
	<label class="form-label">Advanced tags input</label>
	{% include ui/form/selectize.html key="tags-advanced" %}
</div>

<div class="mb-3">
	<label class="form-label">Advanced select</label>
	{% include ui/form/selectize.html key="users" %}
</div>

<div class="mb-3">
	<label class="form-label">Select with avatars</label>
	{% include ui/form/selectize.html key="people" %}
</div>

<div class="mb-3">
	<label class="form-label">Select with flags</label>
	{% include ui/form/selectize.html key="countries"  %}
</div>

<div class="mb-3">
	<label class="form-label">Advanced select with validation state</label>
	{% include ui/form/selectize.html key="countries" state="valid" select-id="states" %}
</div>