<div class="card mb-2">
	<div class="card-header" ng-class="attr.getBgHighlightClass()" role="tab" id="LDAP-Attributes"  data-toggle="collapse" data-parent="#accordion-connections" href="#collapse-attributes">
		<h5 class="card-title mb-0" ng-class="attr.getTextHighlightClass()">
			<div class="d-flex align-items-center" role="button">
				<ion-icon class="icon-lg flex-shrink-0" name="checkmark-outline"></ion-icon>
				<lmsg src="admin.ldap.text.attributes_section">3 LDAP Attributes / Claromentis Metadata</lmsg>
			</div>
		</h5>
	</div>
	<div id="collapse-attributes" class="panel-collapse collapse">
		<div class="card-body">
			<div class="form-group row">
				<label class="col-md-3 col-form-label" for="example-user-dn" lmsg="admin.ldap.text.exampleuser_label">Example User - DN</label>
				<div class="col-10 col-md-5">
					<input type="text" id="example-user-dn" placeholder="" ng-model="attr.properties.exampleUserDN" class="form-control input-md">
				</div>
				<div class="col-2 col-md-1">
					<ldap-helper msg="admin.ldap.attributes.exampleuser_helper"></ldap-helper>
				</div>
				<div class="col-10 col-md-3">
					<button id="fetch-attr" ng-click="attr.fetch()" class="btn btn-primary fetch-attr-btn" lmsg="admin.ldap.text.fetch_button">Fetch Attributes</button>
				</div>
				<div class="offset-md-3 col-md-5">
					<small class="text-warning" ng-if="attr.loading">Loading...</small>
					<small class="text-danger" ng-bind="attr.statusMessage">Message something went wrong</small>
				</div>
			</div>

			<div class="form-group row" ng-if="attr.fetched || attr.completed">
				<div ng-class="{ 'offset-md-3': !attr.fetched }" class="col-md-7">
					<metatable ldap="attr.ldapAttrs" claro="attr.claroAttrs" mappings="attr.properties.mappings" fetched="attr.fetched"></metatable>
				</div>
				<div class="col-md-5" ng-if="attr.fetched">
					<div class="card">
						<div class="card-header">
							<h6 lmsg="admin.ldap.text.preview_label" class="font-weight-bold mb-0">Example User Profile (preview)</h6>
						</div>
						<div class="d-block position-relative metadata-profile-example-table">
							<ul class="list-group list-group-flush">
								<li class="list-group-item text-wrap mr-1" ng-repeat="item in attr.ldapAttrs">
									<strong>{{ item.name }}</strong>: {{ item.value.join(', ') }}
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<!--<div class="form-group row" ng-if="attr.fetched || attr.completed">-->
				<!--<label class="col-md-2 col-form-label" lmsg="admin.ldap.text.additional_label">Additional Settings</label>-->
				<!--<div class="col-md-6">-->
					<!--<div class="form-check">-->
						<!--<label for="additional-settings-0">-->
							<!--<input type="checkbox" id="additional-settings-0" value="1" ng-model="attr.properties.useImportPhoto">-->
							<!--<lmsg src="admin.ldap.text.import_label">Import photo from specified LDAP attribute and set as User Profile photo</lmsg>-->
						<!--</label>-->
					<!--</div>-->
				<!--</div>-->
				<!--<div class="col-md-2">-->
					<!--<select class="form-control" ng-disabled="!attr.ldapAttrs.length || attr.ldapAttrs.length === 1"-->
					<!--ng-options="k.name as k.name for k in attr.ldapAttrs" ng-model="attr.properties.importPhotoAttr"></select>-->
				<!--</div>-->
			<!--</div>-->
			<div class="form-group row" ng-if="attr.fetched || attr.completed">
				<label class="col-md-3 col-form-label" lmsg="admin.ldap.text.additional_label">Additional Settings</label>
				<div class="col-md-6 d-flex align-items-center">
					<div class="form-check">
						<input class="form-check-input" type="checkbox" id="additional-settings-1" value="2" ng-model="attr.properties.usePopulateOrgChart">
						<label class="form-check-label" for="additional-settings-1">
							<lmsg src="admin.ldap.text.populate_label">Populate Claromentis OrgChart based on specified LDAP attribute</lmsg>
						</label>
					</div>
				</div>
				<div class="col-md-2">
					<select class="form-control" ng-disabled="!attr.ldapAttrs.length || attr.ldapAttrs.length === 1"
							ng-options="k.name as k.name for k in attr.ldapAttrs" ng-model="attr.properties.populateOrgChartAttr"></select>
				</div>
			</div>
			<div class="form-group row" ng-if="attr.fetched || attr.completed">
				<div class="offset-md-3 col-md-6 d-flex align-items-center">
					<div class="form-check">
						<input class="form-check-input" type="checkbox" id="additional-settings-2" value="2" ng-model="attr.properties.usePopulateExtranet">
						<label class="form-check-label" for="additional-settings-2">
							<lmsg src="admin.ldap.text.populate_extranet">__Add user to extranet named in specified LDAP attribute</lmsg>
						</label>
					</div>
				</div>
				<div class="col-md-2">
					<select class="form-control" ng-disabled="!attr.ldapAttrs.length || attr.ldapAttrs.length === 1"
							ng-options="k.name as k.name for k in attr.ldapAttrs" ng-model="attr.properties.populateExtranetAttr"></select>
				</div>
			</div>
			<div class="form-group row">
				<label for="additional-settings-3" class="col-md-3 col-form-label"><lmsg src="admin.ldap.text.date_format">__Format to use for parsing dates</lmsg></label>
				<div class="col-md-6">
					<select class="form-control" ng-model="attr.properties.dateFormat" id="additional-settings-3" ng-options="key as val for (key,val) in attr.properties.dateOptions" ></select>
				</div>
			</div>
			<div class="form-group row">
				<label for="additional-settings-4" class="col-md-3 control-label"><lmsg src="admin.ldap.text.date_format_no_year">__Format to use for parsing dates without year</lmsg></label>
				<div class="col-md-6">
					<select class="form-control" ng-model="attr.properties.dateNoYearFormat" id="additional-settings-4" ng-options="key as val for (key,val) in attr.properties.dateNoYearOptions" ></select>
				</div>
			</div>
			<div class="form-group row" ng-if="attr.fetched || attr.completed">
				<div class="offset-md-3 col-md-6 ">
					<button id="LDAP-attr-continue" class="btn btn-primary" ng-click="attr.next()" lmsg="admin.ldap.text.continue">Continue</button>
				</div>
			</div>
		</div>
	</div>
</div>
