{{# print-form-tag }}
  <form>
{{/ print-form-tag }}

  <div class="form-group a-form-group {{# isLarge }} a-form-group-large {{/ isLarge }} {{# isDark }} a-form-group-darkBackground {{/ isDark }} {{styleModifier}}">

    {{# top-label }}
      <label class="a-form-label {{# isHidden }} sr-only {{/ isHidden}} {{# isInactive }} inactive {{/ isInactive }}" for="{{ text-input-id }}">{{{ top-label }}}</label>
    {{/ top-label }}

    <div class="a-form-group-items input-group  {{# isDisabled }} disabled {{/ isDisabled }} {{# isInactive }} inactive {{/ isInactive }}">
      {{# form-label-hasIcon }}
        <span class="input-group-prepend d-none d-md-block">{{> atomer-ikon }}</span>
      {{/ form-label-hasIcon }}

      {{# form-label-isPhoneNumber }}
        <input class="form-control {{ form-control-class }}"
          {{# text-input-id }}id="{{ text-input-id }}"{{/ text-input-id }}
          {{# isRequired }}required{{/ isRequired }}
          {{# text-input-value }}value="{{text-input-value}}"{{/ text-input-value }}
          {{# text-input-placeholder }}placeholder="{{text-input-placeholder}}"{{/ text-input-placeholder }}
          type="{{ input-type }}"
          {{# maxlength }}data-val-length-max="{{ maxlength }}" maxlength="{{ maxlength }}"{{/ maxlength }}
          {{# minlength }}data-val-length-min="{{ minlength }}"{{/ minlength }}/>
      {{/ form-label-isPhoneNumber }}

      <input class="form-control {{ form-control-class }} {{# form-label-hasIcon }} a-hasIcon {{/ form-label-hasIcon }}
        {{# form-input-hasButton }} a-hasButton {{/ form-input-hasButton }} {{# form-input-isPassword }} a-hasButton {{/ form-input-isPassword }}"
        type="{{ input-type }}" {{# hasAutoFocus }} autofocus {{/ hasAutoFocus }}
        {{# text-input-placeholder }}placeholder="{{text-input-placeholder}}"{{/ text-input-placeholder }}
        {{# text-input-value }}value="{{text-input-value}}"{{/ text-input-value }}
        name="{{ input-name }}"
        data-val="true"
        {{# text-input-id }}id="{{ text-input-id }}"{{/ text-input-id }}
        {{# isRequired }}required{{/ isRequired }}
        {{# data-required }} data-val-required="{{ data-required-message }}" {{/ data-required }}
        {{# isDisabled }}disabled{{/ isDisabled }}
        {{# isInactive }}disabled{{/ isInactive }}
        {{# maxlength }}data-val-length-max="{{ maxlength }}"{{/ maxlength }}
        {{# minlength }}data-val-length-min="{{ minlength }}"{{/ minlength }}
        {{# form-input-isPassword }}onkeyup="setVisibility(this, 'btn-{{ text-input-id }}')"{{/ form-input-isPassword }}
        {{# search-algorithm }}data-search-algorithm="{{ search-algorithm }}"{{/ search-algorithm }}
        {{# search-target }}data-search-target="{{ search-target }}"{{/ search-target }}
        {{# auto-complete-off }}autocomplete="off"{{/ auto-complete-off }}
        {{# input-regex-validation }}
          data-val-regex="{{ error-message }}"
          data-val-regex-pattern="{{ validation-pattern }}"
        {{/ input-regex-validation }}
      >

      {{# form-input-hasButton }}
        <div class="input-group-append{{# no-border}} a-noBorder-right{{/ no-border}}">
          <button {{# onclick }}onclick="{{{onclick}}}"{{/ onclick }} class="btn btn-secondary{{# formBtnExtraclass }} {{ formBtnExtraclass }}{{/ formBtnExtraclass }}{{# isInactive }} inactive {{/ isInactive }}" type="button" {{# isDisabled }} disabled {{/ isDisabled }} {{# isInactive }}disabled{{/ isInactive }}>
            {{# button-icon}}
              {{> atomer-ikon }}
            {{/ button-icon}}
            {{# button-text }}
              <span{{# button-text-class }} class="{{button-text-class}}"{{/ button-text-class }}>{{button-text-value}}</span>
            {{/ button-text }}
          </button>
        </div>
      {{/ form-input-hasButton }}

      {{# form-input-isPassword }}
        <div class="input-group-append">
          <button class="btn btn-secondary d-none" type="button" id="btn-{{ text-input-id }}" onclick="showPassword(this, '{{ text-input-id }}')">
            <span class="show-password-text">
              {{{ form-input-showPassword-text }}}
            </span>
            <span class="hide-password-text" style="display: none">
              {{{ form-input-obfuscatePassword-text }}}
            </span>
          </button>
        </div>
        {{# password-strength-meter }}
        <div class="an-passwordStrengthMeter mt-2">
            <meter id="meter-{{ text-input-id }}" min="0" max="10" low="4" high="8" optimum="10" value="7">medium</meter>
            <label for="meter-{{ text-input-id }}">medium</label>
        </div>
        {{/password-strength-meter}}
      {{/ form-input-isPassword }}

      {{# postal-code }}
        <span class="a-input-placecode a-js-place" style="display:none;" ></span>
      {{/ postal-code }}

    </div>
    {{# autocomplete }}
      <div class="a-autocomplete-container d-none d-block {{ autocomplete-additional-classes }}">
      </div>
    {{/ autocomplete}} 

    {{# extra-help }}
      <small id="help" class="form-text a-validatorInfo">
        {{> atomer-ikon }}
        {{{ extra-helpText }}}
      </small>
    {{/ extra-help }}

    {{# error-message-popover }}
      <div class="a-message a-message-error" data-valmsg-for="{{ input-name }}" data-valmsg-replace="true"></div>
    {{/ error-message-popover }}

  </div>
{{# print-form-tag }}
  </form>
{{/ print-form-tag }}