<div class="grid gap-4">
  <div class="fieldset">
    {% if field.label %}
    <label
      for="{{ field.name }}"
      class="fieldset-legend {% if style.hide_label %} sr-only{% endif %}"
    >
      {{ field.label }}
    </label>
    {% endif %}

    <!---->
    {% if style.input_type != "file" %}
    <label class="input w-full focus:input-primary active:input-primary">
      <span class="label">{{ field.label }}</span>
      <input
        class="w-full"
        id="{{ field.name }}"
        name="{{ field.name }}"
        type="{{ style.input_type }}"
        {% if field.required %}required{% endif %}
        {% if field.value %}value="{{ field.value }}"{% endif %}
        {% if field.max_length %}maxlength="{{ field.max_length }}"{% endif %}
        {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %}
        {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}
      />
    </label>
    {% else %}
    <input
      id="{{ field.name }}"
      name="{{ field.name }}"
      type="{{ style.input_type }}"
      class="file-input w-full focus:file-input-primary active:file-input-primary"
      {% if field.required %}required{% endif %}
      {% if field.value %}value="{{ field.value }}"{% endif %}
      {% if field.max_length %}maxlength="{{ field.max_length }}"{% endif %}
      {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %}
      {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}
    />
    {% endif %}

    <!---->
    {% if field.help_text %}
    <p class="fieldset-label">{{ field.help_text|safe }}</p>
    {% endif %}
  </div>

  {% include 'rest_framework/components/field_errors.html' %}
</div>
