<div>
	<fieldset>
		<div class="form-group">
			<label>{{localize "DICE_TRAY.DiceCreator.Formula.name"}}</label>
			<div class="form-fields">
				<input type="text" name="dice.key" value="{{dice.key}}" required />
			</div>
			<p class="hint">{{localize "DICE_TRAY.DiceCreator.Formula.hint"}}</p>
		</div>
		<div class="form-group">
			<label>{{localize "DICE_TRAY.DiceCreator.Row.name"}}</label>
			<div class="form-fields">
				<input
					type="number"
					name="row"
					value="{{value}}"
					min="{{value}}"
					max="{{maxRows}}"
					steps="1"
					required
					{{ifThen (eq value maxRows) "readonly" ""}}
				/>
			</div>
			<p class="hint">{{localize "DICE_TRAY.DiceCreator.Row.hint"}}</p>
		</div>
		<div class="form-group">
			<label>{{localize "DICE_TRAY.DiceCreator.Image.name"}}</label>
			<div class="form-fields">
				<file-picker name="dice.img" value="{{dice.img}}" data-type="image" data-target="img"></file-picker>
			</div>
		</div>
	</fieldset>
	<fieldset>
		<legend>{{localize "DICE_TRAY.Optional"}}</legend>
		<div class="form-group">
			<label>{{localize "DICE_TRAY.DiceCreator.Label.name"}}</label>
			<div class="form-fields">
				<input type="text" name="dice.label" value="{{dice.label}}" placeholder="{{dice.key}}" />
			</div>
			<p class="hint">{{localize "DICE_TRAY.DiceCreator.Label.hint"}}</p>
		</div>
		<div class="form-group">
			<label>{{localize "DICE_TRAY.DiceCreator.Tooltip.name"}}</label>
			<div class="form-fields">
				<input type="text" name="dice.tooltip" value="{{dice.tooltip}}" placeholder="{{dice.key}}"/>
			</div>
			<p class="hint">{{localize "DICE_TRAY.DiceCreator.Tooltip.hint"}}</p>
		</div>
		<div class="form-group">
			<label>{{localize "DICE_TRAY.DiceCreator.Color.name"}}</label>
			<div class="form-fields">
				<color-picker name="dice.color" value="{{dice.color}}"></color-picker>
			</div>
			<p class="hint">{{localize "DICE_TRAY.DiceCreator.Color.hint"}}</p>
		</div>
	</fieldset>
</div>