{
    "parts": {
        "ui": {
            "table": {
                "html": [
                {
                    "selector": "body",
                    "tag": "div",
                    "attr": {
                    "class": "bg-base-100 card card-border",
                    "x-data": "useAdvancedDatatables"
                    },
                    "html": [
                    {
                        "tag": "div",
                        "attr": {
                        "class": "border-base-200 flex items-center justify-between px-5 py-5  space-x-3"
                        },
                        "html": [
                        {
                            "tag": "p",
                            "attr": {
                            "class": "text-2xl text-[#008EED]"
                            },
                            "text": "Tracks"
                        },
                        {
                            "tag": "div",
                            "attr": {
                            "role": "alert",
                            "class": "alert alert-info alert-soft"
                            },
                            "html": [
                            {
                                "tag": "span",
                                "attr": {
                                "class": "iconify lucide--info text-xl text-[#008EED]"
                                }
                            },
                            {
                                "tag": "span",
                                "attr": {
                                "class": "text-[#008EED]"
                                },
                                "text": "This log tracks the alarms sent to the operators and the status of the support"
                            }
                            ]
                        },
                        {
                            "tag": "div",
                            "attr": {
                            "class": "flex items-center gap-2"
                            },
                            "html": [
                            {
                                "tag": "label",
                                "attr": {
                                "class": "input input-primary w-56"
                                },
                                "html": [
                                {
                                    "tag": "span",
                                    "attr": {
                                    "class": "iconify lucide--search text-base-content/70 size-4.5 text-[#008EED]"
                                    },
                                    "text": ""
                                },
                                {
                                    "tag": "input",
                                    "attr": {
                                    "class": "text-base placeholder:text-sm",
                                    "type": "search",
                                    "x-model": "search",
                                    "@input": "updateSearch",
                                    "placeholder": "Search"
                                    },
                                    "text": ""
                                }
                                ]
                            },
                            {
                                "tag": "div",
                                "attr": {
                                "class": "dropdown dropdown-bottom dropdown-end"
                                },
                                "html": [
                                {
                                    "tag": "div",
                                    "attr": {
                                    "tabindex": "0",
                                    "role": "button",
                                    "class": "btn btn-outline btn-primary"
                                    },
                                    "html": [
                                    {
                                        "tag": "span",
                                        "attr": {
                                        "class": "iconify lucide--columns-3-cog size-4"
                                        },
                                        "text": ""
                                    }
                                    ]
                                },
                                {
                                    "tag": "div",
                                    "attr": {
                                    "tabindex": "0",
                                    "class": "dropdown-content bg-base-100 rounded-box w-44 shadow"
                                    },
                                    "html": [
                                    {
                                        "tag": "ul",
                                        "attr": {
                                        "class": "menu w-full"
                                        },
                                        "html": [
                                        {
                                            "tag": "template",
                                            "attr": {
                                            "x-for": "column in allLeafColumns",
                                            ":key": "column.id"
                                            },
                                            "html": [
                                            {
                                                "tag": "li",
                                                "attr": {
                                                "@click": "toggleColumn(column)"
                                                },
                                                "html": [
                                                {
                                                    "tag": "div",
                                                    "attr": {
                                                    "class": "group gap-2.5",
                                                    ":data-visible": "isColumnVisible(column) ? true : null"
                                                    },
                                                    "html": [
                                                    {
                                                        "tag": "span",
                                                        "attr": {
                                                        "class": "iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"
                                                        },
                                                        "text": ""
                                                    },
                                                    {
                                                        "tag": "span",
                                                        "attr": {
                                                        "class": "font-medium",
                                                        "x-text": "column.columnDef.header"
                                                        },
                                                        "text": ""
                                                    }
                                                    ]
                                                }
                                                ]
                                            }
                                            ]
                                        }
                                        ]
                                    }
                                    ]
                                }
                                ]
                            },
                            {
                                "tag": "div",
                                "attr": {
                                "class": "dropdown dropdown-bottom dropdown-end"
                                },
                                "html": [
                                {
                                    "tag": "div",
                                    "attr": {
                                    "aria-label": "More actions",
                                    "tabindex": "0",
                                    "role": "button",
                                    "class": "btn btn-outline btn-primary"
                                    },
                                    "html": [
                                    {
                                        "tag": "span",
                                        "attr": {
                                        "class": "iconify lucide--ellipsis-vertical size-4"
                                        },
                                        "text": ""
                                    }
                                    ]
                                },
                                {
                                    "tag": "div",
                                    "attr": {
                                    "tabindex": "0",
                                    "class": "dropdown-content bg-base-100 rounded-box w-44 shadow"
                                    },
                                    "html": [
                                    {
                                        "tag": "ul",
                                        "attr": {
                                        "class": "menu w-full"
                                        },
                                        "html": [
                                        {
                                            "tag": "li",
                                            "html": [
                                            {
                                                "tag": "div",
                                                "html": [
                                                {
                                                    "tag": "span",
                                                    "attr": {
                                                    "class": "iconify lucide--refresh-cw size-4"
                                                    },
                                                    "text": ""
                                                },
                                                {
                                                    "tag": null,
                                                    "text": "Refresh Data"
                                                }
                                                ]
                                            }
                                            ]
                                        },
                                        {
                                            "tag": "li",
                                            "html": [
                                            {
                                                "tag": "div",
                                                "html": [
                                                {
                                                    "tag": "span",
                                                    "attr": {
                                                    "class": "iconify lucide--download size-4"
                                                    },
                                                    "text": ""
                                                },
                                                {
                                                    "tag": null,
                                                    "text": "Export"
                                                }
                                                ]
                                            }
                                            ]
                                        }
                                        ]
                                    }
                                    ]
                                }
                                ]
                            },
                            {
                                "tag": "button",
                                "attr": {
                                "type": "submit",
                                "class": "btn btn-outline btn-primary",
                                "style": "cursor: pointer;"
                                },
                                "text": "Add"
                            }
                            ]
                        }
                        ]
                    },
                    {
                        "tag": "div",
                        "attr": {
                        "class": "overflow-x-auto p-3"
                        },
                        "html": [
                        {
                            "tag": "table",
                            "attr": {
                            "class": "table border-solid border-2 border-[#008EED]"
                            },
                            "html": [
                            {
                                "tag": "thead",
                                "html": [
                                {
                                    "tag": "template",
                                    "attr": {
                                    "x-for": "headerGroup in table.getHeaderGroups()",
                                    ":key": "headerGroup.id"
                                    },
                                    "html": [
                                    {
                                        "tag": "tr",
                                        "html": [
                                        {
                                            "tag": "template",
                                            "attr": {
                                            "x-for": "header in headerGroup.headers",
                                            ":key": "header.id"
                                            },
                                            "html": [
                                            {
                                                "tag": "th",
                                                "attr": {
                                                "class": "text-[#008EED]",
                                                "x-show": "!header.isPlaceholder",
                                                "x-text": "flexRender(header.column.columnDef.header, header.getContext())"
                                                },
                                                "text": ""
                                            }
                                            ]
                                        }
                                        ]
                                    }
                                    ]
                                }
                                ]
                            },
                            {
                                "tag": "tbody",
                                "html": [
                                {
                                    "tag": "template",
                                    "attr": {
                                    "x-if": "!visibleRows.length"
                                    },
                                    "html": [
                                    {
                                        "tag": "tr",
                                        "html": [
                                        {
                                            "tag": "td",
                                            "attr": {
                                            ":colspan": "columns.length",
                                            "class": "h-24 text-center"
                                            },
                                            "html": [
                                            {
                                                "tag": "p",
                                                "html": [
                                                {
                                                    "tag": null,
                                                    "text": "No results."
                                                },
                                                {
                                                    "tag": "span",
                                                    "attr": {
                                                    "@click": "clearFilters",
                                                    "class": "text-primary cursor-pointer hover:underline"
                                                    },
                                                    "text": "Clear filters"
                                                }
                                                ]
                                            }
                                            ]
                                        }
                                        ]
                                    }
                                    ]
                                },
                                {
                                    "tag": "template",
                                    "attr": {
                                    "x-if": "visibleRows.length"
                                    },
                                    "html": [
                                    {
                                        "tag": "template",
                                        "attr": {
                                        "x-for": "row in visibleRows",
                                        ":key": "row.id"
                                        },
                                        "html": [
                                        {
                                            "tag": "tr",
                                            "html": [
                                            {
                                                "tag": "template",
                                                "attr": {
                                                "x-for": "cell in getVisibleCells(row)",
                                                ":key": "cell.id"
                                                },
                                                "html": [
                                                {
                                                    "tag": "td",
                                                    "html": [
                                                    {
                                                        "tag": "template",
                                                        "attr": {
                                                        "x-if": "cell.column.id === 'subject'"
                                                        },
                                                        "html": [
                                                        {
                                                            "tag": "div",
                                                            "attr": {
                                                            "class": "flex items-center gap-2"
                                                            },
                                                            "html": [
                                                            {
                                                                "tag": "div",
                                                                "html": [
                                                                {
                                                                    "tag": "p",
                                                                    "attr": {
                                                                    "class": "leading-none font-medium",
                                                                    "x-text": "cell.row.original.subject"
                                                                    },
                                                                    "text": ""
                                                                },
                                                                {
                                                                    "tag": "p",
                                                                    "attr": {
                                                                    "class": "text-base-content/70 mt-0.5 text-xs/none",
                                                                    "x-text": "cell.row.original.tracker"
                                                                    },
                                                                    "text": ""
                                                                }
                                                                ]
                                                            }
                                                            ]
                                                        }
                                                        ]
                                                    },
                                                    {
                                                        "tag": "template",
                                                        "attr": {
                                                        "x-if": "cell.column.id === 'id'"
                                                        },
                                                        "html": [
                                                        {
                                                            "tag": "span",
                                                            "attr": {
                                                            "class": "text-base-content/70 font-mono text-xs uppercase",
                                                            "x-text": "cell.row.original.id"
                                                            },
                                                            "text": ""
                                                        }
                                                        ]
                                                    },
                                                    {
                                                        "tag": "template",
                                                        "attr": {
                                                        "x-if": "cell.column.id === 'status'"
                                                        },
                                                        "html": [
                                                        {
                                                            "tag": "span",
                                                            "attr": {
                                                            ":class": "{'badge badge-success badge-sm badge-soft': cell.row.original.status === 'detected','badge badge-info badge-sm badge-soft': cell.row.original.status === 'help','badge badge-error badge-sm badge-soft': cell.row.original.status === 'away','badge badge-ghost badge-sm': ['lost', null, undefined].includes(cell.row.original.status)}",
                                                            "x-text": "cell.row.original.status.charAt(0).toUpperCase() + cell.row.original.status.slice(1)"
                                                            },
                                                            "text": ""
                                                        }
                                                        ]
                                                    },
                                                    {
                                                        "tag": "template",
                                                        "attr": {
                                                        "x-if": "cell.column.id === 'dateTime'"
                                                        },
                                                        "html": [
                                                        {
                                                            "tag": "p",
                                                            "attr": {
                                                            "class": "space-x-1 whitespace-nowrap"
                                                            },
                                                            "html": [
                                                            {
                                                                "tag": "span",
                                                                "attr": {
                                                                "x-text": "new Date(cell.row.original.dateTime).toLocaleDateString('it-IT', {day: 'numeric', month: 'short', year: '2-digit'})"
                                                                },
                                                                "text": ""
                                                            },
                                                            {
                                                                "tag": "span",
                                                                "attr": {
                                                                "class": "text-base-content/60 text-xs",
                                                                "x-text": "new Date(cell.row.original.dateTime).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})"
                                                                },
                                                                "text": ""
                                                            }
                                                            ]
                                                        }
                                                        ]
                                                    },
                                                    {
                                                        "tag": "template",
                                                        "attr": {
                                                        "x-if": "cell.column.gateway === 'gateway'"
                                                        },
                                                        "html": [
                                                        {
                                                            "tag": "span",
                                                            "attr": {
                                                            "class": "text-base-content/70 font-mono text-xs uppercase",
                                                            "x-text": "cell.row.original.gateway"
                                                            },
                                                            "text": ""
                                                        }
                                                        ]
                                                    },
                                                    {
                                                        "tag": "template",
                                                        "attr": {
                                                        "x-if": "cell.column.id === 'signal'"
                                                        },
                                                        "html": [
                                                        {
                                                            "tag": "span",
                                                            "attr": {
                                                            "class": "text-base font-medium",
                                                            "x-text": "cell.row.original.signal + '%'"
                                                            },
                                                            "text": ""
                                                        }
                                                        ]
                                                    },
                                                    {
                                                        "tag": "template",
                                                        "attr": {
                                                        "x-if": "cell.column.id === 'actions'"
                                                        },
                                                        "html": [
                                                        {
                                                            "tag": "div",
                                                            "attr": {
                                                            "class": "flex items-center gap-1.5"
                                                            },
                                                            "html": [
                                                            {
                                                                "tag": "button",
                                                                "attr": {
                                                                "aria-label": "Show",
                                                                "class": "btn btn-soft btn-xs btn-square",
                                                                "@click": "viewRow(cell.row)"
                                                                },
                                                                "html": [
                                                                {
                                                                    "tag": "span",
                                                                    "attr": {
                                                                    "class": "iconify lucide--eye size-3.5"
                                                                    },
                                                                    "text": ""
                                                                }
                                                                ]
                                                            },
                                                            {
                                                                "tag": "button",
                                                                "attr": {
                                                                "aria-label": "Delete",
                                                                "class": "btn btn-soft btn-error btn-xs btn-square",
                                                                "@click": "deleteRow(cell.row)"
                                                                },
                                                                "html": [
                                                                {
                                                                    "tag": "span",
                                                                    "attr": {
                                                                    "class": "iconify lucide--trash-2 size-3.5"
                                                                    },
                                                                    "text": ""
                                                                }
                                                                ]
                                                            }
                                                            ]
                                                        }
                                                        ]
                                                    },
                                                    {
                                                        "tag": "template",
                                                        "attr": {
                                                        "x-if": "!['id', 'subject', 'status', 'dateTime', 'signal', 'actions'].includes(cell.column.id)"
                                                        },
                                                        "html": [
                                                        {
                                                            "tag": "span",
                                                            "attr": {
                                                            "x-html": "cell.column.columnDef.cell ? cell.column.columnDef.cell(cell.getContext()) : cell.getValue()"
                                                            },
                                                            "text": ""
                                                        }
                                                        ]
                                                    }
                                                    ]
                                                }
                                                ]
                                            }
                                            ]
                                        }
                                        ]
                                    }
                                    ]
                                }
                                ]
                            }
                            ]
                        }
                        ]
                    },
                    {
                        "tag": "div",
                        "attr": {
                        "class": "border-base-200 flex flex-wrap items-center justify-between gap-2 p-5"
                        },
                        "html": [
                        {
                            "tag": "div",
                            "attr": {
                            "class": "flex items-center gap-2"
                            },
                            "html": [
                            {
                                "tag": "p",
                                "attr": {
                                "class": "text-base-content/70 text-sm max-md:hidden"
                                },
                                "text": "Items per page"
                            },
                            {
                                "tag": "select",
                                "attr": {
                                "aria-label": "Items per page",
                                "class": "select select-sm w-16",
                                "@change": "changePageSize(Number($event.target.value))"
                                },
                                "html": [
                                {
                                    "tag": "template",
                                    "attr": {
                                    "x-for": "size in pageSizes",
                                    ":key": "size"
                                    },
                                    "html": [
                                    {
                                        "tag": "option",
                                        "attr": {
                                        ":value": "size",
                                        ":selected": "size === pageSize",
                                        "x-text": "size"
                                        },
                                        "text": ""
                                    }
                                    ]
                                }
                                ]
                            }
                            ]
                        },
                        {
                            "tag": "p",
                            "attr": {
                            "class": "text-base-content/70 text-sm max-md:hidden"
                            },
                            "html": [
                            {
                                "tag": null,
                                "text": "Showing "
                            },
                            {
                                "tag": "span",
                                "attr": {
                                "class": "text-base-content font-medium",
                                "x-text": "`${start}–${end}`"
                                },
                                "text": ""
                            },
                            {
                                "tag": null,
                                "text": " out of "
                            },
                            {
                                "tag": "span",
                                "attr": {
                                "class": "text-base-content font-medium",
                                "x-text": "rowCount"
                                },
                                "text": ""
                            }
                            ]
                        },
                        {
                            "tag": "div",
                            "attr": {
                            "class": "join"
                            },
                            "html": [
                            {
                                "tag": "button",
                                "attr": {
                                "class": "btn btn-square btn-sm btn-outline border-base-300 join-item",
                                "aria-label": "Pagination controls",
                                ":disabled": "!table.getCanPreviousPage()",
                                "@click": "prevPage()"
                                },
                                "html": [
                                {
                                    "tag": "span",
                                    "attr": {
                                    "class": "iconify lucide--arrow-left"
                                    },
                                    "text": ""
                                }
                                ]
                            },
                            {
                                "tag": "input",
                                "attr": {
                                "aria-label": "Page number",
                                "type": "number",
                                "min": "1",
                                ":max": "table.getPageCount()",
                                ":value": "pageIndex + 1",
                                "@input": "setPageIndex($event.target.value - 1)",
                                "class": "input input-sm join-item w-10 text-center"
                                },
                                "text": ""
                            },
                            {
                                "tag": "button",
                                "attr": {
                                "class": "btn btn-square btn-sm btn-outline border-base-300 join-item",
                                "aria-label": "Pagination controls",
                                ":disabled": "!table.getCanNextPage()",
                                "@click": "nextPage()"
                                },
                                "html": [
                                {
                                    "tag": "span",
                                    "attr": {
                                    "class": "iconify lucide--arrow-right"
                                    },
                                    "text": ""
                                }
                                ]
                            }
                            ]
                        }
                        ]
                    }
                    ]
                }
                ]
            }
        }
    }
}