<div
    class="{% block row_class %}{% endblock %}"
    x-data="{
        row_id: null,
        table_id: null,
        is_open: false,
        has_children: false,

        init() {
            this.row_id = this.$id('expandable-row');
            this.$el.setAttribute('data-row-id', this.row_id);
            this.table_id = this.$el.closest('[data-table-id]').dataset.tableId;
        },

        handle_child_registered(event) {
            if (event.detail.row_id === this.row_id && (!event.detail.table_id || event.detail.table_id === this.table_id)) {
                this.has_children = true;
            }
        },

        handle_toggle_row_state(event) {
            if (event.detail.row_id === this.row_id && (!event.detail.table_id || event.detail.table_id === this.table_id)) {
                this.is_open = event.detail.is_open;
            }
        }
    }"
    @child-registered.window="handle_child_registered($event)"
    @toggle-row-state.window="handle_toggle_row_state($event)"
>
    <div class="d-flex align-items-center gap-2">
        <template x-if="has_children">
            <i
                :class="is_open ? 'bi-chevron-down' : 'bi-chevron-right'"
                @click="$dispatch('toggle-row', { row_id: row_id, table_id: table_id })"
                class="bi cursor-pointer text-primary"
            ></i>
        </template>

        {% block row_header %}{% endblock %}
    </div>

    {% block row_content %}{% endblock %}

    {% block child_row %}{% endblock %}
</div>
