{% load bloomerp_form_fields %}

{% if field.is_hidden %}
  {{ field }}
{% else %}
  <div id="div_{{ field.auto_id }}" class="{% if wrapper_class %}{{ wrapper_class }} {% endif %}{% if field_class %}{{ field_class }}{% else %}mb-1{% endif %}">

    {% if field.label and form_show_labels %}
      <label for="{{ field.id_for_label }}" class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2{% endif %}">
        {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
      </label>
    {% endif %}

    <div class="{{ field_class }}">
      <div class="flex">

        {% if crispy_prepended_text and not crispy_appended_text %}
          <span class="{% if field.errors %}border-danger-dark border-r-0 {% else %}border-gray-200 {% endif %}border rounded-xl rounded-r-none px-3 bg-gray-200 text-gray-800 flex items-center">{{ crispy_prepended_text|safe }}</span>
          {% if field.errors %}
            {% bloomerp_field field "class" "input block w-full !rounded-l-none !border-l-0 !border-danger-dark focus:!border-danger-dark" %}
          {% else %}
            {% bloomerp_field field "class" "input block w-full !rounded-l-none !border-l-0" %}
          {% endif %}

        {% elif crispy_appended_text and not crispy_prepended_text %}
          {% if field.errors %}
            {% bloomerp_field field "class" "input block w-full !rounded-r-none !border-r-0 !border-danger-dark focus:!border-danger-dark" %}
          {% else %}
            {% bloomerp_field field "class" "input block w-full !rounded-r-none !border-r-0" %}
          {% endif %}
          <span class="{% if field.errors %}border-danger-dark border-l-0 {% else %}border-gray-200 {% endif %}border rounded-xl rounded-l-none px-3 bg-gray-200 text-gray-800 flex items-center">{{ crispy_appended_text|safe }}</span>

        {% else %}
          <span class="{% if field.errors %}border-danger-dark border-r-0 {% else %}border-gray-200 {% endif %}border rounded-xl rounded-r-none px-3 bg-gray-200 text-gray-800 flex items-center">{{ crispy_prepended_text|safe }}</span>
          {% if field.errors %}
            {% bloomerp_field field "class" "input block w-full !rounded-none !border-l-0 !border-r-0 !border-danger-dark focus:!border-danger-dark" %}
          {% else %}
            {% bloomerp_field field "class" "input block w-full !rounded-none !border-l-0 !border-r-0" %}
          {% endif %}
          <span class="{% if field.errors %}border-danger-dark border-l-0 {% else %}border-gray-200 {% endif %}border rounded-xl rounded-l-none px-3 bg-gray-200 text-gray-800 flex items-center">{{ crispy_appended_text|safe }}</span>

        {% endif %}
      </div>
    </div>

      {% include 'tailwind/layout/field_errors.html' %}
      {% include 'tailwind/layout/help_text.html' %}
  </div>
{% endif %}