<form autocomplete="off">
	<!-- BACKGROUND AND APPEARANCE -->
	<h3 class="form-header"><i class="far fa-image"></i> {{localize "NT.NarrationNav"}}</h3>
	<p class="notes">{{localize "NT.AppearanceHint"}}</p>

    <div class="form-group">
		<label>{{localize "SCENES.BackgroundColor"}}</label>
		<input class="color" type="text" name="BGColor" placeholder="#000000" value="{{BGColor}}" />
        <input type="color" value="{{BGColor}}" data-edit="BGColor"/>
        <p class="notes">{{localize "NT.BGColorHint"}}</p>
    </div>

    <div class="form-group">
        <label>{{localize "SCENES.BackgroundImage"}}</label>
        <div class="form-fields">
            {{filePicker target="BGImage" type="imagevideo"}}
            <input class="image" type="text" name="BGImage" placeholder="{{localize 'File Path'}}" value="{{BGImage}}"/>
        </div>
    </div>

    <div class="form-group">
		<label>{{localize "NOTE.FontFamily"}}</label>
        <div class="form-fields">
            {{filePicker target="WebFont" type="stylesheet"}}
            <input class="image" type="text" name="WebFont" placeholder="{{localize 'File Path'}}" value="{{WebFont}}"/>
        </div>
    </div>

    <div class="form-group">
		<label>{{localize "NOTE.TextColor"}}</label>
		<input class="color" type="text" name="TextColor" placeholder="white" value="{{TextColor}}" />
        <input type="color" value="{{TextColor}}" data-edit="TextColor"/>
    </div>

	<div class="form-group">
		<label>{{localize "NOTE.FontSize"}}</label>
		<input type="text" name="FontSize" placeholder="28px" value="{{FontSize}}" />
	</div>
    
    <div class="form-group">
		<label>{{localize "NT.TextShadow"}}</label>
		<input type="text" name="TextShadow" placeholder="3px 3px 2px black" value="{{TextShadow}}" />
    </div>

    <div class="form-group">
		<label>{{localize "NT.TextCSS"}}</label>
		<input type="text" name="TextCSS" placeholder="color: white; text-shadow: 3px 3px 2px black" value="{{TextCSS}}" />
    </div>
    
	<h3 class="form-header"><i class="fas fa-microchip"></i> {{localize "NT.OthersNav"}}</h3>
	<p class="notes">{{localize "NT.OthersHint"}}</p>

	<div class="form-group">
		<label>{{localize "NT.Pause"}}</label>
		<input type="checkbox" name="Pause" {{checked Pause}} />
    </div>

    <div class="form-group">
		<label>{{localize "NT.NarrationStartPaused"}}</label>
		<input type="checkbox" name="NarrationStartPaused" {{checked NarrationStartPaused}} />
    </div>
    
    <div class="form-group">
		<label>{{localize "NT.DurationMultiplier"}}</label>
        <input type="range" name="DurationMultiplier" min="0.5" max="2" step="0.05" value="{{DurationMultiplier}}" />
        <span class="range-value"></span>
        <p class="notes">{{localize "NT.DurationMultiplierHint"}}</p>
	</div>

    <div class="form-group">
		<label>{{localize "NT.MessageType"}}</label>
        <select name="MessageType">
            {{selectOptions CHAT_MESSAGE_TYPES selected=MessageType localize=true}}
        </select>
	</div>

    <h3 class="form-header"><i class="far fa-address-card"></i> {{localize "Permissions"}}</h3>
    <p class="notes">{{localize "NT.PermissionsHint"}}</p>

    <div class="form-group">
		<label>{{localize "NT.PERMScenery"}}</label>
        <select name="PERMScenery">
            {{selectOptions USER_ROLES selected=PERMScenery localize=true}}
        </select>
	</div>

    <div class="form-group">
		<label>/as</label>
        <select name="PERMAs">
            {{selectOptions USER_ROLES selected=PERMAs localize=true}}
        </select>
	</div>

    <div class="form-group">
		<label>/describe</label>
        <select name="PERMDescribe">
            {{selectOptions USER_ROLES selected=PERMDescribe localize=true}}
        </select>
	</div>

    <div class="form-group">
		<label>/narrate</label>
        <select name="PERMNarrate">
            {{selectOptions USER_ROLES selected=PERMNarrate localize=true}}
        </select>
	</div>

	<button type="submit" name="submit" value="1"><i class="far fa-save"></i> {{localize "Save Changes"}}</button>
</form>
