%css
	::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
	.Form-del.right {
		display: block;
		margin: -10px -10px 0 0;
		opacity: .2;
	}
	.Form-del {
		font-size: 20px;
		font-weight: 700;
		border: 1px solid transparent;
		line-height: 16px;
		width: 20px;
		height: 20px;
		text-align: center;
		border-radius: 4px;
	}
	.Form-del:hover {
		opacity: 1;
		border: 1px solid #aaa;
		background-image: linear-gradient(to bottom, #ddd, #888);
	}
	/**
	 *  1. avoid ios styling the submit button
	 */
	.input {
		display: block;
		border-radius: 4px;
		border: 1px solid #aaa;
	}
	.field {
		width: 100%;
	}
	.btn,
	input,
	select,
	textarea {
		display: block;
		border-radius: 4px;
		border: 1px solid #aaa;
		font-size: 14px;
		font-weight: 400;
		line-height: 30px;
		height: 32px;
		padding: 0 8px;
		margin: 0;
	}
	input[type=checkbox] {
		height: auto;
	}
	input[type=time] {
		padding: 0 0 0 8px;
	}
	textarea {
		height: 64px;
		padding: 8px;
		margin: 0;
		line-height: 1.1;
	}
	select {
		padding-right: 0;
	}
	select[multiple] {
		height: auto;
		padding: 0;
	}
	input[type=radio],
	input[type=checkbox] {
		width: auto;
		display: inline;
		margin-top: -2px;
	}
	.btn,
	input[type=submit] {                /* 1 */
		-webkit-appearance: none;   /* 1 */
		position: relative;
		padding: 0px 14px;
		text-align: center;
		text-decoration: none;
		/* default look */
		background-color: #ddd;
		color: #444;
		cursor: pointer;
	}
	option[disabled],
	.btn.disabled,
	.btn[disabled] {
		box-shadow: none;
		cursor: not-allowed;
		font-style: italic;
		opacity: .6;
		pointer-events: none;
	}
	.group {
		overflow: auto;
	}
	.group > .btn {
		border-radius: 0;
		float: left;
	}
	.group > .btn:first-child {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}
	.group > .btn:last-child {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}
	.btn--narrow {
		line-height: 1.6;
		margin: .7em 0;
	}
	.btn__spacer {
		height: 33px;
	}
	.md .input__label,
	.lg .input__label {
		padding-right: 8px;
		text-align: right;
		line-height: 28px;
	}
	.input__hint {
		text-align: right;
		color: #444;
	}
	input[type=checkbox]+.input__hint {
		display: inline-block;
		margin-left: 8px;
	}
	.btn:active, .btn:focus,
	input:active, input:focus,
	select:active, select:focus,
	textarea:active, textarea:focus {
		border-color: #257;
		outline: 0 none;
		box-shadow:
			0 2px 5px rgba(0, 0, 0, .5) inset,
			0 0 2px 2px #6ae;
		z-index: 1;
	}
	.btn:hover,
	.btn:focus {
		filter: brightness(1.3) saturate(1.2);
		text-decoration: none;
	}
	.btn:active,
	.btn.is-active {
		box-shadow: inset 0 0 8px rgba(0, 0, 0, .5);
	}


%el Form-row
label.row
	.col.md-w4.input__label
		= _(title||name)
	.col.md-w8
		%child
		.input__hint
			= _(description)
			;if: description

%el Form-subheader
.col
	= _(title)

%el Form-fieldset
fieldset.grid.b2
	legend
		= _(schema.title || _link.title || "")

%el Form
Form-row
	input.field

%el Form-ro
Form-row>span ;txt: value

%el Form-hidden
div>input.field[type=hidden]

%el Form-boolean
Form-row
	input.field[type=checkbox] ;value: value

%el Form-boolean-ro
Form-row>span
	= _(!!value)

%el Form-password
Form-row
	input.field[type=password]

%el Form-new-password
Form-row
	input.field[type=password][autocomplete=new-password]

%el Form-text
Form-row
	textarea.field

%el Form-text-ro
Form-ro

%el Form-enum
Form-row
	select.field ;each:val in $d["enum"]
		option
			;val:: val
			= _("" + val)

%el Form-enum-ro
Form-ro

%el Form-list
Form-row
	select.field
		;list: api(resourceCollection.format(params, $d)), required ? 0 : [""], value
		option
			;val:: item.id
			;txt:: _(item.name)

%el Form-list-ro
Form-row>span
	= _(item.name)

%el Form-array
.col
	.input.p13.cf
		.left
			= _(title||name)
		.input__hint
			= _(description)
		.js-items.cf
		a.btn.right
			;if: !$d.noAdd
			;txt: _($d.name + ".Add")
			@click: $d.add

%el Form-array-item
.input.p3.m2b.cf.js-del
	a.right.Form-del.hand ×
		;if !$d.noAdd
		;set "data-tooltip", _("Delete")
		@click $d.del
	b
		;if: title
		;txt: title
	.grid.b2.js-item