<div class="calendar-entry-widget" id="calendar-entry-widget-{{ widget.name }}">
    <input id="{{ widget.attrs.id }}" name="{{ widget.name }}" type="hidden"
           value="{{ widget.value|default_if_none:'' }}"
           data-initial="{{ widget.attrs.data_initial|default_if_none:'' }}">
    <div id="calendar-entry-form-{{ widget.name }}">
        <h3>Rules</h3>
        <div id="rules-container">
            <!-- Rules will be dynamically added here by JavaScript -->
        </div>
        <button id="add-rule" type="button">Add Rule</button>
    </div>
    <div class="calendar-entry-text" id="calendar-entry-text-{{ widget.name }}"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (typeof initCalendarEntryWidget === 'function') {
            try {
                initCalendarEntryWidget('{{ widget.name }}');
            } catch (error) {
                console.error('Error initializing CalendarEntryWidget:', error);
            }
        } else {
            console.error('initCalendarEntryWidget function is not defined');
        }
    });
</script>
