<div class="card mb-2">
	<div class="card-header" ng-class="connection.getBgHighlightClass()" role="tab" id="connection" data-toggle="collapse" data-parent="#accordion-connections" href="#collapse-connection"  aria-controls="collapse-connection">
		<h5 class="card-title mb-0" ng-class="connection.getTitleHighlightClass()">
			<div class="d-flex align-items-center" role="button">
				<ion-icon class="icon-lg" ng-attr-name="{{(!connection.connected && connection.completed) ? 'close-outline' : 'checkmark-outline'}}"></ion-icon>
				<lmsg src="admin.ldap.text.connection_section">1 Connection?</lmsg>
			</div>
		</h5>
	</div>
	<div id="collapse-connection" class="panel-collapse collapse">
		<div class="card-body">
		<div class="form-group row">
				<label class="col-md-3 col-form-label" for="server-url" >
					<span lmsg="admin.ldap.text.serverurl_label">LDAP Server URL</span> <span class="required" aria-hidden="true">*</span>
				</label>
				<div class="col-10 col-md-4">
					<input id="server-url" ng-model="connection.properties.serverUrl" type="text" class="form-control input-md" aria-required="true">
				</div>
				<div class="col-2 col-md-1">
					<ldap-helper msg="admin.ldap.connection.serverurl_helper"></ldap-helper>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-12 col-md-3 col-form-label connection-label" for="netbios-name">
					<span lmsg="admin.ldap.text.netbios_label">NetBIOS Name </span> <span class="required" aria-hidden="true">*</span>
				</label>
				<div class="col-10 col-md-4">
					<input id="netbios-name" ng-model="connection.properties.netbiosName" type="text" class="form-control input-md" aria-required="true">
				</div>
				<div class="col-2 col-md-1">
					<ldap-helper msg="admin.ldap.connection.netbios_helper"></ldap-helper>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-md-3 col-form-label" for="service-account-dn">
					<span lmsg="admin.ldap.text.account_label">Service Account DN</span><span class="required" aria-hidden="true">*</span>
				</label>
				<div class="col-10 col-md-4">
					<input id="service-account-dn" ng-model="connection.properties.serviceAccountDN" type="text" class="form-control input-md" aria-required="true">
				</div>
				<div class="col-2 col-md-1">
					<ldap-helper msg="admin.ldap.connection.serviceaccountdn_helper"></ldap-helper>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-md-3 col-form-label" for="service-account-password">
					<span lmsg="admin.ldap.text.password_label">Service Account Password</span> <span class="required" aria-hidden="true">*</span>
				</label>
				<div class="col-md-4">
					<p id="service-account-password-masked">******************* <a href="#" id="service-account-password-reset-link" lmsg="admin.ldap.text.change_password">__Change password</a></p>
					<input id="service-account-password" ng-model="connection.properties.serviceAccountPass" type="password" class="form-control input-md" aria-required="true">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-12 col-md-3 col-form-label connection-label" for="search-base">
					<span lmsg="admin.ldap.text.basedn_label">Search Base DN></span> <span class="required" aria-hidden="true">*</span>
				</label>
				<div class="col-10 col-md-4">
					<input id="search-base" ng-model="connection.properties.searchBaseDN" type="search" class="form-control input-md" aria-required="true">
				</div>
				<div class="col-2 col-md-1">
					<ldap-helper msg="admin.ldap.connection.searchbasedn_helper"></ldap-helper>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-md-3 col-form-label" for="test-connection"></label>
				<div class="col-md-7">
					<button id="test-connection" ng-click="connection.testConnection()" class="btn btn-primary mb-2 mr-1" lmsg="admin.ldap.text.test_button">Test Connection</button> <span class="" style="display:none;" id="ldap_connection_test_message"><img src="/images/default/icons/loading.gif" width="16" height="16" alt="" /> <loc lmsg="admin.ldap.testing_connection">__Testing connection</loc></span>
					<div class="align-items-center d-flex" ng-class="connection.connected ? 'text-success' : 'text-danger'" ng-if="connection.connected != null">
						<ion-icon ng-attr-name="{{connection.connected ? 'checkmark-outline' : 'warning-outline'}}"></ion-icon>
						<span ng-if="connection.connected" ng-bind="connection.statusMessage" lmsg="admin.ldap.text.test_status_ok">__Connection OK!</span>
						<span ng-if="!connection.connected" ng-bind="connection.statusMessage"></span>
					</div>
				</div>
			</div>

			<div class="form-group row" ng-if="connection.connected">
				<div class="col-md-9 offset-md-3">
					<a href="#connection-advanced" data-toggle="collapse" lmsg="admin.ldap.text.advanced_label">show advanced settings</a>
				</div>
			</div>

			<div id="connection-advanced" class="collapse">
				<div class="form-group row">
					<label class="col-md-3 col-form-label pt-0" lmsg="admin.ldap.text.pwverification_label">Password Verification Method</label>
					<div class="col-md-4">
						<div class="form-check">
							<input class="form-check-input" type="radio" ng-model="connection.properties.passwordMethod" id="pass-verification-0" value="1" checked="checked">
							<label class="form-check-label" for="pass-verification-0">
								<lmsg src="admin.ldap.text.pw_verify_username_label">Verify using provided username (faster)</lmsg>
							</label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="radio" ng-model="connection.properties.passwordMethod" id="pass-verification-1" value="2">
							<label class="form-check-label" for="pass-verification-1">
								<lmsg src="admin.ldap.text.pw_verify_after_dn_label">Lookup user's DN in LDAP, then verify (best for compatibility)</lmsg>
							</label>
						</div>
					</div>
				</div>

				<div class="form-group row" ng-if="connection.is_windows">
					<label class="col-md-3 col-form-label" lmsg="admin.ldap.text.dnlookup_label">DN lookup method</label>
					<div class="col-md-4">
						<div class="form-check">
							<label for="dn-lookup-0">
								<input type="radio" ng-model="connection.properties.dnLookupMethod" id="dn-lookup-0" value="1" checked="checked">
								<lmsg src="admin.ldap.text.lookup_dn_label">Search in LDAP for DN</lmsg>
							</label>
						</div>
						<div class="form-check">
							<label for="dn-lookup-1">
								<input type="radio" ng-model="connection.properties.dnLookupMethod" id="dn-lookup-1" value="2">
								<lmsg src="admin.ldap.text.nametranslate_label">Use the NameTranslate COM object</lmsg>
							</label>
						</div>
					</div>
				</div>
				<div class="form-group row" ng-if="connection.properties.dnLookupMethod == 2">
					<label class="col-md-3 col-form-label" for="sys-charset" lmsg="admin.ldap.text.syscharset_label">Sys Charset</label>
					<div class="col-md-4">
						<select id="sys-charset" class="form-control input-md"
								ng-options="v as v for v in connection.charsetList" ng-model="connection.properties.sysCharset"></select>
					</div>
					<div class="col-md-1">
						<ldap-helper msg="admin.ldap.connection.syscharset_helper"></ldap-helper>
					</div>
				</div>
			</div>


			<div class="form-group row" ng-if="connection.connected">
				<label class="col-md-3 col-form-label" for="connection-submit"></label>
				<div class="col-md-4">
					<button id="connection-submit" ng-click="connection.next()" class="btn btn-primary" lmsg="admin.ldap.text.continue">Continue</button>
				</div>
			</div>
		</div>
	</div>
</div>
