<div class="adminSecurity">
	<div class="row">
		<div class="alert alert-info span8" style="margin-top: 10px;">
			<span data-i18n="TAB_INTEGRATIONS/TOP_ALERT"></span>
			&nbsp;
			<a href="https://www.rainloop.net/docs/social/" target="_blank">https://www.rainloop.net/docs/social/</a>
		</div>
	</div>
	<div class="form-horizontal g-ui-user-select-none">
		<div class="legend" data-i18n="TAB_INTEGRATIONS/LEGEND_GOOGLE"></div>
		<div class="control-group">
			<div class="controls">
				<div data-bind="component: {
					name: 'Checkbox',
					params: { value: googleEnable, label: 'TAB_INTEGRATIONS/LABEL_ENABLE_GOOGLE' }
				}"></div>
				<div data-bind="visible: googleEnable">
					<br />
					<blockquote>
						<div data-bind="component: {
							name: 'Checkbox',
							params: {
								value: googleEnableAuth,
								label: 'TAB_INTEGRATIONS/LABEL_GOOGLE_AUTH'
							}
						}"></div>
						<div data-bind="component: {
							name: 'Checkbox',
							params: {
								value: googleEnableAuthGmail,
								label: 'TAB_INTEGRATIONS/LABEL_GOOGLE_AUTH_GMAIL'
							}
						}"></div>
						<div data-bind="component: {
							name: 'Checkbox',
							params: {
								value: googleEnableDrive,
								label: 'TAB_INTEGRATIONS/LABEL_GOOGLE_DRIVE'
							}
						}"></div>
						<div data-bind="component: {
							name: 'Checkbox',
							params: {
								value: googleEnablePreview,
								label: 'TAB_INTEGRATIONS/LABEL_GOOGLE_PREVIEW'
							}
						}"></div>
					</blockquote>
				</div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" data-i18n="TAB_INTEGRATIONS/LABEL_GOOGLE_CLIENT_ID"></label>
			<div class="controls">
				<div data-bind="component: {
					name: 'Input',
					params: {
						value: googleClientID,
						trigger: googleTrigger1,
						enable: googleEnableRequireClientSettings,
						size: 5
					}
				}"></div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" data-i18n="TAB_INTEGRATIONS/LABEL_GOOGLE_CLIENT_SECRET"></label>
			<div class="controls">
				<div data-bind="component: {
					name: 'Input',
					params: {
						value: googleClientSecret,
						trigger: googleTrigger2,
						enable: googleEnableRequireClientSettings,
						size: 5
					}
				}"></div>
			</div>
		</div>
		<br />
		<div class="control-group">
			<label class="control-label" data-i18n="TAB_INTEGRATIONS/LABEL_GOOGLE_API_KEY"></label>
			<div class="controls">
				<div data-bind="component: {
					name: 'Input',
					params: {
						value: googleApiKey,
						trigger: googleTrigger3,
						size: 5,
						enable: googleEnableRequireApiKey
					}
				}"></div>
				<blockquote style="margin-top: 10px; margin-bottom: 0">
					<p class="muted" data-i18n="TAB_INTEGRATIONS/HINT_GOOGLE_API_KEY"></p>
				</blockquote>
			</div>
		</div>
		<div class="legend">
			<span data-i18n="TAB_INTEGRATIONS/LEGEND_FACEBOOK"></span>
			<span style="color: #ccc; font-size: 14px;" data-bind="visible: !facebookSupported()">(<span
					data-i18n="HINTS/REQUIRES_PHP_54"></span>)</span>
		</div>
		<div data-bind="if: facebookSupported">
			<div class="control-group">
				<div class="controls">
					<div data-bind="component: {
						name: 'Checkbox',
						params: { value: facebookEnable, label: 'TAB_INTEGRATIONS/LABEL_ENABLE_FACEBOOK' }
					}"></div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" data-i18n="TAB_INTEGRATIONS/LABEL_FACEBOOK_APP_ID"></label>
				<div class="controls">
					<div data-bind="component: {
						name: 'Input',
						params: {
							value: facebookAppID,
							trigger: facebookTrigger1,
							enable: facebookEnable,
							size: 5
						}
					}"></div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" data-i18n="TAB_INTEGRATIONS/LABEL_FACEBOOK_APP_SECRET"></label>
				<div class="controls">
					<div data-bind="component: {
						name: 'Input',
						params: {
							value: facebookAppSecret,
							trigger: facebookTrigger2,
							enable: facebookEnable,
							size: 5
						}
					}"></div>
				</div>
			</div>
		</div>
		<div class="legend" data-i18n="TAB_INTEGRATIONS/LEGEND_TWITTER"></div>
		<div class="control-group">
			<div class="controls">
				<div data-bind="component: {
					name: 'Checkbox',
					params: { value: twitterEnable, label: 'TAB_INTEGRATIONS/LABEL_ENABLE_TWITTER' }
				}"></div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" data-i18n="TAB_INTEGRATIONS/LABEL_TWITTER_CONSUMER_KEY"></label>
			<div class="controls">
				<div data-bind="component: {
					name: 'Input',
					params: {
						value: twitterConsumerKey,
						trigger: twitterTrigger1,
						enable: twitterEnable,
						size: 5
					}
				}"></div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" data-i18n="TAB_INTEGRATIONS/LABEL_TWITTER_CONSUMER_SECRET"></label>
			<div class="controls">
				<div data-bind="component: {
					name: 'Input',
					params: {
						value: twitterConsumerSecret,
						trigger: twitterTrigger2,
						enable: twitterEnable,
						size: 5
					}
				}"></div>
			</div>
		</div>
		<div class="legend" data-i18n="TAB_INTEGRATIONS/LEGEND_DROPBOX"></div>
		<div class="control-group">
			<div class="controls">
				<div data-bind="component: {
					name: 'Checkbox',
					params: { value: dropboxEnable, label: 'TAB_INTEGRATIONS/LABEL_ENABLE_DROPBOX' }
				}"></div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" data-i18n="TAB_INTEGRATIONS/LABEL_DROPBOX_API_KEY"></label>
			<div class="controls">
				<div data-bind="component: {
					name: 'Input',
					params: {
						value: dropboxApiKey,
						trigger: dropboxTrigger1,
						enable: dropboxEnable,
						size: 5
					}
				}"></div>
			</div>
		</div>
	</div>
</div>