{% load i18n %}

<div class="flex flex-col">
  {% if field.legend_tag %}
  <div class="flex">
    <p class="block mb-2 text-sm font-medium
      {% if field.errors %} text-red-700 dark:text-red-500
      {% else %} text-gray-900 dark:text-white {% endif %}">
      {{ field.legend_tag }}
    </p>
    {% if field.help_text %}
      <button class="ml-1 -mt-4"
        type="button"
        {% if field.auto_id %} data-tooltip-target="id_{{ field.auto_id }}_helptext"{% endif %}
        data-tooltip-style="dark"
      >
        <svg aria-hidden="true"
          class="w-4 h-4 text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
          fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
            clip-rule="evenodd"></path>
        </svg>
        <span class="sr-only">{% translate 'Show information' %}</span>
      </button>
      <div role="tooltip"
        {% if field.auto_id %} id="id_{{ field.auto_id }}_helptext"{% endif %}
        class="inline-block absolute invisible z-10 py-2 px-3 max-w-sm text-xs font-normal text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
        {{ field.help_text|safe }}
        <div class="tooltip-arrow" data-popper-arrow></div>
      </div>
    {% endif %}
  </div>
  {% endif %}

  {% if field.errors %}
    <div class="mb-2 text-xs text-red-600 dark:text-red-500">
      {{ field.errors }}
    </div>
  {% endif %}

  <input type="radio" name="field_radio" value=""
    class="w-4 h-4 focus:ring-2
    {% if field.errors %} bg-red-50 border-red-600 text-red-700
      focus:ring-red-600 focus:border-red-600
    {% else %} bg-gray-100 border-gray-300
      focus:ring-primary-500 text-primary-600
    {% endif %}"
    id="id_field_radio_0"
  >
  <div class="flex items-center gap-2 mb-1">
    {{ field }}
    <label for="{{ field.auto_id }}"
      class="text-sm font-medium cursor-pointer
        {% if field.errors %} text-red-800 
        {% else %} text-gray-900 {% endif %}"
    >
      {{ field.label }}
    </label>
  </div>
</div>