<div class="tab tabAppearance" data-tab="{{dicetype}}" data-group="dsn-dice">
    <div class="form-group" data-system-group>
        <label>{{localize "DICESONICE.system"}}</label>
        <select data-system data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][system]">
            {{selectOptions systemList selected=appearance.system}}
        </select>
        <a class="system-control {{systemSettingsVisible}}" data-system-options title='{{localize "DICESONICE.Options"}}'><i class="fas fa-cog"></i></a>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.colorset"}}</label>
        <select data-colorset data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][colorset]">
            {{selectOptions colorsetList selected=appearance.colorset localize=true}}
        </select>
        <p class="hint">{{localize "DICESONICE.colorsetDesc"}}</p>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.texture"}}</label>
        <select data-texture data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][texture]">
            {{selectOptions textureList selected=appearance.texture}}
        </select>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.material"}}</label>
        <select data-material data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][material]">
            {{selectOptions materialList selected=appearance.material}}
        </select>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.font"}}</label>
        <select data-font data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][font]">
            {{selectOptions fontList selected=appearance.font}}
        </select>
    </div>

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

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

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

    <div class="form-group">
        <label>{{localize "DICESONICE.edgeColor"}}</label>
        <div class="form-fields">
            <input type="text" data-edgeColor data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][edgeColor]" value="{{appearance.edgeColor}}" data-dtype="String" />
            <input type="color" name="appearance[{{dicetype}}][edgeColorSelector]" value="{{appearance.edgeColor}}"
                data-edit="appearance[{{dicetype}}][edgeColor]" data-edgeColorSelector />
        </div>
    </div>
    <div class="dsn-hidden">
        <div data-systemSettings-hidden>
            {{{systemSettings}}}
        </div>
    </div>
</div>