<div class="tab active" data-tab="general">
    <form autocomplete="off" class="chat-portrait">

        <div class="form-group">
            <label>{{localize "chat-portrait.use-token-image-s"}}</label>
            <input type="checkbox" name="useTokenImage" data-dtype="Boolean" {{checked useTokenImage}}/>
            <p class="notes">{{localize "chat-portrait.use-token-image-l"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.doNotUseTokenImageWithSpecificType.name"}}</label>
            <input type="text" name="doNotUseTokenImageWithSpecificType" value="{{ doNotUseTokenImageWithSpecificType }}" style="flex: 1; text-align: left;"/>
            <p class="notes">{{localize "chat-portrait.settings.doNotUseTokenImageWithSpecificType.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.useTokenName.name"}}</label>
            <input type="checkbox" name="useTokenName" data-dtype="Boolean" {{checked useTokenName}}/>
            <p class="notes">{{localize "chat-portrait.settings.useTokenName.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.useAvatarImage.name"}}</label>
            <input type="checkbox" name="useAvatarImage" data-dtype="Boolean" {{checked useAvatarImage}}/>
            <p class="notes">{{localize "chat-portrait.settings.useAvatarImage.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displayPlayerName.name"}}</label>
            <input type="checkbox" name="displayPlayerName" data-dtype="Boolean" {{checked displayPlayerName}}/>
            <p class="notes">{{localize "chat-portrait.settings.displayPlayerName.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.portrait-size-s"}}</label>
            <input type="text" name="portraitSize" value="{{ portraitSize }}" style="flex: 1; text-align: left;"/>
            <p class="notes">{{localize "chat-portrait.portrait-size-l"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.portrait-size-item-s"}}</label>
            <input type="text" name="portraitSizeItem" value="{{ portraitSizeItem }}" style="flex: 1; text-align: left;"/>
            <p class="notes">{{localize "chat-portrait.portrait-size-item-l"}}</p>
        </div>

        <!--
        <div class="form-group">
            <label>{{localize "chat-portrait.border-shape-s"}}</label>
            <select name="borderShape" style="flex: 1;">
                {{#select borderShape}}
                {{#each borderShapeList as |name key|}}
                <option value="{{key}}">{{name}}</option>
                {{/each}}
                {{/select}}
            </select>
            <p class="notes">{{localize "chat-portrait.border-shape-l"}}</p>
        </div>
        -->
        <div class="form-group">
            <label>{{localize "chat-portrait.border-shape-s"}}</label>
            <select name="borderShape" style="flex: 1;">
                {{#select borderShapeList}}
                {{#each borderShapeList}}
                <!--<option value="{{@index}}" {{#if this.selected}}selected="selected" {{/if}}>{{this.value}}</option>-->
                <option value="{{this.value}}" {{#if this.selected}}selected="selected" {{/if}}>{{this.value}}</option>
                {{/each}}
                {{/select}}
            </select>
            <p class="notes">{{localize "chat-portrait.border-shape-l"}}</p>
        </div>
        <div class="form-group">
            <label>{{localize "chat-portrait.user-color-as-border-color"}}</label>
            <input type="checkbox" name="useUserColorAsBorderColor" data-dtype="Boolean" {{checked useUserColorAsBorderColor}}/>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.border-color"}}</label>
            <div class="form-fields">
                <input type="text"  name="borderColor" value="{{borderColor}}" data-dtype="String"/>
                <input type="color" name="borderColorSelector" value="{{labelColor}}" data-edit="borderColor"/>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.border-width-s"}}</label>
            <input type="text" name="borderWidth" value="{{borderWidth}}" style="flex: 1; text-align: left;"/>
            <p class="notes">{{localize "chat-portrait.border-width-l"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.user-color-as-chat-border-color-s"}}</label>
            <input type="checkbox" name="useUserColorAsChatBorderColor" data-dtype="Boolean" {{checked useUserColorAsChatBorderColor}}/>
            <p class="notes">{{localize "chat-portrait.user-color-as-chat-border-color-l"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.user-color-as-chat-background-color-s"}}</label>
            <input type="checkbox" name="useUserColorAsChatBackgroundColor" data-dtype="Boolean" {{checked useUserColorAsChatBackgroundColor}}/>
            <p class="notes">{{localize "chat-portrait.user-color-as-chat-background-color-l"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.flavor-next-to-portrait"}}</label>
            <input type="checkbox" name="flavorNextToPortrait" data-dtype="Boolean" {{checked flavorNextToPortrait}}/>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.force-name-search-s"}}</label>
            <input type="checkbox" name="forceNameSearch" data-dtype="Boolean" {{checked forceNameSearch}}/>
            <p class="notes">{{localize "chat-portrait.force-name-search-l"}}</p>
        </div>
        <!--
        <div class="form-group">
            <label>{{localize "chat-portrait.settings.hoverTooltip.name"}}</label>
            <input type="checkbox" name="hoverTooltip" data-dtype="Boolean" {{checked hoverTooltip}}/>
            <p class="notes">{{localize "chat-portrait.settings.hoverTooltip.hint"}}</p>
        </div>
        -->
        <div class="form-group">
            <label>{{localize "chat-portrait.settings.textSizeName.name"}}</label>
            <input type="text" name="textSizeName" value="{{ textSizeName }}" style="flex: 1; text-align: left;"/>
            <p class="notes">{{localize "chat-portrait.settings.textSizeName.hint"}}</p>
        </div>
        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displaySetting.name"}}</label>
            <select name="displaySetting" style="flex: 1;">
                {{#select displaySettingList}}
                {{#each displaySettingList}}
                <!--<option value="{{@index}}" {{#if this.selected}}selected="selected" {{/if}}>{{this.value}}</option>-->
                <option value="{{this.value}}" {{#if this.selected}}selected="selected" {{/if}}>{{this.value}}</option>
                {{/each}}
                {{/select}}
            </select>
            <p class="notes">{{localize "chat-portrait.settings.displaySetting.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displayMessageTag.name"}}</label>
            <input type="checkbox" name="displayMessageTag" data-dtype="Boolean" {{checked displayMessageTag}}/>
            <p class="notes">{{localize "chat-portrait.settings.displayMessageTag.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.useImageReplacer.name"}}</label>
            <input type="checkbox" name="useImageReplacer" data-dtype="Boolean" {{checked useImageReplacer}}/>
            <p class="notes">{{localize "chat-portrait.settings.useImageReplacer.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.useImageReplacerDamageType.name"}}</label>
            <input type="checkbox" name="useImageReplacerDamageType" data-dtype="Boolean" {{checked useImageReplacerDamageType}}/>
            <p class="notes">{{localize "chat-portrait.settings.useImageReplacerDamageType.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.applyOnCombatTracker.name"}}</label>
            <input type="checkbox" name="applyOnCombatTracker" data-dtype="Boolean" {{checked applyOnCombatTracker}}/>
            <p class="notes">{{localize "chat-portrait.settings.applyOnCombatTracker.hint"}}</p>
        </div>
    <!--
        <div class="form-group">
            <label>{{localize "chat-portrait.settings.applyPreCreateChatMessagePatch.name"}}</label>
            <input type="checkbox" name="applyPreCreateChatMessagePatch" data-dtype="Boolean" {{checked applyPreCreateChatMessagePatch}}/>
            <p class="notes">{{localize "chat-portrait.settings.applyPreCreateChatMessagePatch.hint"}}</p>
        </div>
    -->
        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displaySettingOTHER.name"}}</label>
            <input type="checkbox" name="displaySettingOTHER" data-dtype="Boolean" {{checked displaySettingOTHER}}/>
            <p class="notes">{{localize "chat-portrait.settings.displaySettingOTHER.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displaySettingOOC.name"}}</label>
            <input type="checkbox" name="displaySettingOOC" data-dtype="Boolean" {{checked displaySettingOOC}}/>
            <p class="notes">{{localize "chat-portrait.settings.displaySettingOOC.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displaySettingIC.name"}}</label>
            <input type="checkbox" name="displaySettingIC" data-dtype="Boolean" {{checked displaySettingIC}}/>
            <p class="notes">{{localize "chat-portrait.settings.displaySettingIC.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displaySettingEMOTE.name"}}</label>
            <input type="checkbox" name="displaySettingEMOTE" data-dtype="Boolean" {{checked displaySettingEMOTE}}/>
            <p class="notes">{{localize "chat-portrait.settings.displaySettingEMOTE.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displaySettingWHISPER.name"}}</label>
            <input type="checkbox" name="displaySettingWHISPER" data-dtype="Boolean" {{checked displaySettingWHISPER}}/>
            <p class="notes">{{localize "chat-portrait.settings.displaySettingWHISPER.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displaySettingROLL.name"}}</label>
            <input type="checkbox" name="displaySettingROLL" data-dtype="Boolean" {{checked displaySettingROLL}}/>
            <p class="notes">{{localize "chat-portrait.settings.displaySettingROLL.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displaySettingWhisperToOther.name"}}</label>
            <input type="checkbox" name="displaySettingWhisperToOther" data-dtype="Boolean" {{checked displaySettingWhisperToOther}}/>
            <p class="notes">{{localize "chat-portrait.settings.displaySettingWhisperToOther.hint"}}</p>
        </div>

        <!--
        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displayUnknown.name"}}</label>
            <select name="displayUnknown" style="flex: 1;">
                {{#select displayUnknownList}}
                {{#each displayUnknownList}}
                <option value="{{this.value}}" {{#if this.selected}}selected="selected" {{/if}}>{{this.value}}</option>
                {{/each}}
                {{/select}}
            </select>
            <p class="notes">{{localize "chat-portrait.settings.displayUnknown.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displayUnknownPlaceHolderActorName.name"}}</label>
            <input type="text" name="displayUnknownPlaceHolderActorName" value="{{displayUnknownPlaceHolderActorName}}" style="flex: 1; text-align: left;"/>
            <p class="notes">{{localize "chat-portrait.settings.displayUnknownPlaceHolderActorName.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displayUnknownPlaceHolderItemName.name"}}</label>
            <input type="text" name="displayUnknownPlaceHolderItemName" value="{{displayUnknownPlaceHolderItemName}}" style="flex: 1; text-align: left;"/>
            <p class="notes">{{localize "chat-portrait.settings.displayUnknownPlaceHolderItemName.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.displayUnknownPlaceHolderItemIcon.name"}}</label>
            <div class="form-fields">
                {{filePicker target="displayUnknownPlaceHolderItemIcon" type="image"}}
                <input class="image" type="text" name="displayUnknownPlaceHolderItemIcon" placeholder="path/image.png" value="{{displayUnknownPlaceHolderItemIcon}}"/>
            </div>
            <p class="notes">{{localize "chat-portrait.settings.displayUnknownPlaceHolderItemIcon.hint"}}</p>
        </div>
        -->

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.customStylingMessageSystem.name"}}</label>
            <input type="checkbox" name="customStylingMessageSystem" data-dtype="Boolean" {{checked customStylingMessageSystem}}/>
            <p class="notes">{{localize "chat-portrait.settings.customStylingMessageSystem.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.customStylingMessageText.name"}}</label>
            <textarea name="customStylingMessageText" style="flex: 1; text-align: left;">{{customStylingMessageText}}</textarea>
            <p class="notes">{{localize "chat-portrait.settings.customStylingMessageText.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.customStylingMessageImage.name"}}</label>
            <textarea name="customStylingMessageImage" style="flex: 1; text-align: left;">{{customStylingMessageImage}}</textarea>
            <p class="notes">{{localize "chat-portrait.settings.customStylingMessageImage.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "chat-portrait.settings.disablePortraitForAliasGmMessage.name"}}</label>
            <input type="checkbox" name="disablePortraitForAliasGmMessage" data-dtype="Boolean" {{checked disablePortraitForAliasGmMessage}}/>
            <p class="notes">{{localize "chat-portrait.settings.disablePortraitForAliasGmMessage.hint"}}</p>
        </div>

        <div class="form-group">
            <label>{{ localize "chat-portrait.settings.setUpPortraitForAliasGmMessage.name" }}</label>
            <div class="form-fields">
                {{filePicker target="setUpPortraitForAliasGmMessage" type="image"}}
                <input class="image" type="text" name="setUpPortraitForAliasGmMessage" placeholder="path/image.png" value="{{setUpPortraitForAliasGmMessage}}"/>
            </div>
            <p class="notes">{{localize "chat-portrait.settings.setUpPortraitForAliasGmMessage.hint"}}</p>
        </div>


        <div class="form-group" style="margin: 10px;">
            <button type="submit" name="submit">
                <i class="fas fa-save"></i> {{localize "chat-portrait.save"}}
            </button>
            <button type="button" name="reset">
                <i class="fas fa-undo"></i> {{localize "chat-portrait.reset"}}
            </button>
        </div>

    </form>
</div>
