<div>
	<h3 class="flexrow">
		Argon - Combat HUD: Theme Options
        <button type="button" name="export" data-tooltip="enhancedcombathud.themeOptions.savePermanent.tooltip">
            <i class="fas fa-file-export"></i>{{localize 'enhancedcombathud.themeOptions.savePermanent.label'}}
        </button>
	</h3>
	<hr/>
	<div class="form-group" style="display: none;">
		<label>{{localize 'enhancedcombathud.themeOptions.fontFamilyTitle'}}</label>
		<div class="form-fields">
			<input type="text" name="font" value="{{themeOptions.font}}" data-dtype="String">
		</div>
		<p class="notes">{{localize 'enhancedcombathud.themeOptions.fontFamilyHint'}}</p>
    </div>
	<div class="form-group">
		<label>{{localize 'enhancedcombathud.themeOptions.themeTitle'}}</label>
		<div class="form-fields">
			<select name="theme">
				<option value="custom" selected="">Custom</option>
			</select>
		</div>
		<p class="hint">{{localize 'enhancedcombathud.themeOptions.themeHint'}}</p>
    </div>
	<ul class="echThemeOptionsContainer">
	{{#each themeOptions.colors}}
		<li>
			<h4 class="toggleOptions">{{echLocalize @key}}</h4>
			<ul>
			{{#each this}}
				{{#ifObject this}}
				<li>
					{{echLocalize @../key @key}}
					{{#each this}}
						<div>
							<alpha-color-picker class="color-picker" name="colors.{{@../../key}}.{{@../key}}.{{@key}}" data-color-type="{{@key}}" value="{{this}}"  data-responsive-color></alpha-color-picker>
							<color-alpha-picker id="picker1" name="testColor" value="#ff5500aa"></color-alpha-picker>
						</div>
					{{/each}}
				{{else}}
					<div>
						<color-picker class="color-picker" name="colors.{{@../key}}.{{@key}}" data-color-type="{{@key}}" value="{{this}}"  data-responsive-color></color-picker>
					</div>

				</li>
				{{/ifObject}}
			{{/each}}
			</ul>
		</li>
	{{/each}}
	</ul>
</div>