{# form_field.html #}
{% comment %}
Usage: {% include 'components/form_field.html' with field=form.field_name %}

Features:
- Automatic label generation
- Required field indication
- Help text display with info icon
- Error message handling with warning icon
- Consistent ICTAZ brand styling
{% endcomment %}

<div class="form-group mb-4">
    <label for="{{ field.id_for_label }}" class="form-label{% if field.field.required %} required{% endif %}">
        {{ field.label }}
        {% if field.field.required %}
        <span class="text-danger ms-1">*</span>
        {% endif %}
    </label>

    <div class="field-wrapper">
        {{ field }}

        {% if field.help_text %}
        <div class="help-text mt-2">
            <i class="fas fa-info-circle text-primary me-2"></i>
            <small class="text-muted">{{ field.help_text }}</small>
        </div>
        {% endif %}

        {% if field.errors %}
        <div class="error-message mt-2">
            <i class="fas fa-exclamation-circle text-danger me-2"></i>
            <small class="text-danger">{{ field.errors|join:', ' }}</small>
        </div>
        {% endif %}
    </div>
</div>