wp.blocks.registerBlockType('termin-kalender/simplelist', {
    apiVersion: 3,
    title: 'Termin-Kalender Simple List',
    description: wp.i18n.__('Shows upcoming calendar entries. Much more options in Termin-Kalender PRO.', 'termin-kalender'),
    icon: {
        src: 'list-view',
        foreground: '#FF3C00'
    },
    category: 'widgets',
    attributes: {
        show_time: {
            type: 'string',
            default: 'start_end'
        },
    },
    supports: {
        inserter: true,
        __experimentalLayout: true
    },
    example: {
        attributes: {
            // You can specify attributes here if needed
        },
        innerBlocks: [
            {
                name: 'core/image',
                attributes: {
                    url: terminKalenderData.TER_KAL_PLUGIN_URL + 'assets/termin-kalender-simple-list.png',
                    alt: wp.i18n.__('Preview image for Termin-Kalender Simple List', 'termin-kalender')
                }
            }
        ]
    },
edit: function(props) {
    const {
        attributes: { show_time },
        setAttributes
    } = props;

    const { InspectorControls, useBlockProps } = wp.blockEditor; // ter_kal_CHANGE: add useBlockProps for apiVersion 3 selection/toolbar
    const { PanelBody, SelectControl, CheckboxControl } = wp.components;


    // ter_kal_CHANGE: Provide proper block wrapper props to restore toolbar/selection in apiVersion 3
    const ter_kal_blockProps = useBlockProps({
        style: { border: '5px solid #ddd', borderRadius: '1rem', padding: '1rem' }
    });

    return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
            InspectorControls,
            null,
            wp.element.createElement(
                PanelBody,
                {
                    title: wp.i18n.__('List Settings', 'termin-kalender'),
                    initialOpen: true
                },
        wp.element.createElement(SelectControl, {
            key: 'time-display-select',
            __next40pxDefaultSize: true,
            __nextHasNoMarginBottom: true,
            label: wp.i18n.__('Time display', 'termin-kalender'),
            value: show_time,
            options: [
                { label: wp.i18n.__('Start & End', 'termin-kalender'), value: 'start_end' },
                { label: wp.i18n.__('Start only', 'termin-kalender'), value: 'start' },
                { label: wp.i18n.__('Hide', 'termin-kalender'), value: 'hide' }
            ],
            onChange: value => setAttributes({ show_time: value })
                })
            )
        ),
        wp.element.createElement(
            'div',
            ter_kal_blockProps, // ter_kal_CHANGE: use blockProps on root wrapper
            wp.element.createElement('span', { className: 'block-icon', style: { color: '#FF3C00' } },
                wp.element.createElement('i', { className: 'dashicons dashicons-list-view' })
            ),
            wp.element.createElement('p', null, wp.i18n.__('Termin-Kalender Simple List', 'termin-kalender')),
            wp.element.createElement('p', null, wp.i18n.__('Shows upcoming calendar entries. Much more options in Termin-Kalender PRO.', 'termin-kalender')),
            wp.element.createElement('hr', null),
        wp.element.createElement('img', {
            src: terminKalenderData.TER_KAL_PLUGIN_URL + 'assets/termin-kalender-simple-list.png',
            alt: wp.i18n.__('Preview image for Termin-Kalender Simple List', 'termin-kalender'),
            style: { maxWidth: '100%', height: 'auto' }
        })
        )
    );
},

    save: function() {
        return null; // Server-side rendering
    }
});
