{% comment %}
Stacked Form Layout
===================

Renders form fields in a vertical stacked layout (default form layout).

Purpose:
    Provides a standard vertical form layout where each field takes
    full width with labels above inputs.

Usage Examples:
    Basic form:
        {% include 'forms/layouts/stacked.html' with form=form %}

    With fieldsets:
        {% include 'forms/layouts/stacked.html' with form=form show_fieldsets=True %}

    Exclude fields:
        {% include 'forms/layouts/stacked.html' with form=form exclude='password2' %}

Parameters:
    Required:
    - form: Django form object

    Optional:
    - exclude: Comma-separated field names to exclude
    - fields: Comma-separated field names to include (if set, only these are shown)
    - show_fieldsets: Group fields by fieldset (default: False)
    - show_help: Show help text (default: True)
    - show_required: Show required indicator (default: True)
    - submit_text: Submit button text (default: 'Submit')
    - submit_class: Submit button CSS class (default: 'btn-primary')
    - show_cancel: Show cancel button (default: False)
    - cancel_url: URL for cancel button
    - cancel_text: Cancel button text (default: 'Cancel')
    - form_class: Additional CSS classes for form wrapper

Dependencies:
    - forms/partials/form_field.html
    - forms/partials/field_error.html
    - Tailwind CSS

Accessibility:
    - Uses fieldset/legend for grouped fields
    - Labels properly associated with inputs
    - Error summary at top for screen readers
{% endcomment %}

{% load common_filters %}

{% with show_help=show_help|default:True show_required=show_required|default:True submit_text=submit_text|default:'Submit' %}

<div class="form-layout-stacked {{ form_class }}">
    {# Non-field errors at top #}
    {% if form.non_field_errors %}
    <div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
         role="alert">
        <div class="flex items-start gap-2">
            <i class="fas fa-exclamation-circle text-red-500 mt-0.5" aria-hidden="true"></i>
            <div>
                <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Please correct the following errors:</h3>
                <ul class="mt-1 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
                    {% for error in form.non_field_errors %}
                    <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}

    {# Form fields #}
    {% for field in form %}
        {% if field.is_hidden %}
            {{ field }}
        {% elif fields %}
            {# Only show specified fields #}
            {% if field.name in fields %}
                {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
            {% endif %}
        {% elif exclude %}
            {# Exclude specified fields #}
            {% if field.name not in exclude %}
                {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
            {% endif %}
        {% else %}
            {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
        {% endif %}
    {% endfor %}

    {# Form actions #}
    {% if show_actions|default:True %}
    <div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
        {% if show_cancel and cancel_url %}
        <a href="{{ cancel_url }}" class="btn-secondary {{ cancel_class }}">
            {{ cancel_text|default:'Cancel' }}
        </a>
        {% endif %}
        <button type="submit" class="{{ submit_class|default:'btn-primary' }}">
            {{ submit_text }}
        </button>
    </div>
    {% endif %}
</div>

{% endwith %}