{% load dash_extras %}
{% field_widget_type field as wtype %}
<div data-field="{{ field.name }}" class="{% if wide %}sm:col-span-2{% endif %}">
  {% if field.field.widget.input_type == 'checkbox' %}
    <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-black/30 px-4 py-3 transition hover:border-brand-500/40">
      {{ field }}
      <span>
        <span class="block text-sm font-medium text-neutral-200">{{ field.label }}</span>
        {% if field.help_text %}<span class="block text-xs text-neutral-600">{{ field.help_text }}</span>{% endif %}
      </span>
    </label>

  {% elif wtype == 'ClearableFileInput' or wtype == 'FileInput' %}
    <label for="{{ field.id_for_label }}" class="mb-1.5 block text-xs font-semibold text-neutral-400">
      {{ field.label }}{% if field.field.required %} <span class="text-brand-500">*</span>{% endif %}
    </label>
    <div class="file-field rounded-xl border border-white/10 bg-black/30 p-3.5">
      {% comment %}
        Penjagaan ganda: FieldFile kosong itu falsy, dan memanggil .url pada
        berkas yang belum ada akan melempar ValueError. Berkas non-gambar
        (mis. PDF CV) gagal dimuat lalu menghapus dirinya sendiri.
      {% endcomment %}
      {% if field.value %}
        <img src="{{ field.value.url }}" alt="" class="file-field__thumb"
             onerror="this.remove()">
      {% endif %}
      {{ field }}
    </div>
    {% if field.help_text %}<p class="mt-1.5 text-xs text-neutral-600">{{ field.help_text }}</p>{% endif %}

  {% else %}
    <label for="{{ field.id_for_label }}" class="mb-1.5 block text-xs font-semibold text-neutral-400">
      {{ field.label }}{% if field.field.required %} <span class="text-brand-500">*</span>{% endif %}
    </label>
    {{ field }}
    {% if field.help_text %}<p class="mt-1.5 text-xs text-neutral-600">{{ field.help_text }}</p>{% endif %}
  {% endif %}

  {% if field.errors %}
    <ul class="errorlist">{% for e in field.errors %}<li>{{ e }}</li>{% endfor %}</ul>
  {% endif %}
</div>