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

{% if layout_non_field_errors %}
    <div class="space-y-2 mb-4">
        {% for error in layout_non_field_errors %}
            <div class="alert alert-danger" role="alert">
                <div>{{ error }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}

<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 attachment_avatar_hidden %}
        <input type="file" name="avatar" accept="image/*" hidden data-reference-avatar-input>
        {{ form.avatar.errors }}
    {% endif %}
    {% if foreign_field_widget_id %}
        <input type="hidden" name="foreign_field_widget_id" value="{{ foreign_field_widget_id }}">
    {% endif %}
    {% if data_view_create_id %}
        <input type="hidden" name="data_view_create_id" value="{{ data_view_create_id }}">
    {% endif %}
    {% for field_name, value in hidden_initial_fields %}
        <input type="hidden" name="{{ field_name }}" value="{{ value }}">
    {% endfor %}

    <c-features.layout.container
        header_margin_class="mb-3"
        below_header_margin_class="mb-3"
        :component_name="ts_container_component"

        :can_change="can_change"

        :change_context="change_context"

        :layout="layout"

        :layout_object_id="layout_object_id"

        :extra_attrs="layout_container_extra_attrs"
    >   
        <!--Buttons left-->
        <c-slot name="buttons_left">
            {% if can_manage_attachments %}
            {% translate 'Attach' as attach_text %}
            {% translate 'Avatar' as avatar_text %}
            {% translate 'People' as people_text %}
            {% translate 'Objects' as objects_text %}
            {% translate 'Labels' as labels_text %}
            {% translate 'Files' as files_text %}
            <c-ui.shortcut_tooltip shortcut="mod+shift+a" action="click" position="bottom" :text="attach_text" target="[name='reference-attach']">
            <c-ui.dropdown.body trigger_icon_class="fa-solid fa-paperclip" trigger_class="gap-2" :trigger_text="attach_text" trigger_button_name="reference-attach" trigger_button_class="btn-secondary" size="sm" position="left" fixed="True">
                <div data-reference-avatar hidden><c-ui.dropdown.item :text="avatar_text" icon="fa-solid fa-user-circle" /></div>
                <c-ui.dropdown.submenu :text="people_text" icon="fa-solid fa-user" id="attach-people">
                    <c-features.references.search kind="user" />
                </c-ui.dropdown.submenu>
                <c-ui.dropdown.submenu :text="objects_text" icon="fa-solid fa-link" id="attach-objects">
                    <c-features.references.search kind="object" />
                </c-ui.dropdown.submenu>
                <c-ui.dropdown.submenu :text="labels_text" icon="fa-solid fa-tag" id="attach-labels">
                    <c-features.references.search kind="label" />
                </c-ui.dropdown.submenu>
                <c-ui.dropdown.submenu :text="files_text" icon="fa-solid fa-paperclip" id="attach-files">
                    <c-features.references.search kind="file" />
                </c-ui.dropdown.submenu>
            </c-ui.dropdown.body>
            </c-ui.shortcut_tooltip>
            {% endif %}
        </c-slot>
        <!--End buttons left-->

        <!--Buttons right-->
        {% if full_form_url %}
        <c-slot name="buttons_right">
            <c-features.preferences.select_preference_button
                model="UserObjectLayoutPreference"
                :args="{
                    '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>
                    {% blocktrans trimmed %}
                        Back
                    {% endblocktrans %}
                </button>
                <button type="button" class="btn btn-sm btn-secondary" id="object-crud-container-reset-button">
                    <i class="fa fa-rotate-left"></i>
                    {% blocktrans trimmed %}
                        Reset
                    {% endblocktrans %}
                </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>
                        {% blocktrans %}Save{% endblocktrans %}
                    </button>
                </c-ui.shortcut_tooltip>
                {% if layout_is_create %}
                <button
                    type="submit"
                    name="next"
                    value="{{ request.path }}"
                    class="btn btn-sm btn-secondary"
                    id="object-crud-container-save-and-create-new-button"
                >
                    <i class="fa fa-plus"></i>
                    {% blocktrans trimmed %}
                        Save and Create New
                    {% endblocktrans %}
                </button>
                {% endif %}
            </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-ui.shortcut_tooltip
                    shortcut="mod+shift+p"
                    action="click"
                    position="bottom"
                >
            <c-features.preferences.select_preference_button
                model="UserObjectLayoutPreference"
                :args="{
                    'content_type_id': '{{ content_type_id }}',
                }"
                selected_preference_name="{{ layout_preference_object.name }}"
            />
            </c-ui.shortcut_tooltip>

            <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>
                    {% blocktrans trimmed %}
                        Back
                    {% endblocktrans %}
                </button>
                <button type="button" class="btn btn-sm btn-secondary" id="object-crud-container-reset-button">
                    <i class="fa fa-rotate-left"></i>
                    {% blocktrans trimmed %}
                        Reset
                    {% endblocktrans %}
                </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>
                        {% blocktrans trimmed %}
                            Save
                        {% endblocktrans %}
                    </button>
                </c-ui.shortcut_tooltip>
                {% if layout_is_create %}
                <c-ui.shortcut_tooltip
                    shortcut="mod+shift+s"
                    action="click"
                    position="bottom"
                >
                    <button
                        type="submit"
                        name="next"
                        value="{{ request.path }}"
                        class="btn btn-sm btn-secondary"
                        id="object-crud-container-save-and-create-new-button"
                    >
                        <i class="fa fa-plus"></i>
                        {% blocktrans trimmed %}
                            Save and Create New
                        {% endblocktrans %}
                    </button>
                </c-ui.shortcut_tooltip>
                {% endif %}
            </div>
        </c-slot>
        {% endif %}

        <c-slot name="bellow_header">
            <div bloomerp-component="reference-attachments" {% if not object_reference_state %}hidden{% endif %}
                 data-can-change="{{ can_manage_attachments|yesno:'true,false' }}"
                 data-reference-preview-url="{% url 'components_preview_file' file_id='__file_id__' %}"
                 data-reference-search-url="{% url 'components_objects_references' %}"
                 data-reference-upload-url="{% url 'api_assistant_file_upload' %}"
                 data-reference-labels-url="{% url 'components_text_editor_labels' %}">
                {{ object_reference_state|json_script }}
                {% if can_manage_attachments %}<input type="hidden" name="object_references" value="{}">{% endif %}
                <div class="flex flex-wrap items-center gap-2">
                    <div class="contents" data-reference-chips></div>
                    <div data-reference-files-group hidden>
                        <c-ui.dropdown.body position="left" fixed="True" width="w-80" menu_class="max-h-80 overflow-y-auto">
                            <c-slot name="trigger_html">
                                <button type="button" class="badge badge-secondary gap-2" x-ref="trigger"
                                        data-reference-files-trigger aria-haspopup="true" :aria-expanded="open.toString()"
                                        @click="open = !open; if (open) $nextTick(() => resolvePlacement())">
                                    <i class="fa-solid fa-paperclip" aria-hidden="true"></i>
                                    <span data-reference-files-count></span>
                                    <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
                                </button>
                            </c-slot>
                            <div data-reference-file-list></div>
                        </c-ui.dropdown.body>
                    </div>
                </div>
            </div>
        </c-slot>
        
    </c-features.layout.container>
</form>