<form autocomplete="off" class="dice-so-nice flexcol">
    <nav class="sheet-tabs tabs">
        <a class="item active" data-tab="general"><i class="fas fa-dice-d20"></i> {{localize "DICESONICE.settingsAppearance"}}</a>
        <a class="item" data-tab="preferences"><i class="fas fa-cogs"></i> {{localize "DICESONICE.settingsPreferences"}}</a>
        <a class="item" data-tab="sfx"><i class="fas fa-meteor"></i> {{localize "DICESONICE.settingsSpecialEffects"}}</a>
        <a class="item" data-tab="performance"><i class="fas fa-tachometer-alt"></i> {{localize "DICESONICE.settingsPerformance"}}</a>
    </nav>
    <section id="config-tabs" class="content">
        <div class="tab active" data-tab="general">
            <div class="settings-list">
                <div id="dice-configuration-canvas"></div>
                <div class="dsn-settings-container">
                    <div class="form-group">
                        <label>{{localize "DICESONICE.enable"}}</label>
                        <input type="checkbox" name="enabled" data-dtype="Boolean" {{checked enabled}} />
                    </div>
                    <a class="dice-more-theme" href="https://gitlab.com/riccisi/foundryvtt-dice-so-nice/-/wikis/Links" target="_blank">
                        <i class="fas fa-store"></i> {{localize "DICESONICE.FindMoreTheme"}}
                    </a>
                    <div class="form-group">
                        <label>{{localize "DICESONICE.system"}}</label>
                        <select name="system">
                            {{#select system}}
                            {{#each systemList as |name key|}}
                            <option value="{{key}}">{{name}}</option>
                            {{/each}}
                            {{/select}}
                        </select>
                    </div>

                    <div class="form-group">
                        <label>{{localize "DICESONICE.colorset"}}</label>
                        <select name="colorset">
                            {{#select colorset}}
                            {{#each colorsetList as |group key|}}
                            <optgroup label="{{key}}">
                                {{#each group as |name id|}}
                                <option value="{{id}}">{{name}}</option>
                                {{/each}}
                            </optgroup>
                            {{/each}}
                            {{/select}}
                        </select>
                        <p class="notes">{{localize "DICESONICE.colorsetDesc"}}</p>
                    </div>

                    <div class="form-group">
                        <label>{{localize "DICESONICE.texture"}}</label>
                        <select name="texture">
                            {{#select texture}}
                            {{#each textureList as |name key|}}
                            <option value="{{key}}">{{name}}</option>
                            {{/each}}
                            {{/select}}
                        </select>
                    </div>

                    <div class="form-group">
                        <label>{{localize "DICESONICE.material"}}</label>
                        <select name="material">
                            {{#select material}}
                            {{#each materialList as |name key|}}
                            <option value="{{key}}">{{name}}</option>
                            {{/each}}
                            {{/select}}
                        </select>
                    </div>

                    <div class="form-group">
                        <label>{{localize "DICESONICE.font"}}</label>
                        <select name="font">
                            {{#select font}}
                            {{#each fontList as |name key|}}
                            <option value="{{key}}">{{name}}</option>
                            {{/each}}
                            {{/select}}
                        </select>
                    </div>

                    <div class="form-group">
                        <label>{{localize "DICESONICE.labelColor"}}</label>
                        <div class="form-fields">
                            <input type="text" name="labelColor" value="{{labelColor}}" data-dtype="String" />
                            <input type="color" name="labelColorSelector" value="{{labelColor}}" data-edit="labelColor" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label>{{localize "DICESONICE.diceColor"}}</label>
                        <div class="form-fields">
                            <input type="text" name="diceColor" value="{{diceColor}}" data-dtype="String" />
                            <input type="color" name="diceColorSelector" value="{{diceColor}}" data-edit="diceColor" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label>{{localize "DICESONICE.outlineColor"}}</label>
                        <div class="form-fields">
                            <input type="text" name="outlineColor" value="{{outlineColor}}" data-dtype="String" />
                            <input type="color" name="outlineColorSelector" value="{{outlineColor}}" data-edit="outlineColor" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label>{{localize "DICESONICE.edgeColor"}}</label>
                        <div class="form-fields">
                            <input type="text" name="edgeColor" value="{{edgeColor}}" data-dtype="String" />
                            <input type="color" name="edgeColorSelector" value="{{edgeColor}}" data-edit="edgeColor" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab" data-tab="preferences">
            <div class="settings-list">
                <div class="form-group">
                    <label>{{localize "DICESONICE.hideAfterRoll"}}</label>
                    <input type="checkbox" name="hideAfterRoll" data-dtype="Boolean" {{checked hideAfterRoll}} />
                </div>

                <div class="form-group setting-timeBeforeHide">
                    <label>{{localize "DICESONICE.timeBeforeHide"}}</label>
                    <input type="text" name="timeBeforeHide" value="{{timeBeforeHide}}">
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.hideFX"}}</label>
                    <select name="hideFX">
                        {{#select hideFX}}
                        {{#each fxList as |name key|}}
                        <option value="{{key}}">{{name}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.sounds"}}</label>
                    <input type="checkbox" name="sounds" data-dtype="Boolean" {{checked sounds}} />
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.soundsVolume"}}</label>
                    <div class="form-fields">
                        <input type="range" name="soundsVolume" value="{{soundsVolume}}" min="0.1" max="1" step="0.1" data-dtype="Number">
                        <span class="range-value">{{soundsVolume}}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.soundsSurface"}}</label>
                    <select name="soundsSurface">
                        {{#select soundsSurface}}
                        {{#each soundsSurfaceList as |name key|}}
                        <option value="{{key}}">{{name}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.autoSize"}}</label>
                    <input type="checkbox" name="autoscale" data-dtype="Boolean" {{checked autoscale}} />
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.size"}}</label>
                    <div class="form-fields">
                        <input type="range" name="scale" value="{{scale}}" min="20" max="100" step="1" data-dtype="Number">
                        <span class="range-value">{{scale}}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.speed"}}</label>
                    <select name="speed">
                        {{#select speed}}
                        {{#each speedList as |name key|}}
                        <option value="{{key}}">{{name}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.canvasZIndex"}}</label>
                    <select name="canvasZIndex">
                        {{#select canvasZIndex}}
                        {{#each canvasZIndexList as |name key|}}
                        <option value="{{key}}">{{name}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.throwingForce"}}</label>
                    <select name="throwingForce">
                        {{#select throwingForce}}
                        {{#each throwingForceList as |name key|}}
                        <option value="{{key}}">{{name}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                </div>
            </div>
        </div>
        <div class="tab" data-tab="sfx">
            <div class="settings-list">
                <div class="form-group">
                    <label>{{localize "DICESONICE.showOthersSFX"}}</label>
                    <input type="checkbox" name="showOthersSFX" data-dtype="Boolean" {{checked showOthersSFX}} />
                </div>
                <ol id="sfxs-list" class="sfxs-list">
                    <li class="sfx flexrow sfx-header">
                        <div class="sfx-name">{{localize "DICESONICE.diceType"}}</div>
                        <div class="sfx-name">{{localize "DICESONICE.onResult"}}</div>
                        <div class="sfx-name sfx-double">{{localize "DICESONICE.specialEffect"}}</div>
                        <div class="sfx-controls">
                            <a class="sfx-control sfx-create" title='{{localize "DICESONICE.Add"}}'><i class="fas fa-plus"></i></a>
                        </div>
                    </li>
                    {{#each specialEffects as |sfx id|}}
                    <li class="sfx flexrow sfx-line">
                        <div class="sfx-data">
                            <input type="text" name="sfxLine[{{id}}][diceType]" value="{{sfx.diceType}}" placeholder="d20, d6, df..." />
                        </div>
                        <div class="sfx-data">
                            <input type="text" name="sfxLine[{{id}}][onResult]" value="{{sfx.onResult}}" />
                        </div>
                        <div class="sfx-data sfx-double">
                            <select name="sfxLine[{{id}}][specialEffect]">
                                {{selectOptions ../specialEffectsMode selected=sfx.specialEffect localize=true}}
                            </select>
                        </div>
                        <div class="sfx-controls">
                            <a class="sfx-control sfx-delete" title='{{localize "DICESONICE.Delete"}}'><i class="fas fa-trash"></i></a>
                        </div>
                    </li>
                    {{/each}}
                </ol>
            </div>
        </div>
        <div class="tab" data-tab="performance">
            <div class="settings-list">
                <div class="form-group">
                    <label>{{localize "DICESONICE.shadowQuality"}}</label>
                    <select name="shadowQuality">
                        {{#select shadowQuality}}
                        {{#each shadowQualityList as |name key|}}
                        <option value="{{key}}">{{name}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.bumpMapping"}}</label>
                    <input type="checkbox" name="bumpMapping" data-dtype="Boolean" {{checked bumpMapping}} />
                </div>

                <div class="form-group">
                    <label>{{localize "DICESONICE.useHighDPI"}}</label>
                    <input type="checkbox" name="useHighDPI" data-dtype="Boolean" {{checked useHighDPI}} />
                </div>
            </div>
        </div>
    </section>
    <footer class="sheet-footer flexrow">
        <button type="button" name="reset">
            <i class="fas fa-refresh"></i> {{localize "DICESONICE.Reset"}}
        </button>
        <button type="submit" name="submit">
            <i class="fas fa-save"></i> {{localize "DICESONICE.Save"}}
        </button>
    </footer>
</form>