{% load crispy_forms_tags %}
{% load cotton %}

{% if layout %}
    {% if layout_non_field_errors %}
        {% for error in layout_non_field_errors %}
            <div class="alert-message-error mb-4 rounded px-4 py-3" role="alert">
                <div class="alert-message">{{ error }}</div>
            </div>
        {% endfor %}
    {% endif %}

    {% if create_blocked_message %}
        <div class="alert-message-error mb-4 rounded px-4 py-3" role="alert">
            <div class="alert-message">{{ create_blocked_message }}</div>
        </div>
    {% endif %}

    {% if layout_has_form %}
    <form
        {% if layout_is_create %}
            hx-post="{{ request.path }}"
            hx-encoding="multipart/form-data"
            hx-target="{{ form_hx_target|default:'#main-content' }}"
            hx-swap="innerHTML"
            hx-push-url="{{ form_hx_push_url|yesno:'true,false' }}"
        {% else %}
            hx-post="{{ request.path }}"
            hx-encoding="multipart/form-data"
            hx-target="{{ form_hx_target|default:'#detail-view-content' }}"
            hx-swap="innerHTML"
            hx-push-url="false"
        {% endif %}
    >
        {% csrf_token %}
        {% if foreign_field_widget_id %}
            <input type="hidden" name="foreign_field_widget_id" value="{{ foreign_field_widget_id }}">
        {% endif %}
        {% for field_name, value in hidden_initial_fields %}
            <input type="hidden" name="{{ field_name }}" value="{{ value }}">
        {% endfor %}

        <c-layout.container
            component_name="object-crud-view-container"
            :layout="layout"
            :layout_object_id="layout_object_id"
            :layout_object_content_type_id="layout_object_content_type_id"
            :can_edit="can_change_layout"
            :extra_attrs="layout_container_extra_attrs"
        >
            <c-slot name="buttons_left">
                <div data-toggle-non-required-fields-container>
                    <c-ui.shortcut_tooltip
                        shortcut="mod+."
                        position="bottom">
                        <button
                            type="button"
                            class="btn btn-sm btn-secondary"
                            data-toggle-non-required-fields
                            aria-pressed="false"
                        >
                            <i class="fa fa-asterisk"></i>
                            <span data-toggle-non-required-fields-label>
                                <c-blocktrans>
                                    Show Required Only
                                </c-blocktrans>
                            </span>
                        </button>
                    </c-ui.shortcut_tooltip>
                </div>
            </c-slot>

            {% if full_form_url %}
            <c-slot name="buttons_right">
                <c-select_preference_button
                    type="{{ layout_mode }}"
                    :content_type_id="content_type_id"
                    selected_preference_name="{{ layout_preference_object.name }}"
                />

                <div class="hidden flex gap-3" id="object-crud-container-buttons">
                    <button type="button" class="btn btn-sm btn-secondary" id="object-crud-container-back-button">
                        <i class="fa fa-arrow-left"></i>
                        <c-blocktrans>
                            Back
                        </c-blocktrans>
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" id="object-crud-container-reset-button">
                        <i class="fa fa-rotate-left"></i>
                        <c-blocktrans>
                            Reset
                        </c-blocktrans>
                    </button>
                    <c-ui.shortcut_tooltip
                        shortcut="mod+s"
                        action="click"
                        position="bottom">
                        <button type="submit" class="btn btn-sm btn-primary" id="object-crud-container-save-button">
                            <i class="fa fa-save"></i>
                            <c-blocktrans>
                                Save
                            </c-blocktrans>
                        </button>
                    </c-ui.shortcut_tooltip>
                </div>

                <button
                    type="button"
                    class="btn btn-sm btn-secondary"
                    data-open-full-form
                    data-full-form-url="{{ full_form_url }}"
                >
                    <i class="fa fa-up-right-from-square"></i>
                    Open Full Form
                </button>
            </c-slot>
            {% else %}
            <c-slot name="buttons_right">
                <c-select_preference_button
                    type="{{ layout_mode }}"
                    :content_type_id="content_type_id"
                    selected_preference_name="{{ layout_preference_object.name }}"
                />

                <div class="hidden flex gap-3" id="object-crud-container-buttons">
                    <button type="button" class="btn btn-sm btn-secondary" id="object-crud-container-back-button">
                        <i class="fa fa-arrow-left"></i>
                        <c-blocktrans>
                            Back
                        </c-blocktrans>
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" id="object-crud-container-reset-button">
                        <i class="fa fa-rotate-left"></i>
                        <c-blocktrans>
                            Reset
                        </c-blocktrans>
                    </button>
                    <c-ui.shortcut_tooltip
                        shortcut="mod+s"
                        action="click"
                        position="bottom">
                        <button type="submit" class="btn btn-sm btn-primary" id="object-crud-container-save-button">
                            <i class="fa fa-save"></i>
                            <c-blocktrans>
                                Save
                            </c-blocktrans>
                        </button>
                    </c-ui.shortcut_tooltip>
                </div>
            </c-slot>
            {% endif %}

            {% for row in layout.rows %}
                <div
                    class="workspace-row"
                    data-layout-row
                    data-row-title="{{ row.title|default:'' }}"
                    data-row-columns="{{ row.columns }}"
                >
                    <div class="workspace-row__header workspace-row__header--static" data-row-header>
                        <span class="workspace-row__title{% if not row.title %} workspace-row__title--empty{% endif %}" data-row-title-display>{{ row.title|default:' ' }}</span>

                        <div class="workspace-row__controls" data-row-controls>
                            <input type="text" class="input input-sm min-w-32" data-row-title-input value="{{ row.title|default:'' }}" placeholder="Row title" />
                            <input type="number" min="1" max="12" value="{{ row.columns }}" class="workspace-row__input" data-row-cols-input />
                            <button type="button" class="workspace-row__add" data-add-row title="Add row below">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button type="button" class="workspace-row__drag" data-row-drag-handle title="Drag row">
                                <i class="fa fa-grip-vertical"></i>
                            </button>
                            <button type="button" class="workspace-row__remove" data-remove-row title="Remove row">
                                <i class="fa fa-xmark"></i>
                            </button>
                        </div>
                    </div>

                    <div class="workspace-row__grid" data-layout-grid style="grid-template-columns: repeat({{ row.columns }}, minmax(0, 1fr));">
                        {% for item in row.items %}
                            {% include "inclusion_tags/layout_field.html" with application_field=item.application_field field=item.field value=item.value input=item.input errors=item.errors help_text=item.help_text colspan=item.colspan config=item.config config_json=item.config_json display_label=item.display_label is_required=item.is_required non_required_fields_visible=non_required_fields_visible layout_preference_object=layout_preference_object layout_mode=layout_mode object_id=object.pk only %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </c-layout.container>
    </form>
    {% else %}
    <c-layout.container
        component_name="object-crud-view-container"
        :layout="layout"
        :layout_object_id="layout_object_id"
        :layout_object_content_type_id="layout_object_content_type_id"
        :can_edit="can_change_layout"
        :extra_attrs="layout_container_extra_attrs"
    >
        <c-slot name="buttons_left">
            <div data-toggle-non-required-fields-container>
                <c-ui.shortcut_tooltip
                    shortcut="mod+."
                    position="bottom">
                    <button
                        type="button"
                        class="btn btn-sm btn-secondary"
                        data-toggle-non-required-fields
                        aria-pressed="false"
                    >
                        <i class="fa fa-asterisk"></i>
                        <span data-toggle-non-required-fields-label>
                            <c-blocktrans>
                                Show Required Only
                            </c-blocktrans>
                        </span>
                    </button>
                </c-ui.shortcut_tooltip>
            </div>
        </c-slot>

        <c-slot name="buttons_right">
            <c-select_preference_button
                type="{{ layout_mode }}"
                :content_type_id="content_type_id"
                selected_preference_name="{{ layout_preference_object.name }}"
            />
        </c-slot>

        {% for row in layout.rows %}
            <div
                class="workspace-row"
                data-layout-row
                data-row-title="{{ row.title|default:'' }}"
                data-row-columns="{{ row.columns }}"
            >
                <div class="workspace-row__header workspace-row__header--static" data-row-header>
                    <span class="workspace-row__title{% if not row.title %} workspace-row__title--empty{% endif %}" data-row-title-display>{{ row.title|default:' ' }}</span>

                    <div class="workspace-row__controls" data-row-controls>
                        <input type="text" class="input input-sm min-w-32" data-row-title-input value="{{ row.title|default:'' }}" placeholder="Row title" />
                        <input type="number" min="1" max="12" value="{{ row.columns }}" class="workspace-row__input" data-row-cols-input />
                        <button type="button" class="workspace-row__add" data-add-row title="Add row below">
                            <i class="fa fa-plus"></i>
                        </button>
                        <button type="button" class="workspace-row__drag" data-row-drag-handle title="Drag row">
                            <i class="fa fa-grip-vertical"></i>
                        </button>
                        <button type="button" class="workspace-row__remove" data-remove-row title="Remove row">
                            <i class="fa fa-xmark"></i>
                        </button>
                    </div>
                </div>

                <div class="workspace-row__grid" data-layout-grid style="grid-template-columns: repeat({{ row.columns }}, minmax(0, 1fr));">
                    {% for item in row.items %}
                        {% include "inclusion_tags/layout_field.html" with application_field=item.application_field field=item.field value=item.value input=item.input errors=item.errors help_text=item.help_text colspan=item.colspan config=item.config config_json=item.config_json display_label=item.display_label is_required=item.is_required non_required_fields_visible=non_required_fields_visible layout_preference_object=layout_preference_object layout_mode=layout_mode object_id=object.pk only %}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </c-layout.container>
    {% endif %}
{% else %}
    {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
        <div class="alert-message-error mb-4 rounded px-4 py-3" role="alert">
            <div class="alert-message">{{ error }}</div>
        </div>
        {% endfor %}
    {% endif %}

    <form method="post" action="{{ request.path }}" enctype="multipart/form-data">
        {% csrf_token %}

        {% if form.helper %}{% crispy form %}{% else %}{{ form|crispy }}{% endif %}

        <div class="flex justify-center gap-2 mt-2">
            <button type="submit" class="btn btn-primary">Create {{ model_name }}</button>
            <button type="reset" class="btn btn-secondary">Reset</button>
        </div>
    </form>
{% endif %}