<div class="license-block">
	<div class="alert {{ license_container }} accordion accordion-license-block" id="accordion-license-block"> 
		<div class="media">
			<div class="mr-3 d-none d-md-block">
				<ion-icon class="icon-lg align-bottom" name="shield-outline"></ion-icon>
			</div>
			<div class="media-body">
                <div class="d-flex align-items-center">
                    <h5 class="my-1 mr-4" id="license-heading"><ion-icon class="align-text-bottom d-inline-block d-md-none" name="shield-outline"></ion-icon> {{ lmsg('people.admin.license') }}</h5>
                    {% if license_info == true %}
                    <div class="d-flex flex-column flex-md-row flex-wrap">
                        <div><strong class="mr-1">{{ lmsg('people.admin.license.license_limit') }}</strong> <cla-badge styleclass="badge badge-pill badge-light" class="mr-3">{{ max_users }}</cla-badge></div>
                        <div><strong class="mr-1">{{ lmsg('people.admin.license.active_users') }}</strong> <cla-badge styleclass="badge badge-pill badge-light" class="mr-3">{{ current_users }}</cla-badge></div>
                        <div><strong class="mr-1">{{ lmsg('people.admin.license.remaining_users') }}</strong> <cla-badge styleclass="badge badge-pill badge-{{ license_users_left_badge_color }}">{{ users_left }}</cla-badge></div>
                    </div>
                    {% endif %}
                    <button class="btn btn-secondary js-license-block-more-toggle license-block-more-toggle ml-auto mr-0" data-toggle="collapse" data-target="#license-block-info" aria-expanded="false" aria-controls="license-block-info">
                        <ion-icon class="license-toggle-icon  align-text-bottom" name="chevron-down-circle"></ion-icon>
                    </button>
                </div>
                <div class="justify-content-end license-block-info collapse" id="license-block-info" aria-labelledby="license-heading" data-parent="#accordion-license-block">
                    {% if license_invalid == false %}
                    <hr class="license-block-hr my-2">
                    {% endif %}
                    
                    {% if license_info == true %}
					<div>
                        {% if extranet_user_block == true %}
						<div class="d-flex flex-column flex-md-row flex-wrap">
							<div class="mb-2"><strong class="mr-1">{{ lmsg('people.admin.license.extranet_user_limit') }}</strong> <cla-badge styleclass="badge badge-pill badge-light" class="mr-3">{{ max_extranet_users }}</cla-badge></div>
							<div class="mb-2"><strong class="mr-1">{{ lmsg('people.admin.license.active_extranet_users') }}</strong> <cla-badge styleclass="badge badge-pill badge-light" class="mr-3">{{ current_extranet_users }}</cla-badge></div>
							<div class="mb-2"><strong class="mr-1">{{ lmsg('people.admin.license.remaining_extranet_users') }}</strong> <cla-badge styleclass="badge badge-pill badge-{{ license_users_left_badge_color }}">{{ extranet_users_left }}</cla-badge></div>
						</div>
                        {% endif %}
                        
                        <div class="d-flex align-items-md-center flex-column flex-md-row mb-1">
                            {% if more_users_available == true %}
                                <div class="mb-2 mb-md-0">
                                    {{ lmsg('people.admin.license.message.users_available') }}
                                </div>
                            {% elseif user_limit_reached == true %}
                                <div class="mb-2 mb-md-0">
                                    {{ lmsg('people.admin.license.message.no_more_users') }}
                                </div>
                            {% endif %}

                            <div class="ml-md-auto mr-0 flex-shrink-0">
                                <a href="{{ get_license_link }}" target="_blank" class="btn btn-light mr-2">{{ lmsg('people.admin.license.request_licenses') }} <ion-icon name="open-outline"></ion-icon></a>
                                <a href="/admin/system/license">{{ lmsg('people.admin.license.more_details') }}</a>
                            </div>
                        </div>

					</div>
                    {% endif %}
                    
                    {% if license_invalid == true %}
					<div>
						<hr class="license-block-hr my-2">
						<div class="d-flex align-items-md-center flex-column flex-md-row mb-1">
                            <p class="mb-0">{{ lmsg('people.admin.license.message.invalid_license') }}</p>
                            <div class="ml-md-auto mr-0 flex-shrink-0">
                                <a href="{{ open_support_ticket_link }}" target="_blank" class="btn btn-light mr-2">{{ lmsg('people.admin.license.open_support_ticket') }} <ion-icon name="open-outline"></ion-icon></a>
                                <a href="/admin/system/license">{{ lmsg('people.admin.license.more_details') }}</a>
                            </div>
						</p>
					</div>
                    {%  endif %}
				</div>
			</div>
		</div>
	</div>
</div>

<script>
    require(['domReady', 'jquery'],function(domReady, jQuery){
        domReady(function() {
            // Define a key for local storage
            const accordionStateKey = 'licenseInfoAccordionState';

            // Select the accordion collapse element
            const $collapseElement = $('#license-block-info');

            // Apply the saved state or default to open if unset
            const savedState = localStorage.getItem(accordionStateKey);
            if (savedState === 'open') {
                $collapseElement.collapse('show'); // Show the collapse
            } else if (savedState === 'closed') {
                $collapseElement.collapse('hide'); // Hide the collapse
            } else {
                $collapseElement.collapse('show'); // Default to open
            }

            // Add event listeners for Bootstrap's custom events
            $collapseElement.on('shown.bs.collapse', function () {
                console.log('Accordion is now open'); // Debug message
                localStorage.setItem(accordionStateKey, 'open'); // Save state
            });

            $collapseElement.on('hidden.bs.collapse', function () {
                console.log('Accordion is now closed'); // Debug message
                localStorage.setItem(accordionStateKey, 'closed'); // Save state
            });
        }); 
    });
</script>
