<div class="tab{{#if tab.active}} active{{/if}} scrollable" data-group="{{tab.group}}" data-tab="{{tab.id}}">
	<p>
		{{localize 'TMFX.settings.autoTemplateSettings.overrides.introduction'}}
	</p>

	{{#each settings.autoTemplateSettings.overrides as |override idx|}}
	<fieldset class='override-entry' data-idx="{{idx}}">
		<legend>{{localize 'TMFX.settings.autoTemplateSettings.target.label'}} <input
					type='text'
					name="autoTemplateSettings.overrides.{{idx}}.target"
					value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'target'}}"
				/>
				<button data-idx="{{idx}}" type="button" data-action="removeOverride">
					<i class='far fa-trash-alt'></i>
				</button>
		</legend>
		<div class='form-group'>
			<label for="autoTemplateSettings.overrides.{{idx}}.opacity">
				{{localize 'TMFX.template.opacity'}}
			</label>
			<div class='form-fields'>
				<range-picker 
					name="autoTemplateSettings.overrides.{{idx}}.opacity"
					value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'opacity'}}" 
					min="0.0" 
					max="1.0" 
					step="0.05">
				</range-picker>
			</div>
		</div>
		<div class='form-group'>
			<label for="autoTemplateSettings.overrides.{{idx}}.tint">
				{{localize 'TMFX.template.tint'}}
			</label>
			<div class='form-fields'>
				<color-picker 
					name="autoTemplateSettings.overrides.{{idx}}.tint"
					value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'tint'}}"></color-picker>
			</div>
		</div>
		<div class='form-group'>
			<label for="autoTemplateSettings.overrides.{{idx}}.preset">
				{{localize 'TMFX.template.fx'}}
			</label>
			<select name="autoTemplateSettings.overrides.{{idx}}.preset">
				{{selectOptions @root.presets selected=(lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'preset') valueAttr="name" labelAttr="name" localize=false}}
			</select>
		</div>
		<div class='form-group'>
			<label for="autoTemplateSettings.overrides.{{idx}}.texture">
				{{localize 'TMFX.settings.autoTemplateSettings.texture.label'}}
			</label>
			<div class='form-fields'>
				<file-picker 
					name="autoTemplateSettings.overrides.{{idx}}.texture"
					type="imagevideo" 
					placeholder="path/image.png"
					value="{{lookup (lookup @root.settings.autoTemplateSettings.overrides idx) 'texture'}}"></file-picker>
			</div>
		</div>
	</fieldset>
	{{/each}}
	<footer class='flexrow'>
		<button type="button" data-action="addOverride">
			<i class='far fa-plus-square'></i>{{localize 'TMFX.settings.autoTemplateSettings.overrides.add'}}
		</button>
	</footer>
</div>