/** Datei: plugins/rest/assets.OLD/js/arunox/templates/button.js **/
/**
 * rest/arunox/templates/button.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Templates.register( 'button', {
    hooks           : {
        config          : function( config ) {
            if( config.type )   config.attributes.type      ??= config.type;
            if( config.type )   config.attributes.type      ??= config.type;
            if( config.name )   config.attributes.name      ??= config.name;
            if( config.value )  config.attributes.value     ??= config.value;
            if( config.value )  config.attributes.value     ??= config.value;
            if( config.target ) config.attributes.target    ??= config.target;

            return config;
        }
    },
    htmlTag         : function( config, data, ctx ) {
        return config.href ? 'a' : 'button';
    },
    builder         : function( config, data ) {
        const className	= config?.name || 'button';
        const block 	= config.block ? `${className} ${config.block}__${className}` : className;

        this.root.classList.add( ...block.split(' ') );

        if( config.label ) {
            this.root.classList.add( 'has--label' );
            this.render( 'span', {
                classes         : `${block}__label label`,
                content         : config.label,
            });
        }

        if( config.href ) {
            this.root.href     = ARUNOX.Router.parseUrl( config.href, data );
            // this.root.target   = config.target || '_blank';

            this.root.addEventListener( 'click', ( event ) => {
                event.stopPropagation();
            });

            return;
        }

        if( config.type ) {
            const form = this.root.closest( 'form' );

            if( form ) {
                if( !form.id ) form.id = crypto.randomUUID();
                this.root.setAttribute( 'form', form.id );
            }
        }

        if( config.action ) {
            this.root.addEventListener( 'click', ( event ) => {
                event.preventDefault();
                event.stopPropagation();

                if( this.root.name && this.root.value !== '' && this.root.value !== 'undefined' ) {
                    ARUNOX.Router.handle( config.action, { [`${this.name}`] : this.value }, data, 'rest' );
                }
                else ARUNOX.Router.handle( config.action, {}, data, 'rest' );
            });
        }
    },
});

ARUNOX.Templates.register( 'buttons', {
    htmlTag         : 'div',
    hooks           : {
        config          : function( config ) {
            config.datasets.arx.node = 'buttons';

            return config;
        },
    },
    builder         : function( config, data ) {}
});

/** Datei: plugins/rest/assets.OLD/js/arunox/templates/_general.js **/
/**
 * rest/arunox/templates/_general.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Hooks.register( 'applyConfigAfter', function( element, config ) {
    if( config.color )          this.instance.apply( 'colorize', typeof config.color === 'object' ? config.color : { color: config.color }, { prefix: 'theme' } );
    if( config.icon )           this.instance.render( 'icon', { name: config.icon } );
});

ARUNOX.Hooks.register( 'config', function( config, data ) {
    config.arx          ??= {};
    config.events       ??= [];
    config.styles       ??= {};
    config.classes      ??= [];
    config.datasets     ??= {};
    config.attributes   ??= {};

    config.datasets.arx ??= config.arx;

    return config;
}, 2 );



/** Datei: plugins/rest/assets.OLD/js/arunox/templates/table.js **/
/**
 * /arunox/components/table.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Templates.register( 'table', {
    hooks           : {
        config          : function( config, data ) {
            config.classes.push( 'table' );

            return config;
        },
        afterRender     : function( config, data ) {
            this.instance.parent.render( 'div', {
                classes     : 'table__container',
            }).root.append( this.instance.root );
        },
        search          : function( searchValue ) {
            // console.log( 'SEARCH', searchValue );
            const elements  = this.instance.elements;
            const toolbar   = elements.toolbar.elements;
            const tableRows = elements.tbody.element.querySelectorAll('tr');

            searchValue = searchValue.toLowerCase();

            let visibleRows = [];

            tableRows.forEach(row => {
                const searchData    = row.dataset?.arxSearch || '';
                const isVisible     = searchData.includes( searchValue );

                row.style.display = isVisible ? null : 'none';

                if( isVisible ) {
                    visibleRows.push( row );
                }
            });

            toolbar.resetBtn.element.style.display = visibleRows.length == tableRows.length ? 'none' : null;

            visibleRows.forEach( row => elements.tbody.append( row ) );
        },
        reset           : function( config ) {
            // console.log( 'RESET' );
            const elements  = this.instance.elements;
            const toolbar   = elements.toolbar.elements
            const tbody     = elements.tbody;
            const tableRows = elements.tbody.element.querySelectorAll('tr');

            tableRows.forEach(row => {
                row.style.display = null;
            });

            const query  = window.location.hash.match( /\?(.*)/ );
            const hash   = window.location.hash.substring(1).replace( /\?.*/, '' );
            const filter = new URLSearchParams( query ? query[1] : '' );

            if( config?.query ) {
                for( const [ index, value ] of config.query.entries() ) {
                    if( filter.has( index ) && filter.get( index ) == value ) {
                        filter.delete( index );
                    }
                }
            }

            if( filter?.size )          history.pushState(null, null, `#${hash}?${filter.toString()}`);
            else                        history.pushState(null, null, `#${hash}`);

            if( config?.button )        delete config.button.dataset.tabFilter;

            if( toolbar.resetBtn )      toolbar.resetBtn.element.style.display = 'none';
            if( toolbar.searchInput )   toolbar.searchInput.element.value = '';
        },
        sort            : function( column, order ) {
            // console.log( 'SORT', column, order );
            const elements  = this.instance.elements;
            const config    = elements.table.storage.config;
            const tabelCell = elements.thead.element.querySelector( `[data-arx-column="${column}"]` );
            const tableRows = Array.from( elements.tbody.element.querySelectorAll( 'tr' ) );

            if( !tabelCell || !tableRows ) return;

            if( !order )    order = tabelCell.dataset.arxOrder === 'asc' ? 'desc' : 'asc';

            const columns   = config.columns || [];
            const rules     = config.order.rules || {};

            if( rules[ column ]?.replace ) {
                for( const [ oldCol, newCol ] of Object.entries( rules[ column ].replace ) ) {
                    elements.table.querySelectorAll(`td[data-arx-column="${oldCol}"]`).forEach(td => {
                        const rowData = td.closest('tr').rowData;
                        td.innerHTML = rowData[ newCol ] || ''-'';
                        // td.dataset.arxColumn = newCol; // Key anpassen
                    });
                }
            }

            if( rules[ column ]?.show ) {
                for( const showCol of rules[ column ].show ) {
                    elements.table.querySelectorAll(`td[data-arx-column="${showCol}"], th[data-arx-column="${showCol}"]`).forEach(el => {
                        el.style.display = ''; // Wieder anzeigen
                    });
                }
            }

            if( rules[ column ]?.hide ) {
                for( const hideCol of rules[ column ].hide ) {
                    elements.table.querySelectorAll(`td[data-arx-column="${hideCol}"], th[data-arx-column="${hideCol}"]`).forEach(el => {
                        el.style.display = 'none'; // Wieder anzeigen
                    });
                }
            }


            // Entferne vorherige Sortierklassen
            elements.table.element.querySelectorAll('.table__header__cell').forEach(cell => {
                cell.classList.remove('sorting--asc', 'sorting--desc', 'sorting--current');
            });

            // Setze neue Sortierklasse
            if( tabelCell ) {
                tabelCell.dataset.arxOrder = order;
                tabelCell.classList.add( `sorting--${order}`, 'sorting--current' );
            }

            if( elements.container ) {
                elements.container.element.dataset.arxSortingColumn = column;
                elements.container.element.dataset.arxSortingOrder  = order;
            }

            // Reihen sortieren
            tableRows.sort( (rowA, rowB) => {
                let a = rowA.ARX.storage.data[ column ]?.trim() || '';
                let b = rowB.ARX.storage.data[ column ]?.trim() || '';

                // Versuche als Zahl zu interpretieren, falls möglich
                if (!isNaN(a) && !isNaN(b)) {
                    a = parseFloat(a);
                    b = parseFloat(b);
                }

                return order === 'asc' ? String(a).localeCompare(String(b)) : String(b).localeCompare(String(a));
            });

            // Sortierte Reihen neu einfügen
            elements.tbody.innerHTML = '';
            tableRows.forEach( row => elements.tbody.append( row ) );
        },
    },

    builder             : function( config, data ) {
        const thead         = this.render( 'thead', {
            columns             : config.columns,
        });

        const tbody         = this.render( 'tbody', {
            columns             : config.columns,
            apply               : [ 'generate', data, true ],
        }, data );

        if( config.api ) {
            if( !config.api.resolved ) {
                config.api      = ARUNOX.Router.parseRoute( config.api, data );
            }

            ARUNOX.Router.fetch( config.api ).then( data => tbody.apply( 'generate', data, false ) );
        }
    },

    create( config, data ) {
        elements.container  = this.render( 'div', {
            classes     : 'table__container',
            elements    : elements,
        });
        elements.toolbar    = this.addToolbar( config );

        elements.container.wrap( this );

        this.element.classList.add( 'table' );

        if( config.columns ) {
            config.columns  = config.columns.filter( item => Object.keys(item).length > 0 );
        }

        if( !config.columns ) return;

        if( config.api ) {
            if( !config.api.resolved ) {
                config.api      = ARUNOX.Router.parseRoute( config.api, data );
            }

            ARUNOX.Router.fetch( config.api ).then( this.generateRows.bind( this ) );
        }

        this.generateRows( data, true );

        // Nach dem Generieren der Rows
        if( config.order && config.order.column ) {
            const headerCell    = this.element.querySelector(`.table__header__cell[data-arx-column="${config.order.column}"]`);
            const container     = this.element.closest( '.table__container' );

            // sortTable( config.order.column, config.order.order, headerCell, this );  // Automatischer Sortieraufruf
        }

        elements.container.element.dispatchEvent( new Event('loaded', { bubbles: true }) );
    },

    addToolbar( config ) {
        const table     = this.elements.table;
        const container = this.elements.container;
        const wrapper   = container.render( 'div', {
            classes     : 'table__toolbar',
        });

        if( config.search || config.filter ) {
            wrapper.elements.searchContainer   = wrapper.render( 'div', {
                classes     : 'table__search',
            });
            wrapper.elements.resetBtn          = wrapper.elements.searchContainer.render( 'button', {
                color       : 'danger',
                type        : 'button',
                block       : 'table__search',
                title       : 'Filter zurücksetzen',
                icon        : 'bi bi-funnel',
                style       : { display : 'none' },
                onClick     : () => table.apply( 'reset', config.filter ),
            });

            if( config.search ) {
                wrapper.elements.searchInput   = wrapper.elements.searchContainer.render( 'input', {
                    type        : 'text',
                    classes     : 'table__search__input',
                    placeholder : 'Suchen...',
                    onInput     : () => table.apply( 'search', wrapper.elements.searchInput.element.value ),
                });
            }

            // if( config.order.buttons ) {
            //     for( const btnConfig of config.order.buttons ) {
            //         const button = this.elements.searchContainer.render( btnConfig.generator, btnConfig.config );
            //
            //         button.addEventListener( 'click', () => {
            //             console.log( this.element );
            //             const table = tableContainer.querySelector('table');
            //             button.dataset.order = btnConfig.config.order.order == 'asc' ? 'desc' : 'asc';
            //             sortTable( btnConfig.config.order.column, null, button, table );
            //         });
            //     }
            // }

            if( config.filter ) {
                wrapper.addEventListener( 'loaded', () => table.apply( 'filter', config.filter ) );
            }
        }

        if( config.buttons ) {
            wrapper.elements.buttonContainer = wrapper.render( 'components/buttons', {
                buttons     : config.buttons,
                classes     : 'table__buttons',
            });
        }

        return wrapper;
    },

    async generateRows1( data, loading = false ) {
        const elements      = this.elements;
        const config        = this.storage.config

        elements.tbody.element.innerHTML = '';

        if( !loading && data && data.length ) {
            for( const rowData of data ) {
                elements.tbody.render('table.tbody.tr', {
                    columns         : config.columns,
                    elements        : this.elements,
                }, rowData );
            }

            return;
        }

        elements.tbody.render( 'table.tbody.tr', {
            elements        : this.elements,
            columns         : [
                {
                    key             : 'hint',
                    colSpan         : config.columns.length,
                    textNode        : loading ? 'Daten werden geladen ...' : 'Keine Datensätze gefunden',
                }
            ],
        });
    }
});

ARUNOX.Templates.register( 'thead', {
    hooks           : {
        config          : function( config, data ) {
            config.classes.push( 'table__header' );

            return config;
        },
    },
    builder         : function( config, data ) {
        const headerRow     = this.render( 'tr', {
            classes             : [ 'table__header__row' ],
            columns             : config.columns,
        });
    }
});

ARUNOX.Templates.register( 'tbody', {
    hooks           : {
        config          : function( config, data ) {
            config.classes.push( 'table__body' );

            return config;
        },
        generate        : async function( data, loading ) {
            this.instance.root.innerHTML = '';

            if( data && data.length ) {
                for( const rowData of data ) {
                    this.instance.render( 'tr', {
                        classes         : [ 'table__body__row' ],
                        columns         : this.instance.config.columns,
                    }, rowData );
                }

                return;
            }

            this.instance.render( 'tr', {
                classes         : [ 'table__body__row' ],
                columns         : [
                    {
                        key             : 'hint',
                        attributes      : {
                            colSpan         : this.instance.config.columns.length,
                        },
                        innerText       : loading ? 'Daten werden geladen ...' : 'Keine Datensätze gefunden',
                    }
                ],
            });
        },
    },
});

ARUNOX.Templates.register( 'tr', {
    hooks           : {
        config          : function( config, data ) {
            config.classes.push( 'table_row' );

            return config;
        },
    },
    builder         : function( config, data ) {
        const cellTag   = this.parent.template == 'thead' ? 'th' : 'td';

        for( const column of config.columns ) {
            this.render( cellTag, column, data );
        }
    },
});

ARUNOX.Templates.register( 'th', {
    htmlTag         : 'th',
    hooks           : {
        config          : function( config, data ) {
            config.type         ??= 'text';
            config.innerText    ??= config?.label || null;
            config.arx.column   ??= config?.key || null;

            config.classes.push( 'table__header__cell' );
            config.classes.push( `table__header__cell--type-${config.type}` );

            config.classes.push( 'table__cell' );
            config.classes.push( `table__cell--type-${config.type}` );

            if( config.sortable ) {
                config.classes.push( 'sortable' );
                config.arx.column   = config.key;
                config.arx.order    = config.order?.order || 'asc';

                config.events.click = () => this.instance.apply( 'sort', null );
            }

            if( !config.visible ) {
                config.styles.display = 'none';
            }

            return config;
        },

        sort( order ) {
            const elements  = this.instance.elements;
            const column    = this.instance.element.dataset?.arxColumn || null;

            elements.table.apply( 'sort', column, order );
        },
    },

    builder         : function( config, data ) {}
});

ARUNOX.Templates.register( 'td', {
    hooks           : {
        config          : function( config, data ) {
            config.type         ??= 'text';
            config.arx.column   ??= config?.key || null;

            config.classes.push( 'table__cell' );
            config.classes.push( `table__cell--type-${config.type}` );

            if( !config.visible ) {
                config.styles.display = 'none';
            }

            return config;
        },
        data            : function( data, config ) {
            if( data === undefined ) return data;

            let value = '-';

            if( data[ config.key ] !== undefined ) {
                value = data[ config.key ];
            }
            else if( config.key.indexOf('.') > -1 ) {
                let current = data;

                for( const key of config.key.split('.') ) {
                    current = current[ key ];
                }

                if( current !== undefined ) {
                    value = current;
                }
            }

            return value;
        },
        beforeRender    : function( config, data ) {
            this.instance.config.innerText    ??= data || '-';
        },
        afterRender     : function( config, data ) {
            if( data !== null && data !== undefined ) {
                this.instance.parent.dataset({ [`filter-${config.key}`] : data.toString().toLowerCase() });
            }

            // if( config.searchable ) config.searchContent.push( this.element.textContent.trim() );

            this.instance.apply( `type.${config.type}` );
        },
    },
});

// ARUNOX.Registry.htmlTag.register( 'table.tbody.tr', class extends ARUNOX.Theme.Component {
//     static htmlTag      = 'tr';
//     static hooks        = {
//         config( config, type, name, data, storage ) {
//             config.classes.push( 'table_row' );
//             config.classes.push( 'table__body__row' );
//
//             return config;
//         },
//
//         update( newData, status ) {
//             const updatedRow    = this.instance.replace('table.tbody.tr', {
//                 columns         : this.instance.storage.config.columns,
//                 elements        : this.instance.elements,
//                 classes         : status ? 'table__body__row--updated' : 'table__body__row--failed',
//             }, newData );
//
//             setTimeout(() => updatedRow.element.classList.remove( 'table__body__row--updated', 'table__body__row--failed' ), 200 );
//         }
//     };
//
//     create( config, data = {} ) {
//         const searchContent = [];
//         const elements      = this.elements;
//         const storage       = elements.table.storage.config
//
//         for( const column of config.columns ) {
//             this.render( 'table.td', Object.assign( {}, column, {
//                 elements        : this.elements,
//                 searchContent   : searchContent,
//             }), data );
//         }
//
//         if( storage.action && !this.element.classList.contains( 'js--click-bound' ) ) {
//             this.element.classList.add( 'cursor--pointer' );
//
//             //     if( this && this.RESTconfig.api.route && config.action.route ) {
//             //         let rowSearchParams  = this.RESTconfig.api.route.match( /\?(.*)/);
//             //         let cellSearchParams = config.action.route.match( /\?(.*)/);
//             //
//             //         if( rowSearchParams )   rowSearchParams  = new URLSearchParams( rowSearchParams[1] );
//             //         if( cellSearchParams )  cellSearchParams = new URLSearchParams( cellSearchParams[1] );
//             //
//             //
//             //         if( rowSearchParams ) {
//             //             if( rowSearchParams.has('columns') && ( !cellSearchParams || !cellSearchParams.has('columns') ) ) {
//             //                 if( cellSearchParams )  rowSearchParams = '&columns=' + rowSearchParams.get('columns');
//             //                 else                    rowSearchParams = '?columns=' + rowSearchParams.get('columns');
//             //
//             //                 config.action.route += rowSearchParams;
//             //
//             //             }
//             //         }
//             //     }
//             //
//
//             this.element.addEventListener( 'click', async ( event ) => {
//                 if( ['a'].includes( event.target.tagName.toLowerCase() )
//                     || event.target.classList.contains('js--click-unbound')
//                     || event.target.classList.contains('js--click-ownbound')
//                 ) return false;
//
//                 await ARUNOX.Router.handle( storage.action, {}, data, 'rest' );
//             });
//
//             this.element.classList.add( 'js--click-bound' );
//         }
//
//         this.setData( { 'search' : searchContent.join( ' ' ).toLowerCase() });
//     }
// });


// ARUNOX.Hooks.register( 'htmltag.table.td->type.OLD.email', function() {
//     const data      = this.instance.storage.data;
//     const config    = this.instance.storage.config;
//     const element   = this.instance.origin || this.instance.element;
//
//     if( !data ) {
//         element.textContent = '-';
//         return;
//     }
//
//     this.instance.element.classList.add( 'js--click-ownbound' );
//     this.instance.element.addEventListener( 'click', event => {
//         event.preventDefault();
//         window.location.href = `mailto:${data}`;
//     });
// });

ARUNOX.Hooks.register( 'td->type.icon', function() {
    const data      = this.instance.data;
    const config    = this.instance.config;
    const option    = config.options[ data ] || {};

    this.instance.root.textContent = null;

    const icon      = this.instance.render( 'icon', {
        name        : option?.icon || 'bi bi-question-diamond',
        color       : {
            target      : 'text',
            prefix      : null,
            color       : option?.color || 'default',
        },
        title       : option?.label || `${config.title} nicht definiert`,
    });
});

ARUNOX.Hooks.register( 'td->type.status', function() {
    this.instance.apply( 'type.icon' );

    const table     = this.instance.closest( 'table' );
    const config    = this.instance.config;
    const data      = this.instance.parent.data;

    const action    = Object.assign( {}, {
        query       : table.config.api?.query || {},
    }, config.action );

    this.instance.root.classList.add( 'js--click-ownbound' );
    this.instance.root.addEventListener( 'click', async event => {
        event.preventDefault();
        event.stopPropagation();

        await ARUNOX.Router.handle( action, {}, data, 'rest' );
    });
});

/** Datei: plugins/rest/assets.OLD/js/arunox/templates/dynamic.js **/
/**
 * rest/arunox/templates/dynamic.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Templates.register( 'dynamic', {});


ARUNOX.Registry.wrapper.register( 'dynamic.OLD', class extends ARUNOX.Theme.Component {
	create( route, response ) {
		const config	= response.config ?? {};
		const data		= response.list ?? response.data ?? {};
		const tooltip 	= document.querySelector('.has-tooltip--active');

		if( tooltip ) 		tooltip.dispatchEvent( new Event('mouseleave') );

		Array.from( this.parent.elements.content?.childNodes || [] ).filter( n => n != this.element ).forEach( e => e.remove() );

		// this.parent.elements.content.innerHTML = '';

		this.element.classList.add( 'main__inner', 'template__inner', 'template--dynamic' );

		// if( route.history ) {
			// generator.generate( 'components/breadcrumbs', { path: route } );
		// }

		if( config.title ) {
			const title = this.render( 'components/headline', {
				classes     : [ 'headline', 'template__headline' ],
			}, config.title );

			if( config.backlink ) {
				title.render( 'components/link', {
					path	: config.backlink.route,
					icon	: 'bi bi-arrow-left',
				});
			}

			this.append( title );
		}

		// for( const contentElement of config.content ) {
		// 	if( contentElement.generator ) {
		// 		contentElement.element = this.render( contentElement.generator, contentElement.config, data );
		// 	}
		// }
	}
});

/** Datei: plugins/rest/assets.OLD/js/arunox/templates/icon.js **/
/**
 * rest/arunox/templates/icon.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Templates.register( 'icon', {
	htmlTag         : 'i',
	builder         : function( config, data ) {
		const className	= 'icon';
		const block 	= config.block ? `${className} ${config.block}__${className}` : className;

		this.root.classList.add( ...config.name.split(' ') );
		this.root.classList.add( ...block.split(' ') );

		this.parent.root?.classList.add( 'has--icon' );
	},
});

/** Datei: plugins/rest/assets.OLD/js/arunox/templates/form.js **/
/**
 * /components/form.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Templates.register( 'form', {
    htmlTag         : 'form',
    hooks           : {
        config          : function( config ) {
            config.attributes.id        = crypto.randomUUID();
            config.datasets.arx.node    = this.instance.htmlTag;
            config.classes.push( 'form__container' );

            return config;
        },
        content         : function( content, config, data ) {
            if( config.buttons ) {
                content.push( ARUNOX.Templates.config( 'buttons', {
                    classes     : [ 'form__buttons' ],
                    content     : config.buttons.map( button => {
                        button.config.attributes    ??= {};
                        button.config.attributes.form = this.instance.config.attributes.id;

                        return button;
                    }),
                }, data ) );
            }

            return content;
        },
        afterRender     : function( config, data ) {
            if( !config.action ) return;

            let lastSearchParams = ARUNOX.Router.history?.match( /\?(.*)/) | {};
            let formSearchParams = config.action.route.match( /\?(.*)/);

            if( lastSearchParams ) lastSearchParams = new URLSearchParams( lastSearchParams[1] );
            if( formSearchParams ) formSearchParams = new URLSearchParams( formSearchParams[1] );

            if( lastSearchParams ) {
                if( lastSearchParams.has('columns') && ( !formSearchParams || !formSearchParams.has('columns') ) ) {
                    if( formSearchParams )  lastSearchParams = '&columns=' + lastSearchParams.get('columns');
                    else                    lastSearchParams = '?columns=' + lastSearchParams.get('columns');

                    config.action.route += lastSearchParams;
                }
            }

            this.instance.noValidate    = true;
            this.instance.actionConfig  = ARUNOX.Router.parseRoute( config.action, data, {}, 'rest' );
        }
    },
});

ARUNOX.Templates.register( 'control', {
    htmlTag         : 'div',
    hooks           : {
        config          : function( config ) {
            console.log( config.type );
            config.input                = Object.assignRecursive( {}, config || {} );
            config.template             = `input/${config.type}`;
            config.datasets.arx.node    = 'control';
            config.datasets.arx.control = config.type;

            if( !ARUNOX.Templates.exists( config.template ) ) {
                if( config.type == 'select' )           config.template = 'select'
                else if( config.type == 'textarea' )    config.template = 'textarea'
                else if( config.type == 'datalist' )    config.template = 'datalist'
                else                                    config.template = 'input';
            }

            config.classes.push( 'form__group', `form__control--${config.type}` );

            return config;
        },
    },
    builder         : function( config, data ) {
        if( config.label ) {
            const label = this.render( 'label', {
                classes     : [ 'form__label' ],
                content     : config.label,
                attributes  : {
                    for         : `control_${config.key}`,
                },
            });
        }

        const element = this.render( config.template, Object.assignRecursive( {
            classes     : [ 'form__control' ],
            datasets    : {
                arx         : {
                    node        : 'input',
                },
            },
        }, config.input || {} ), data );
    },
});

ARUNOX.Hooks.register( 'input->beforeRender', function( config, data ) {
    config.attributes   = {
        name            : config.key,
        type            : config.type,
        required        : !!config.required,
    };
});
ARUNOX.Hooks.register( 'select->beforeRender', function( config, data ) {
    config.content      = [];
    config.attributes   = {
        name            : config.key,
        required        : !!config.required,
        multiple        : !!config.multiple,
    };

    // console.log( config, data );

    if( config.choose ) {
        config.content.push( ARUNOX.Templates.config( 'option', {
            content     : config.choose,
            attributes  : {
                selected    : true,
            },
        } ) );
    }

    for( const option of config.options ) {
        config.content.push( ARUNOX.Templates.config( 'option', {
            content     : option.label,
            attributes  : {
                value       : option.value,
                selected    : data?.[ config.key ] == option.value,
            },
        } ) );
    }
});
ARUNOX.Hooks.register( 'textarea->beforeRender', function( config, data ) {
    config.attributes   = {
        name            : config.key,
        required        : !!config.required,
    };
});

if( !window.formSubmitListener ) {
    document.addEventListener('submit', async event => {
        if( !event.target.matches('form') ) return;

        event.preventDefault();

        const form      = event.target;
        const inputs    = form.querySelectorAll('input, select, textarea');
        const promises  = [];

        console.log( inputs );

        inputs.forEach(input => {
            if( typeof input.ARX.validate === 'function' ) {
                promises.push(new Promise((resolve) => {
                    input.addEventListener('validationComplete', () => {
                        resolve( !!input.closest('.is-valid') );
                    }, { once: true });

                    input.dispatchEvent( new Event('validate', { bubbles: true } ) );
                }));
            }
        });

        const results   = await Promise.all( promises );
        const isValid   = results.every( result => result );

        if( isValid ) {
            ARUNOX.Router.handle( form.ARX.actionConfig, new FormData( form ), {}, 'rest' );
        }

    });

    window.formSubmitListener = true;
}

/** Datei: plugins/rest/assets.OLD/js/arunox/templates/notifications.js **/
/**
 * rest/arunox/templates/notifications.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Templates.register( 'notifications', {
	htmlTag         : 'div',
	hooks           : {
		shouldRender    : function( shouldRender, config, data ) {
			return !document.querySelector('.notification__wrapper');
		},
		shouldRebuild   : function( shouldRebuild, config, data ) {
			return document.querySelector('.notification__wrapper');
		},
		config          : function( config, data ) {
			config.classes.push( 'notification__wrapper', 'notification--show-on-hover', 'notification--stacked' );
			return config
		},
	},
	addNotification : function( config, data ) {
		this.render( 'notification', config, data );
	}
});


ARUNOX.Templates.register( 'notification', {
	htmlTag         : 'div',
	hooks           : {
		config          : function( config, data ) {
			return {
				type            : config.type,
				color           : config.color || config.type,
				duration        : config.duration,
				message         : config.message || config.title,
				classes         : [ 'notification' ],
				content         : [
					config.icon ? ARUNOX.Templates.config( 'icon', { name: config.icon, block: 'notification' }) : null,
					ARUNOX.Templates.config( 'div', {
						classes         : [ 'notification__inner' ],
						content         : [
							config.title ? ARUNOX.Templates.config( 'div', {
								innerText       : config.title,
								classes         : 'notification__title',
							}) : null,
							config.message ? ARUNOX.Templates.config( 'div', {
								innerText       : config.message,
								classes         : 'notification__message',
							}) : null,
						],
					}),
					ARUNOX.Templates.config( 'button', {
						classes         : [ 'notification__close' ],
						innerHTML       : '×',
						onClick         : () => this.apply( 'close' ),
					}),
				],
			};
		},
		close           : function() {
			this.instance.root.classList.add( 'is-closing' );
			setTimeout(() => this.instance.root.remove(), 300 );
		},
		afterRender     : function( config, data ) {
			if( config.duration === 0 ) return;

			setTimeout(() => this.instance.apply( 'close' ), config.duration || 5000 );
		}
	},
});