<template name="admin">
	{{#with group}}
		<section class="page-container page-home page-static page-settings">
			<header class="fixed-title border-component-color">
				{{> burger}}
				<h2>
					<span class="room-title">{{label}}</span>
				</h2>
				<div class="submit">
					{{#if hasChanges}}
						<button class="button danger discard"><i class="icon-send"></i><span>{{_ "Cancel"}}</span></button>
					{{/if}}
					<button class="button primary save" disabled="{{not hasChanges}}"><i class="icon-send"></i><span>{{_ "Save_changes"}}</span></button>
				</div>
			</header>

			<div class="content background-transparent-dark">
				{{#unless hasPermission 'view-privileged-setting'}}
					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
				{{else}}
					{{#if description}}
						<div class="info">
							<p class="settings-description">{{description}}</p>
						</div>
					{{/if}}
					<div class="rocket-form">
						{{#each sections}}
							<div class="section {{#if section}}section-collapsed{{/if}}">
								{{#if section}}
									<div class="section-title">
										<div class="section-title-text">
											{{translateSection section}}
										</div>
										<div class="section-title-right">
											<button class="button primary expand"><span>{{_ "Expand"}}</span></button>
										</div>
									</div>
								{{/if}}
								<div class="section-content border-component-color">
									{{#if section}}
										{{#if sectionIsCustomOAuth section}}
											<div class="section-helper">
												{{#with callbackURL section}}
													{{{_ "Custom_oauth_helper" .}}}
												{{/with}}
											</div>
										{{/if}}
									{{/if}}
									{{#each settings}}
										<div class="input-line double-col {{#if isSettingChanged _id}}setting-changed{{/if}}" {{isDisabled}}>
											<label class="setting-label">{{label}}</label>
											<div class="setting-field">
												{{#if $eq type 'string'}}
													{{#if multiline}}
														<textarea class="input-monitor" name="{{_id}}" rows="4" style="height: auto" {{isDisabled}}>{{value}}</textarea>
													{{else}}
														<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
													{{/if}}
												{{/if}}

												{{#if $eq type 'relativeUrl'}}
													<input class="input-monitor" type="text" name="{{_id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}}/>
												{{/if}}

												{{#if $eq type 'password'}}
													<input class="input-monitor" type="password" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
												{{/if}}

												{{#if $eq type 'int'}}
													<input class="input-monitor" type="number" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
												{{/if}}

												{{#if $eq type 'boolean'}}
													<label><input class="input-monitor" type="radio" name="{{_id}}" value="1" checked="{{$eq value true}}" {{isDisabled}}/> {{_ "True"}}</label>
													<label><input class="input-monitor" type="radio" name="{{_id}}" value="0" checked="{{$eq value false}}" {{isDisabled}}/> {{_ "False"}}</label>
												{{/if}}

												{{#if $eq type 'select'}}
													<div class="select-arrow">
														<i class="icon-down-open secondary-font-color"></i>
													</div>
													<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
														{{#each values}}
															<option value="{{key}}" selected="{{selectedOption ../_id key}}">{{_ i18nLabel}}</option>
														{{/each}}
													</select>
												{{/if}}

												{{#if $eq type 'language'}}
													<div class="select-arrow">
														<i class="icon-down-open secondary-font-color"></i>
													</div>
													<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
														{{#each languages}}
														<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
														{{/each}}
													</select>
												{{/if}}

												{{#if $eq type 'color'}}
													<div class="horizontal">
														{{#if $eq editor 'color'}}
															<div class="flex-grow-1">
																<input class="input-monitor colorpicker-input" type="text" name="{{_id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/>
																<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
															</div>
														{{/if}}
														{{#if $eq editor 'expression'}}
															<div class="flex-grow-1">
																<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
															</div>
														{{/if}}
														<div class="color-editor">
															<div class="select-arrow">
																<i class="icon-down-open secondary-font-color"></i>
															</div>
															<select name="color-editor">
																{{#each allowedTypes}}
																	<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
																{{/each}}
															</select>
														</div>
													</div>
													<div class="settings-description">Variable name: {{getColorVariable _id}}</div>
												{{/if}}

												{{#if $eq type 'font'}}
													<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
												{{/if}}

												{{#if $eq type 'code'}}
													{{#if isDisabled.disabled}}
														{{> CodeMirror name=_id options=(getEditorOptions true) code=(i18nDefaultValue) }}
													{{else}}
														<div class="code-mirror-box" data-editor-id="{{_id}}">
															<div class="title">
																{{label}}
															</div>
															{{> CodeMirror name=_id options=getEditorOptions code=value }}
															{{setEditorOnBlur _id}}
															<div class="buttons">
																<button class="button primary button-fullscreen">Full Screen</button>
																<button class="button primary button-restore">Exit Full Screen</button>
															</div>
														</div>
													{{/if}}
												{{/if}}

												{{#if $eq type 'action'}}
													{{#if hasChanges section}}
														<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
													{{else}}
														<button type="button" class="button primary action" data-setting="{{_id}}" data-action="{{value}}" {{isDisabled}}>{{_ actionText}}</button>
													{{/if}}
												{{/if}}

												{{#if $eq type 'asset'}}
													{{#if value.url}}
														<div class="settings-file-preview">
															<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
															<div class="action">
																<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
															</div>
														</div>
													{{else}}
														<div class="settings-file-preview">
															<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
															<div class="action">
																<div class="button primary">{{_ 'Select_file'}}
																	<input type="file" accept="{{assetAccept fileConstraints}}" />
																</div>
															</div>
														</div>
													{{/if}}
												{{/if}}

												{{#if $eq type 'roomPick'}}
													<div>
														{{> inputAutocomplete settings=autocompleteRoom id=_id name=_id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
														<ul class="selected-rooms">
															{{#each selectedRooms}}
																<li class="remove-room" data-setting={{_id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
															{{/each}}
														</ul>
													</div>
												{{/if}}

												{{#if description}}
													<div class="settings-description">{{{RocketChatMarkdown description}}}</div>
												{{/if}}
												{{#if alert}}
													<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ alert}}}</div>
												{{/if}}
											</div>
											{{#if showResetButton}}
												<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting button danger">
													<i class="icon-ccw secondary-font-color color-error-contrast"></i>
												</button>
											{{/if}}
										</div>
									{{/each}}

									{{#unless $eq ../_id 'Assets'}}
										<div class="input-line double-col">
											<label class="setting-label">{{_ "Reset_section_settings"}}</label>
											<div class="setting-field">
												<button data-section="{{section}}" class="reset-group button danger">
													{{_ "Reset"}}
												</button>
											</div>
										</div>
									{{/unless}}

									{{#if section}}
										{{#if sectionIsCustomOAuth section}}
											<div class="submit">
												<button class="button danger remove-custom-oauth"><span>{{_ "Remove_custom_oauth"}}</span></button>
											</div>
										{{/if}}
									{{/if}}
								</div>
							</div>
						{{/each}}

						<div class="submit">
							{{#if $eq _id 'OAuth'}}
								<button class="button secondary refresh-oauth"><span>{{_ "Refresh_oauth_services"}}</span></button>
								<button class="button secondary add-custom-oauth"><span>{{_ "Add_custom_oauth"}}</span></button>
							{{/if}}
							{{#if $eq _id 'Assets'}}
								<button class="button refresh-clients"><span>{{_ "Apply_and_refresh_all_clients"}}</span></button>
							{{/if}}
						</div>
					</div>
				{{/unless}}
			</div>
		</section>
	{{/with}}
</template>
