{# Reusable form macros #}

{# Text input field #}
{% macro text_input(name, label, type='text', placeholder='', value='', required=false, error=none, help=none) %}
<div class="mb-4">
    <label for="{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
        {{ label }}
        {% if required %}<span class="text-red-500">*</span>{% endif %}
    </label>
    <input type="{{ type }}"
           name="{{ name }}"
           id="{{ name }}"
           value="{{ value }}"
           placeholder="{{ placeholder }}"
           {% if required %}required{% endif %}
           class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors
                  {% if error %}border-red-500 bg-red-50{% else %}border-gray-300{% endif %}"
           aria-describedby="{{ name }}-help {{ name }}-error">
    {% if help %}
    <p id="{{ name }}-help" class="mt-1 text-sm text-gray-500">{{ help }}</p>
    {% endif %}
    {% if error %}
    <p id="{{ name }}-error" class="mt-1 text-sm text-red-600" role="alert">{{ error }}</p>
    {% endif %}
</div>
{% endmacro %}

{# Textarea field #}
{% macro textarea(name, label, placeholder='', value='', required=false, rows=4, error=none, help=none) %}
<div class="mb-4">
    <label for="{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
        {{ label }}
        {% if required %}<span class="text-red-500">*</span>{% endif %}
    </label>
    <textarea name="{{ name }}"
              id="{{ name }}"
              rows="{{ rows }}"
              placeholder="{{ placeholder }}"
              {% if required %}required{% endif %}
              class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors resize-y
                     {% if error %}border-red-500 bg-red-50{% else %}border-gray-300{% endif %}"
              aria-describedby="{{ name }}-help {{ name }}-error">{{ value }}</textarea>
    {% if help %}
    <p id="{{ name }}-help" class="mt-1 text-sm text-gray-500">{{ help }}</p>
    {% endif %}
    {% if error %}
    <p id="{{ name }}-error" class="mt-1 text-sm text-red-600" role="alert">{{ error }}</p>
    {% endif %}
</div>
{% endmacro %}

{# Select dropdown #}
{% macro select(name, label, options, selected='', required=false, error=none, help=none) %}
<div class="mb-4">
    <label for="{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
        {{ label }}
        {% if required %}<span class="text-red-500">*</span>{% endif %}
    </label>
    <select name="{{ name }}"
            id="{{ name }}"
            {% if required %}required{% endif %}
            class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-white
                   {% if error %}border-red-500 bg-red-50{% else %}border-gray-300{% endif %}"
            aria-describedby="{{ name }}-help {{ name }}-error">
        {% for value, label in options %}
        <option value="{{ value }}" {% if value == selected %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
    </select>
    {% if help %}
    <p id="{{ name }}-help" class="mt-1 text-sm text-gray-500">{{ help }}</p>
    {% endif %}
    {% if error %}
    <p id="{{ name }}-error" class="mt-1 text-sm text-red-600" role="alert">{{ error }}</p>
    {% endif %}
</div>
{% endmacro %}

{# Checkbox #}
{% macro checkbox(name, label, checked=false, help=none) %}
<div class="mb-4 flex items-start">
    <input type="checkbox"
           name="{{ name }}"
           id="{{ name }}"
           {% if checked %}checked{% endif %}
           class="mt-1 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
    <div class="ml-3">
        <label for="{{ name }}" class="text-sm font-medium text-gray-700">{{ label }}</label>
        {% if help %}
        <p class="text-sm text-gray-500">{{ help }}</p>
        {% endif %}
    </div>
</div>
{% endmacro %}

{# Primary button #}
{% macro button_primary(text, type='submit', name=none, disabled=false, full_width=false) %}
<button type="{{ type }}"
        {% if name %}name="{{ name }}"{% endif %}
        {% if disabled %}disabled{% endif %}
        class="{% if full_width %}w-full{% endif %} inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
    {{ text }}
</button>
{% endmacro %}

{# Secondary button #}
{% macro button_secondary(text, type='button', name=none, disabled=false, full_width=false) %}
<button type="{{ type }}"
        {% if name %}name="{{ name }}"{% endif %}
        {% if disabled %}disabled{% endif %}
        class="{% if full_width %}w-full{% endif %} inline-flex justify-center items-center px-6 py-3 border-2 border-cyan-500 text-base font-medium rounded-md text-cyan-600 bg-transparent hover:bg-cyan-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
    {{ text }}
</button>
{% endmacro %}

{# Danger button #}
{% macro button_danger(text, type='button', name=none, disabled=false) %}
<button type="{{ type }}"
        {% if name %}name="{{ name }}"{% endif %}
        {% if disabled %}disabled{% endif %}
        class="inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
    {{ text }}
</button>
{% endmacro %}

{# Ghost/link button #}
{% macro button_ghost(text, href='#') %}
<a href="{{ href }}"
   class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 transition-colors">
    {{ text }}
    <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
</a>
{% endmacro %}

{# Form error alert #}
{% macro form_errors(errors) %}
{% if errors %}
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg" role="alert">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-red-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800">There were errors with your submission</h3>
            <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
                {% for error in errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endif %}
{% endmacro %}

{# Success alert #}
{% macro success_alert(message) %}
{% if message %}
<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg" role="alert">
    <div class="flex items-center">
        <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <p class="ml-3 text-sm font-medium text-green-800">{{ message }}</p>
    </div>
</div>
{% endif %}
{% endmacro %}