{% if field.field.widget.input_type == 'checkbox' %}
  <div class="flex items-start gap-3" data-field="{{ field.name }}">
    <div class="pt-0.5">{{ field }}</div>
    <div class="min-w-0">
      <label class="label" for="{{ field.id_for_label }}">{{ field.label }}</label>
      {% if field.help_text %}<p class="help">{{ field.help_text }}</p>{% endif %}
      {% for error in field.errors %}<p class="error-text">{{ error }}</p>{% endfor %}
    </div>
  </div>
{% elif field.field.widget.is_color %}
  {% comment %}Pole koloru: systemowa próbka obok wartości HEX. Oba kierunki
     przepisuje skrypt panelu (panel/base.html) po `data-color-for` - do bazy
     i tak idzie tekst z pola po prawej. Atrybutu `oninput` tu być nie może:
     CSP serwisu nie ma 'unsafe-inline', więc przeglądarka takiego handlera
     nie uruchomi i próbka nie robilaby nic.{% endcomment %}
  <div data-field="{{ field.name }}">
    <label class="label" for="{{ field.id_for_label }}">
      {{ field.label }}{% if field.field.required %} <span class="text-red-500" title="pole wymagane">*</span>{% endif %}
    </label>
    <div class="mt-1 flex items-center gap-3">
      <input type="color" aria-label="Wybierz kolor: {{ field.label }}"
             value="{{ field.value|default:'#ffffff' }}"
             class="h-10 w-12 shrink-0 cursor-pointer border border-slate-300 bg-white p-1 dark:border-slate-700 dark:bg-slate-950"
             data-color-for="{{ field.id_for_label }}">
      <div class="min-w-0 flex-1">{{ field }}</div>
    </div>
    {% if field.help_text %}<p class="help">{{ field.help_text }}</p>{% endif %}
    {% for error in field.errors %}<p class="error-text">{{ error }}</p>{% endfor %}
  </div>
{% else %}
  <div data-field="{{ field.name }}">
    <label class="label" for="{{ field.id_for_label }}">
      {{ field.label }}{% if field.field.required %} <span class="text-red-500" title="pole wymagane">*</span>{% endif %}
    </label>
    <div class="mt-1">{{ field }}</div>
    {% if field.help_text %}<p class="help">{{ field.help_text }}</p>{% endif %}
    {% for error in field.errors %}<p class="error-text">{{ error }}</p>{% endfor %}
  </div>
{% endif %}