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

{% comment %}
Inline Form Layout
==================

Renders form fields horizontally with labels inline with inputs.

Purpose:
    Provides an inline/horizontal form layout where labels appear
    to the left of inputs on larger screens.

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

    Custom label width:
        {% include 'forms/layouts/inline.html' with form=form label_width='w-1/4' %}

Parameters:
    Required:
    - form: Django form object

    Optional:
    - exclude: Comma-separated field names to exclude
    - fields: Comma-separated field names to include
    - label_width: Label column width class (default: 'w-1/3')
    - 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
    - form_class: Additional CSS classes for form wrapper

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

Accessibility:
    - Labels properly associated with inputs
    - Responsive - stacks on mobile
{% endcomment %}

{% load common_filters %}

{% with show_help=show_help|default:True show_required=show_required|default:True label_width=label_width|default:'w-1/3' submit_text=submit_text|default:'Submit' %}

<div class="form-layout-inline {{ 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 %}

    {# Form fields - inline layout #}
    {% for field in form %}
        {% if field.is_hidden %}
            {{ field }}
        {% elif fields %}
            {% if field.name in fields %}
                <div class="mb-4 sm:flex sm:items-start">
                    <label for="{{ field.id_for_label }}"
                           class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
                        {{ field.label }}
                        {% if show_required and field.field.required %}
                        <span class="text-red-500" aria-hidden="true">*</span>
                        {% endif %}
                    </label>
                    <div class="flex-1">
                        {{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
                        {% if field.errors %}
                        {% include 'forms/partials/field_error.html' with errors=field.errors %}
                        {% endif %}
                        {% if show_help and field.help_text %}
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% elif exclude %}
            {% if field.name not in exclude %}
                <div class="mb-4 sm:flex sm:items-start">
                    <label for="{{ field.id_for_label }}"
                           class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
                        {{ field.label }}
                        {% if show_required and field.field.required %}
                        <span class="text-red-500" aria-hidden="true">*</span>
                        {% endif %}
                    </label>
                    <div class="flex-1">
                        {{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
                        {% if field.errors %}
                        {% include 'forms/partials/field_error.html' with errors=field.errors %}
                        {% endif %}
                        {% if show_help and field.help_text %}
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% else %}
            <div class="mb-4 sm:flex sm:items-start">
                <label for="{{ field.id_for_label }}"
                       class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
                    {{ field.label }}
                    {% if show_required and field.field.required %}
                    <span class="text-red-500" aria-hidden="true">*</span>
                    {% endif %}
                </label>
                <div class="flex-1">
                    {{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
                    {% if field.errors %}
                    {% include 'forms/partials/field_error.html' with errors=field.errors %}
                    {% endif %}
                    {% if show_help and field.help_text %}
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    {% endfor %}

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

{% endwith %}