<div class='settings-list'>
	<p>
		{{localize 'TMFX.settings.autoTemplateSettings.overrides.introduction'}}
	</p>
	{{#each settings.autoTemplateSettings.overrides as |override idx|}}
		<div class='flexrow override-entry' data-idx="{{idx}}">
			<div class='flexcol'>
				<div class='form-group'>
					<label for="autoTemplateSettings.overrides.{{idx}}.target">
						{{localize 'TMFX.settings.autoTemplateSettings.target.label'}}
					</label>
					<div class='form-fields'>
						<input
							type='text'
							name="autoTemplateSettings.overrides.{{idx}}.target"
							value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'target'}}"
						/>
					</div>
				</div>
				<div class='form-group'>
					<label for="autoTemplateSettings.overrides.{{idx}}.opacity">
						{{localize 'TMFX.template.opacity'}}
					</label>
					<div class='form-fields'>
						<input
							type='range'
							name="autoTemplateSettings.overrides.{{idx}}.opacity"
							value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'opacity'}}"
							min='0.0'
							max='1.0'
							step='0.05'
							data-dtype='Number'
						/>
						<span class='range-value'>
							{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'opacity'}}
						</span>
					</div>
				</div>
				<div class='form-group'>
					<label for="autoTemplateSettings.overrides.{{idx}}.tint">
						{{localize 'TMFX.template.tint'}}
					</label>
					<div class='form-fields'>
						<input
							class='color'
							type='text'
							name="autoTemplateSettings.overrides.{{idx}}.tint"
							value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'tint'}}"
						/>
						<input
							type='color'
							value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'tint'}}"
							data-edit="autoTemplateSettings.overrides.{{idx}}.tint"
						/>
					</div>
				</div>
				<div class='form-group'>
					<label for="autoTemplateSettings.overrides.{{idx}}.preset">
						{{localize 'TMFX.template.fx'}}
					</label>
					<select name="autoTemplateSettings.overrides.{{idx}}.preset" data-dtype='String'>
						{{#select (lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'preset')}}
							<option value="{{@root.emptyPreset}}"></option>
							{{#each @root.presets as |preset|}}
								<option value="{{preset.name}}">
									{{preset.name}}
								</option>
							{{/each}}
						{{/select}}
					</select>
				</div>
				<div class='form-group'>
					<label for="autoTemplateSettings.overrides.{{idx}}.texture">
						{{localize 'TMFX.settings.autoTemplateSettings.texture.label'}}
					</label>
					<div class='form-fields'>
						{{filePicker target=(concat (concat 'autoTemplateSettings.overrides.' idx) '.texture') type='imagevideo'}}
						<input
							class='image'
							type='text'
							name="autoTemplateSettings.overrides.{{idx}}.texture"
							placeholder='path/image.png'
							value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'texture'}}"
							data-dtype='String'
						/>
					</div>
				</div>
			</div>
			<div class='flexcol remove-override-wrapper'>
				<button class='remove-override' data-idx="{{idx}}">
					<i class='far fa-trash-alt'></i>
				</button>
			</div>
		</div>
	{{/each}}
</div>
<footer class='sheet-footer flexrow add-override-wrapper'>
	<button class='add-override'>
		<i class='far fa-plus-square'></i>{{localize 'TMFX.settings.autoTemplateSettings.overrides.add'}}
	</button>
</footer>