thrillwiki_django_no_react/backend/templates/forms/layouts/grid.html

{% comment %}
Grid Form Layout
================

Renders form fields in a responsive grid layout.

Purpose:
    Provides a multi-column grid layout for forms with many fields.
    Responsive - adjusts columns based on screen size.

Usage Examples:
    2-column grid:
        {% include 'forms/layouts/grid.html' with form=form cols=2 %}

    3-column grid:
        {% include 'forms/layouts/grid.html' with form=form cols=3 %}

    With full-width fields:
        {% include 'forms/layouts/grid.html' with form=form cols=2 full_width='description,notes' %}

Parameters:
    Required:
    - form: Django form object

    Optional:
    - cols: Number of columns (2 or 3, default: 2)
    - exclude: Comma-separated field names to exclude
    - fields: Comma-separated field names to include
    - full_width: Comma-separated field names that span full width
    - show_help: Show help text (default: True)
    - show_required: Show required indicator (default: True)
    - gap: Grid gap class (default: 'gap-4')
    - submit_text: Submit button text (default: 'Submit')
    - submit_class: Submit button CSS class
    - form_class: Additional CSS classes for form wrapper

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

Accessibility:
    - Responsive grid maintains logical order
    - Labels properly associated with inputs
{% endcomment %}

{% load common_filters %}

{% with show_help=show_help|default:True show_required=show_required|default:True cols=cols|default:2 gap=gap|default:'gap-4' submit_text=submit_text|default:'Submit' %}

<div class="form-layout-grid {{ form_class }}">
    {# Non-field errors #}
    {% 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">
        <ul class="text-sm text-red-700 dark:text-red-300 space-y-1">
            {% for error in form.non_field_errors %}
            <li class="flex items-start gap-2">
                <i class="fas fa-exclamation-circle mt-0.5" aria-hidden="true"></i>
                {{ error }}
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    {# Grid container #}
    <div class="grid {% if cols == 3 %}grid-cols-1 md:grid-cols-2 lg:grid-cols-3{% else %}grid-cols-1 md:grid-cols-2{% endif %} {{ gap }}">
        {% for field in form %}
            {% if field.is_hidden %}
                {{ field }}
            {% elif fields %}
                {% if field.name in fields %}
                    <div class="{% if full_width and field.name in full_width %}{% if cols == 3 %}md:col-span-2 lg:col-span-3{% else %}md:col-span-2{% endif %}{% endif %}">
                        {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
                    </div>
                {% endif %}
            {% elif exclude %}
                {% if field.name not in exclude %}
                    <div class="{% if full_width and field.name in full_width %}{% if cols == 3 %}md:col-span-2 lg:col-span-3{% else %}md:col-span-2{% endif %}{% endif %}">
                        {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
                    </div>
                {% endif %}
            {% else %}
                <div class="{% if full_width and field.name in full_width %}{% if cols == 3 %}md:col-span-2 lg:col-span-3{% else %}md:col-span-2{% endif %}{% endif %}">
                    {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
                </div>
            {% endif %}
        {% endfor %}
    </div>

    {# Form actions - full width #}
    {% 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_text|default:'Cancel' }}
        </a>
        {% endif %}
        <button type="submit" class="{{ submit_class|default:'btn-primary' }}">
            {{ submit_text }}
        </button>
    </div>
    {% endif %}
</div>

{% endwith %}