{# Form Input Component #}
{% set inputId = id|default(name) %}
{% set inputType = type|default('text') %}
{% set inputValue = value|default('') %}
{% set inputPlaceholder = placeholder|default('') %}
{% set inputRequired = required|default(false) %}
{% set inputClass = class|default('') %}
{% set error = error|default(null) %}

<div class="mb-4">
    {% if label is defined %}
    <label for="{{ inputId }}" class="form-label {% if inputRequired %}after:content-['*'] after:ml-0.5 after:text-red-500{% endif %}">
        {{ label }}
    </label>
    {% endif %}

    <input
        type="{{ inputType }}"
        id="{{ inputId }}"
        name="{{ name }}"
        value="{{ inputValue }}"
        {% if inputPlaceholder %}placeholder="{{ inputPlaceholder }}"{% endif %}
        class="form-input {{ inputClass }} {% if error %}border-red-300 focus:border-red-500 focus:ring-red-500{% endif %}"
        {% if inputRequired %}required{% endif %}
        {{ attributes|default('')|raw }}
    >

    {% if error %}
    <p class="form-error">{{ error }}</p>
    {% endif %}
</div>