<section class="tab {{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
    <div class="title-hint">{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.hint"}}</div>
    <div class="field-section form-fields">
        {{#if isGM}}
            <div class="form-group">
                <label for="dsn-overrideEnabled">{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.defaultAnimations"}}</label>
                <input id="dsn-overrideEnabled" type="checkbox" class="default-animations-input" {{checked globalOverrides.diceSoNice.sfx.overrideEnabled}} />
            </div>
        {{/if}}
        <div class="form-group"> 
            <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.critical"}}</label>
            
            <div class="form-fields">
                <div class="form-fields">
                    {{formInput fields.diceSoNice.fields.sfx.fields.critical.fields.class value=setting.diceSoNice.sfx.critical.class blank="" localize=true}}
                </div>      
                <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.muted"}}</label>
                <div class="form-fields">
                    {{formInput fields.diceSoNice.fields.sfx.fields.critical.fields.options.fields.muteSound value=setting.diceSoNice.sfx.critical.options.muteSound localize=true}}
                </div>   
            </div>
        </div>
    </div>
    <section class='tab-navigation'>
        <div class='navigation-container'>
            <div class="navigation-inner-container">
                <line-div></line-div>
                <nav class='feature-tab sheet-tabs tabs' data-group='diceSoNice'>
                    {{#each dsnTabs as |tab|}}
                        <a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
                        {{localize tab.label}}
                    </a>
                    {{/each}}
                </nav>
                <line-div></line-div>
            </div>
        </div>
    </section>
    {{#each dsnTabs as |dsnTab|}}
        <section class="tab {{#if dsnTab.active}} active{{/if}}" data-group="{{dsnTab.group}}" data-tab="{{dsnTab.id}}">
            {{> "systems/daggerheart/templates/settings/appearance-settings/diceSoNiceTab.hbs" dsnTab }}
        </section>
    {{/each}}
</section>