<div class="b-admin-general">
	<div class="row" data-bind="visible: !contactsSupported">
		<div class="alert span8" style="margin-top: 10px;">
			<h4 data-i18n="TAB_CONTACTS/ALERT_NOTICE"></h4>
			<br />
			<div data-i18n="[html]TAB_CONTACTS/HTML_ALERT_DOES_NOT_SUPPORTED"></div>
		</div>
	</div>
	<div class="form-horizontal" data-bind="visible: contactsSupported">
		<div class="legend" data-i18n="TAB_CONTACTS/LEGEND_CONTACTS"></div>
		<div class="control-group">
			<div class="controls">
				<div data-bind="component: {
					name: 'Checkbox',
					params: { value: enableContacts, label: 'TAB_CONTACTS/LABEL_ENABLE_CONTACTS' }
				}"></div>
				<div data-bind="component: {
					name: 'Checkbox',
					params: { value: contactsSync, label: 'TAB_CONTACTS/LABEL_ALLOW_SYNC' }
				}"></div>
			</div>
		</div>
	</div>
	<div class="form-horizontal" data-bind="visible: contactsSupported">
		<div class="legend" data-i18n="TAB_CONTACTS/LEGEND_STORAGE"></div>
		<div class="control-group">
			<label class="control-label" data-i18n="TAB_CONTACTS/LABEL_STORAGE_TYPE"></label>
			<div class="controls">
				<div data-bind="component: {
					name: 'Select',
					params: {
						options: contactsTypesOptions,
						value: mainContactsType,
						trigger: contactsTypeTrigger,
						optionsText: 'name',
						optionsValue: 'id'
					}
				}"></div>
			</div>
		</div>
		<br />
		<div data-bind="visible: 'sqlite' !== contactsType()">
			<div class="control-group">
				<label class="control-label" data-i18n="TAB_CONTACTS/LABEL_STORAGE_DSN"></label>
				<div class="controls">
					<input type="text" class="span6" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
						data-bind="value: pdoDsn, saveTrigger: pdoDsnTrigger" />
					<div data-bind="saveTrigger: pdoDsnTrigger"></div>
					<blockquote style="margin: 10px 0 0 0">
						<p class="muted">
mysql:host=127.0.0.1;port=3306;dbname=rainloop<br />
pgsql:host=127.0.0.1;port=5432;dbname=rainloop
						</p>
					</blockquote>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" data-i18n="TAB_CONTACTS/LABEL_STORAGE_USER"></label>
				<div class="controls">
					<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
						data-bind="value: pdoUser, saveTrigger: pdoUserTrigger" />
					<div data-bind="saveTrigger: pdoUserTrigger"></div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" data-i18n="TAB_CONTACTS/LABEL_STORAGE_PASSWORD"></label>
				<div class="controls">
					<input type="password" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
						data-bind="value: pdoPassword, saveTrigger: pdoPasswordTrigger" />
					<div data-bind="saveTrigger: pdoPasswordTrigger"></div>
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<a class="btn" data-bind="command: testContactsCommand, css: { 'btn-success': testContactsSuccess, 'btn-danger': testContactsError }">
						<i data-bind="css: {'icon-info': !testing(), 'icon-spinner animated': testing(), 'icon-white': testContactsSuccess() || testContactsError() }"></i>
						&nbsp;&nbsp;
						<span data-i18n="TAB_CONTACTS/BUTTON_TEST"></span>
					</a>
				</div>
			</div>
		</div>
		<div data-bind="visible: 'sqlite' === contactsType()">
			<div class="control-group">
				<div class="controls">
					<div class="alert alert-null-left-margin span8">
						<h4 data-i18n="TAB_CONTACTS/ALERT_NOTICE"></h4>
						<br />
						<div data-i18n="[html]TAB_CONTACTS/HTML_ALERT_DO_NOT_USE_THIS_DATABASE"></div>
					</div>
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<a class="btn" data-bind="command: testContactsCommand, css: { 'btn-success': testContactsSuccess, 'btn-danger': testContactsError }">
						<i data-bind="css: {'icon-info': !testing(), 'icon-spinner animated': testing(), 'icon-white': testContactsSuccess() || testContactsError() }"></i>
						&nbsp;&nbsp;
						<span data-i18n="TAB_CONTACTS/BUTTON_TEST"></span>
					</a>
				</div>
			</div>
		</div>
		<div class="control-group" data-bind="visible: '' !== testContactsErrorMessage()">
			<div class="controls">
				<div class="row">
					<div class="alert span8" data-bind="text: testContactsErrorMessage"></div>
				</div>
			</div>
		</div>
	</div>
</div>