{% comment %}
container

A layout container which takes in a certain parameters

Parameters:
- component_name (str): the container component
- layout (json): the layout object
- layout_object_id (str/int): the object id of the layout
- init_edit (bool): whether to initialize editing

Slots:
- default: layout items
- buttons_left: buttons on the left side of the header
- buttons_right: buttons on the right side of the header
{% endcomment %}


{% load bloomerp %}


<style>
    @media (max-width: 640px) {
        [bloomerp-component="{{ component_name }}"] [data-layout-grid] {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        [bloomerp-component="{{ component_name }}"] [data-layout-grid] > [data-layout-item-id] {
            grid-column: span 1 / span 1 !important;
        }

        [bloomerp-component="{{ component_name }}"] [data-layout-action-group] > *,
        [bloomerp-component="{{ component_name }}"] [data-layout-action-group] button {
            min-width: 0;
        }

        [bloomerp-component="{{ component_name }}"] .workspace-row__header,
        [bloomerp-component="{{ component_name }}"] .workspace-row__controls {
            flex-wrap: wrap;
        }

        [bloomerp-component="{{ component_name }}"] .workspace-row__controls {
            width: 100%;
        }

        [bloomerp-component="{{ component_name }}"] .workspace-row__controls [data-row-title-input] {
            min-width: 0;
            flex: 1 1 10rem;
        }

        [bloomerp-component="{{ component_name }}"] .bloomerp-dropdown-menu {
            max-width: calc(100vw - 1rem);
            max-height: calc(100vh - 6rem);
            overflow: auto;
        }
    }
</style>

<div
    bloomerp-component="{{ component_name }}"

    data-layout="{{ layout | dump_layout_json }}"
    
    {% if can_change and change_context %}
    data-layout-available-items-url="{{ change_context.available_items_url }}"
    data-layout-render-item-url="{{ change_context.render_item_url }}"
    data-layout-save-url="{{ change_context.save_url }}"
    data-layout-object-id="{{ layout_object_id }}"
    {% endif %}

    data-init-edit="{{ init_edit | default:False }}"

    {% for attr,value in extra_attrs.items %}
    {{attr}}="{{value}}"
    {% endfor %}
>
    <!--Header Section-->    
    <div 
        class="flex flex-wrap items-center justify-between mb-4 gap-4"
        data-layout-header-section
    >   
        <!--Right Section-->
        <div class="flex w-full flex-wrap gap-2 sm:w-auto" data-layout-action-group>
            <c-ui.shortcut_tooltip 
                shortcut="mod+/" 
                action="click" 
                position="bottom" 
                >
                <button class="btn btn-sm btn-secondary" type="button" data-search-button aria-pressed="false">
                    <i class="fa fa-search"></i>
                    <c-i18n.blocktrans>Search</c-i18n.blocktrans>
                </button>
            </c-ui.shortcut_tooltip>

            {{ buttons_left }}
        </div>
        <!--End Right Section-->
        
        <!--Left section-->
        <div class="flex w-full flex-wrap gap-2 sm:w-auto sm:justify-end" data-layout-action-group>
            {{ buttons_right }}
            
            {% if can_change %}
            <c-ui.shortcut_tooltip 
                shortcut="mod+e" 
                action="click" 
                position="bottom">
                <button class="btn btn-sm btn-secondary" type="button" data-layout-edit-toggle>
                    <i class="fa fa-gear"></i>
                    <c-i18n.blocktrans>Edit</c-i18n.blocktrans>
                </button>
            </c-ui.shortcut_tooltip>

            <div class="hidden flex-wrap gap-2" data-layout-open-sidebar data-layout-action-group>
                <c-ui.shortcut_tooltip 
                    shortcut="mod+m" 
                    action="click" 
                    position="bottom">
                    <button 
                        class="btn btn-sm btn-secondary" 
                        bloomerp-open-drawer="layout-drawer-items"
                        type="button"
                        >
                        <i class="fa fa-grip"></i>
                        <c-i18n.blocktrans>Add items</c-i18n.blocktrans>
                    </button>
                </c-ui.shortcut_tooltip>
            </div>
            {% endif %}
        </div>
        <!--End Left section-->
    </div>
    <!--End Header Section-->

    <div data-layout-header-section-2>
        
    </div>

    <!--Layout items-->
    <div class="space-y-4" data-layout-root>
        {% if layout %}
            {% for row in layout.rows %}
                <c-features.layout.row :row="row" />
            {% endfor %}
        {% else %}
            {{ slot }}
        {% endif %}
    </div>
    <!--End layout items-->

    {% if can_change and change_context %}
    <!--Drawer section-->
    <c-ui.drawer 
        id="layout-drawer-items" 
        side="right" 
        backdrop="False"
        >
        <div class="p-4">
            <c-ui.text.subtitle>Available Items</c-ui.text.subtitle>
            <div class="mt-4" data-layout-available-items></div>
        </div>
    </c-ui.drawer>
    <!--End drawer section-->

    <!--Display options modal-->
    <c-ui.modal id="field-display-option-modal" title="Edit display options"></c-ui.modal>
    <!--End display options modal-->
    {% endif %}


    <!--Search panel-->
    <div
        class="hidden absolute right-6 top-16 z-40 rounded-xl border border-gray-200 bg-white p-2 shadow-sm"
        data-form-search-panel
        aria-hidden="true"
    >
        <div class="flex items-center gap-2">
            <input
                type="text"
                class="input input-sm"
                placeholder="Find item"
                data-form-search-input
                aria-label="Search layout items"
            >
            <span class="text-muted whitespace-nowrap text-sm" data-form-search-status>
                0 results
            </span>
        </div>
    </div>
    <!--End Search panel-->
</div>