{% macro render_field(field, label=True, mb="mb-4", wrapper_class="", description="") %}
<div class="field {% if field.errors %}error{% endif %} {% if mb %} {{ mb }} {% endif %} {{ wrapper_class }}">
    {% if label %}
    <label for="{{ field.id }}" class="block text-sm font-bold text-gray-700">{{ field.label }}</label>
    <div class="mb-2 text-xs text-gray-700">{{ description }}</div>
    {% endif %}
    {% if field.type == "SelectField" %}
    <div class="relative">
        {{ field(**kwargs)|safe }}
        <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
            <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
        </div>
    </div>
    {% else %}
    {{ field(**kwargs)|safe }}
    {% endif %}
    {% if field.errors %}
    <ul class="pl-1 mt-2 text-xs text-red-700 errors">
        {% for error in field.errors %}
        <li>{{ error }}</li>
        {% endfor %}
    </ul>
    {% endif %}
</div>
{% endmacro %}