{% load bloomerp %}
{% load cotton %}

<div
    bloomerp-component="object-crud-view-container"
    data-content-type-id="{{ content_type_id }}"
    {% if not create and object %}data-object-id="{{ object.pk }}"{% endif %}
    data-layout='{{ layout|dump_layout_json }}'
    data-layout-save-url="{{ layout_save_url }}"
    data-layout-available-items-url="{{ layout_available_items_url }}"
    data-layout-render-item-url="{{ layout_render_item_url }}"
    data-non-required-fields-visible="{{ non_required_fields_visible|default:'true'|lower }}"
>
    <div class="mb-4 flex justify-between">
        <div class="flex gap-3">
            <c-ui.tooltip title="" text="Allows you to edit the layout of the form" position="bottom">
                <button type="button" class="btn btn-sm btn-secondary{% if create and create_blocked %} hidden{% endif %}" data-layout-edit-toggle>
                    <i class="fa fa-pen-to-square"></i>
                    <c-blocktrans>
                        Edit Layout
                    </c-blocktrans>
                </button>
            </c-ui.tooltip>
            <button
                type="button"
                class="btn btn-sm btn-secondary hidden{% if create and create_blocked %} hidden{% endif %}"
                data-layout-open-sidebar
                bloomerp-open-drawer="{% if create %}create{% else %}detail{% endif %}-layout-items-drawer"
            >
                <i class="fa fa-plus"></i>
                <c-blocktrans>
                    Add Fields
                </c-blocktrans>
            </button>

            <c-ui.tooltip text="Toggles the required fields" position="bottom">
                <button 
                    type="button" 
                    class="btn btn-sm btn-dark"
                    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.tooltip>
            {{ buttons_left }}
        </div>

        <div class="flex gap-3">
            <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>
                <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>
            </div>
            {{ buttons_right }}
        </div>
    </div>

    {{ slot }}

    <div class="space-y-4" data-layout-root>
        {% if layout %}
            {% 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 is_required=item.is_required non_required_fields_visible=non_required_fields_visible only %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>

    <c-ui.drawer id="{% if create %}create{% else %}detail{% endif %}-layout-items-drawer" side="right" backdrop="False">
        <div class="p-4">
            <c-ui.text.subtitle>Available fields</c-ui.text.subtitle>
            <div class="mt-4" data-layout-available-items></div>
        </div>
    </c-ui.drawer>
</div>