<div class="w-full px-5 pt-3">
  <div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
    <span class="text-muted small"> Extra search configuration </span>
    <button
      ng-if="$ctrl.index > 0"
      class="btn btn-sm btn-danger"
      type="button"
      ng-click="$ctrl.onRemoveClick($ctrl.index)"
      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
      limited-feature-tabindex="-1"
    >
      <pr-icon icon="'trash-2'"></pr-icon>
    </button>
  </div>

  <div class="form-group" ng-if="$ctrl.showUsernameFormat">
    <div class="col-sm-4" style="margin-bottom: 5px">
      <label class="control-label text-left">Username Format</label>
    </div>
    <div class="col-sm-8">
      <div class="input-group">
        <div class="input-group-btn">
          <button
            class="btn btn-primary"
            ng-model="$ctrl.config.UserNameAttribute"
            uib-btn-radio="'sAMAccountName'"
            style="margin-left: 0px"
            limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
            limited-feature-tabindex="-1"
            >username</button
          >
          <button
            class="btn btn-primary"
            ng-model="$ctrl.config.UserNameAttribute"
            uib-btn-radio="'userPrincipalName'"
            limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
            limited-feature-tabindex="-1"
            >user@domainname</button
          >
        </div>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label text-left"> Root Domain </label>
    <div class="col-sm-8">
      {{ $ctrl.config.BaseDN }}
    </div>
  </div>

  <ldap-settings-dn-builder
    ng-model="$ctrl.config.BaseDN"
    label="User Search Path (optional)"
    suffix="{{ $ctrl.domainSuffix }}"
    on-change="($ctrl.onBaseDNChange)"
    limited-feature-id="$ctrl.limitedFeatureId"
  ></ldap-settings-dn-builder>

  <div class="form-group no-margin-last-child">
    <div class="col-sm-12" style="margin-bottom: 5px">
      <label class="control-label text-left">Allowed Groups (optional)</label>
      <button
        type="button"
        class="label label-default interactive vertical-center"
        style="margin-left: 10px; border: 0"
        ng-click="$ctrl.addGroup()"
        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
        limited-feature-tabindex="-1"
      >
        <pr-icon icon="'plus-circle'"></pr-icon>
        add another group
      </button>
    </div>
    <div class="col-sm-12">
      <div ng-repeat="group in $ctrl.groups track by $index" style="margin-bottom: 10px">
        <rd-widget>
          <rd-widget-body>
            <ldap-settings-group-dn-builder
              ng-model="group"
              index="$index"
              suffix="{{ $ctrl.domainSuffix }}"
              on-change="($ctrl.onGroupChange)"
              on-remove-click="($ctrl.removeGroup)"
              limited-feature-id="$ctrl.limitedFeatureId"
            ></ldap-settings-group-dn-builder>
          </rd-widget-body>
        </rd-widget>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label text-left"> User Filter </label>
    <div class="col-sm-8">
      {{ $ctrl.config.Filter }}
    </div>
  </div>
</div>
