<div class="b-admin-general">
	<div class="row" data-bind="visible: !contactsSupported">
		<div class="alert span8">
			<h4>Notice!</h4>
			<br />
			Your system doesn't support contacts.
			<br />
			You need to install or enable <strong>PDO (SQLite / MySQL / PostgreSQL)</strong> exstenstion on your server.
		</div>
	</div>
	<div class="form-horizontal" data-bind="visible: contactsSupported">
		<div class="legend">
			Contacts
		</div>
		<div class="control-group">
			<div class="controls">
				<label data-bind="click: function () { enableContacts(!enableContacts()); }">
					<i data-bind="css: enableContacts() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
					Enable contacts
				</label>
				<label data-bind="click: function () { contactsSharing(!contactsSharing()); }">
					<i data-bind="css: contactsSharing() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
					Allow contacts sharing
				</label>
				<br />
				<label data-bind="click: function () { contactsSync(!contactsSync()); }">
					<i data-bind="css: contactsSync() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
					Allow contacts sync (CardDAV) <span style="color:red">beta</span>
				</label>
				<a href="http://rainloop.net/docs/web-servers/" target="_blank">Web server configuration examples</a>
			</div>
		</div>
		<br />
		<div class="control-group">
			<label class="control-label">
				Type
			</label>
			<div class="controls">
				<select data-bind="options: contactsTypesOptions, value: mainContactsType,
					optionsText: 'name', optionsValue: 'id', optionsAfterRender: defautOptionsAfterRender, saveTrigger: contactsTypeTrigger"></select>
				<div data-bind="saveTrigger: contactsTypeTrigger"></div>
			</div>
		</div>
		<div data-bind="visible: 'sqlite' !== contactsType()">
			<div class="legend">
				PDO (MySQL / PostgreSQL)
			</div>
			<div class="control-group">
				<label class="control-label">
				   Dsn
				</label>
				<div class="controls">
					<input type="text" class="span6" 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">
				   User
				</label>
				<div class="controls">
					<input type="text" data-bind="value: pdoUser, saveTrigger: pdoUserTrigger" />
					<div data-bind="saveTrigger: pdoUserTrigger"></div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">
				   Password
				</label>
				<div class="controls">
					<input type="password" 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;
						Test
					</a>
				</div>
			</div>
		</div>
		<div data-bind="visible: 'sqlite' === contactsType()">
			<div class="legend">
				PDO (SQLite)
			</div>
			<div class="control-group">
				<div class="controls">
					<div class="alert alert-null-left-margin span8">
						<h4>Notice!</h4>
						<br />
						Don't use this type of database with a large number of active users.
					</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;
						Test
					</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>