StyleGuide - Documentation Macros BO

<#--
Macro: aButton
Description: Generates an HTML button or link with various customization options, including color, size, alignment, icon, and title.
Parameters:
@param - name - string - optional - of the button element.
@param - id - string - optional - of the button element.
@param - href - string - optional - which the button will link.
@param - target - string - optional - the link, such as "_blank".
@param - size - string - optional - the button, such as "sm" or "lg".
@param - color - string - optional - the button, such as "primary" or "warning".
@param - style - string - optional - the button, such as "btn" or "card-control".
@param - align - string - optional - the button, such as "left" or "right".
@param - class - string - optional - to apply to the button.
@param - params - string - optional - to apply to the button element.
@param - title - string - optional - the button.
@param - tabIndex - string - optional - of the button.
@param - hideTitle - list - optional - screen reader text to hide the title of the button.
@param - buttonIcon - string - optional - display inside the button.
@param - disabled - boolean - optional - the button is disabled.
@param - iconPosition - string - optional - the icon inside the button, such as "left" or "right".
@param - dropdownMenu - boolean - optional - to include a dropdown menu inside the button.
-->
<#macro aButton name='' id='' href='' target='' size='' color='primary' style='btn' align='' class='' title='' tabIndex='' hideTitle=[] buttonIcon='' disabled=false iconPosition='left' dropdownMenu=false  params='' deprecated...>
<@deprecatedWarning args=deprecated />
<#local params = params />
<#-- Visibility of button title -->
<#local displayTitleClass = displaySettings( hideTitle, 'block' ) />
<#if color = 'default' || color='btn-default' || color='btn-secondary' || color='secondary'>
	<#local buttonColor = 'btn-default' />
<#elseif color=''>
	<#local buttonColor = 'btn-primary' />
<#else>
	<#if color == 'primary' || color == 'secondary' || color == 'success' || color == 'info' || color == 'warning' || color == 'danger'>
		<#local buttonColor = 'btn-' + color />
	<#else>
		<#local buttonColor = 'bg-' + color />
	</#if>
</#if>
<#if style='card-control'>
	<#assign style='text-right btn-link' />
</#if>
<#local class += alignmentSettings(align,'') />
<#-- Size class -->
<#local buttonSize = '' />
	<#if size?starts_with('style') == true >
		<#local params = params + ' ' + size />
	<#else>
		<#local buttonSize = size />
	</#if>	
<#if dropdownMenu>
<div class="btn-group">
</#if>
<a class="${style}<#if buttonSize!=''> btn-${buttonSize}</#if><#if color!=''> ${buttonColor}</#if><#if class!=''> ${class}</#if>"<#if name!=''> name="${name}"</#if><#if id!=''> id="${id}"</#if> href="${href}" title="${title}"<#if target!=''> target="${target}"</#if><#if params!=''> ${params}</#if><#if disabled> disabled</#if><#if dropdownMenu> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"</#if>>
	<#if buttonIcon!='' && iconPosition='left'>
		<#local buttonIcon = buttonIcon + ' me-1' />
		<@icon style=buttonIcon />
	</#if>
	<span class="${displayTitleClass}">${title}</span>
	<#if buttonIcon!='' && iconPosition='right'>
		<#local buttonIcon = buttonIcon + ' ms-1' />
		<@icon style=buttonIcon />
	</#if>
	<#if !dropdownMenu>
	<#nested>
	</#if>
</a>
<#if dropdownMenu>
<div class="dropdown-menu"<#if id!=''> id="${id}" aria-labelledby="${id}"</#if>>
	<#nested>
</div>
</div>
</#if>
</#macro>

<#-- Macro: accordionBody

Description: Defines a macro for generating an accordion-style UI element with expandable and collapsible content.<!-- sample --><div class="card gray-light-bg-color p-3"><div class="card-body"><div class="accordion" id="accacc1"><div class="card with-subtitle" ><div class="card-header" data-toggle="collapse" data-target="#collapseAccacc1" aria-expanded="true"><button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1"><h3 class="card-title" id="headingAccacc1">Titre de l'accordéon</h3><span class="btn-accordion" ><span class="sr-only">Titre de l'accordéon</span><svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" ><title></title><use xlink:href="#paris-icon-arrow-bottom"></use></svg></span></button><p class="card-subtitle w-100">...et son sous-titre</p></div><div id="collapseAccacc1" class="collapse show" role="region" aria-labelledby="headingAccacc1" data-parent="#accacc1"><div class="card-body">Contenu de l'accordéon</div></div><div class="card-footer d-block d-sm-none text-center"><button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1"><svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false"><use xlink:href="#paris-icon-arrow-bottom"></use></svg></button></div></div></div></div></div><!-- sample -->

Parameters:
@param - id - string - required - the accordion element
@param - childId - string - required - the child element
@param - class - string - optional - of the accordion element
@param - expanded - boolean - optional - should be expanded by default
@param - params - string - optional - to include in the accordion element
-->
<#macro accordionBody id=childId class=childClass expanded=expanded params=''>
<div id="${id}" class="accordion-collapse ${class}" aria-labelledby="${childId}-header" data-bs-parent="#${parentId}" <#if params!=''> ${params}</#if>>
<@boxBody>
	<#nested>
</@boxBody>
</div>
</#macro>

<#--
Macro: accordionContainer

Description: Generates an HTML container element for a set of accordion-style UI elements with expandable and collapsible content.

Parameters:
@param - id - string - optional - the container element. If not provided, a default ID will be generated.
@param - params - string - optional - to include in the container element.
-->
<#macro accordionContainer id='' params=''>
<#if id = '' >
   <#if accordionContainerId?? == false><#assign accordionContainerId = 1 ><#else><#assign accordionContainerId = accordionContainerId + 1 ></#if>
   <#local id = 'accCont_'+ accordionContainerId >
</#if>
<div class="accordion" id="${id}"<#if params!=''> ${params}</#if>>
<#assign parentId = id>
<#nested>
</div>
</#macro>

<#--
Macro: accordionHeader

Description: Generates an HTML header element for an accordion-style UI element with expandable and collapsible content.

Parameters:
@param - id - string - optional - the header element. If not provided, a default ID will be generated.
@param - title - string - required - the header element.
@param - parentId - string - required - the parent element.
@param - childId - string - required - the child element.
@param - boxTools - boolean - optional - box tools for the header element.
@param - params - string - optional - to include in the header element.
@param - headerIcon - string - optional - the icon to include in the header element.
-->
<#macro accordionHeader id='' title='' parentId=parentId childId=childId boxTools=false params='' headerIcon='' >
<div class="accordion-item">
	<h2 class="accordion-header" id="${childId}-header"<#if params!=''> ${params}</#if>>
		<button class="accordion-button<#if aClass!=''> ${aClass}</#if>" type="button" data-bs-toggle="collapse" data-bs-target="#${childId}" aria-expanded="${expanded}" aria-controls="${childId}">
		<#if headerIcon!=''><@icon style=headerIcon /></#if><span class="ms-2">${title}</span>
	</h2>
	<#local nested><#nested></#local>
	<#if nested?has_content><#if boxTools><div class="box-tools"></#if>${nested}<#if boxTools></div></#if></#if>
</div>
<#assign parentId = parentId />
</#macro>

<#--
Macro: accordionPanel

Description: Generates an HTML panel element for an accordion-style UI element with expandable and collapsible content.

Parameters:
@param - color - string - optional - of the panel element.
@param - collapsed - boolean - optional - should be collapsed by default.
@param - childId - string - required - the child element.
@param - id - string - optional - the panel element. If not provided, a default ID will be generated.
@param - params - string - optional - to include in the panel element.
-->
<#macro accordionPanel color='' collapsed=true childId='' id='' params=''>
<div class="card<#if color!=''> bg-${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#if collapsed>
	<#assign aClass = 'collapsed'>
	<#assign expanded = 'false'>
	<#assign childClass = 'collapse'>
<#else>
	<#assign aClass = ''>
	<#assign expanded = 'true'>
	<#assign childClass = 'collapse show'>
</#if>
<#assign childId = childId />
<#nested>
</div>
</#macro>

<#-- Macro: actionButtons

Description: Generates a form group with two action buttons, used for validating or canceling a form.

Parameters:
@param - button1Name - string - optional - of the first button.
@param - button2Name - string - optional - of the second button.
@param - i18nValue1Key - string - optional - of the first button's title.
@param - i18nValue2Key - string - optional - of the second button's title.
@param - url1 - string - optional - redirect to when the first button is clicked.
@param - url2 - string - optional - redirect to when the second button is clicked.
@param - icon1 - string - optional - the icon for the first button.
@param - icon2 - string - optional - the icon for the second button.
@param - offset - int - optional - columns to offset the form group.
-->
<#macro actionButtons button1Name='' button2Name='' i18nValue1Key='portal.admin.message.buttonValidate' i18nValue2Key='portal.admin.message.buttonCancel' url1='' url2='' icon1='save' icon2='times' offset=3 >
<@formGroup rows=2>
	<#if url1 != ''>
		<@aButton href='${url1}' buttonIcon='${icon1}' title='#i18n{${i18nValue1Key}}' size=''/>
	<#else>
		<@button type='submit' name='${button1Name}' buttonIcon='${icon1}' title='#i18n{${i18nValue1Key}}' size='' />
	</#if>
	<#if url2 != ''>
		<@aButton href='${url2}' buttonIcon='${icon2}' title='#i18n{${i18nValue2Key}}' color='secondary' size=''/>
	<#else>
		<#if button2Name != ''>
			<@button type='submit' name='${button2Name}' buttonIcon='${icon2}' title='#i18n{${i18nValue2Key}}' color='secondary' cancel=true size='' />
		</#if>
	</#if>
</@formGroup>
</#macro>

<#-- Macro: addToast
Description: Adds a Bootstrap toast notification to the page.
Parameters:
- title (string): the title of the notification.
- content (string): the content of the notification.
@param - type - string - optional - the notification
-->
<#macro addToast title='' content='' titleImg='' titleInfo='' dismiss=true class='' id='' params='' deprecated...>
<@deprecatedWarning args=deprecated />
<div<#if id !=''> id="${id}"</#if> class="toast<#if class !=''> ${class}</#if>" role="alert" aria-live="assertive" aria-atomic="true"<#if params !=''> ${params}"</#if>>
  <#if title !=''>
    <div class="toast-header">
      <#if titleImg !=''><img src="${titleImg}" class="rounded me-2" alt="..."></#if>
      <strong class="me-auto">${title}</strong>
      <#if titleInfo !=''><small>${titleInfo}</small></#if>
      <#if dismiss><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="#i18n{portal.util.labelClose}"></button></#if>
    </div>
    <div class="toast-body">
      ${content}
    </div>
  <#else>
    <div class="d-flex align-items-center">
      <div class="toast-body me-auto">
        ${content}
      </div>
      <#if dismiss><button type="button" class="btn-close me-2" data-bs-dismiss="toast" aria-label="#i18n{portal.util.labelClose}"></button></#if>
    </div>
  </#if>
</div>
</#macro>

<#--
Macro: adminAccessibilityMode

Description: Generates a form to activate or deactivate accessibility mode for an administrative user.

Parameters:
@param - token - string - required - used to prevent cross-site request forgery (CSRF) attacks.
- user.accessibilityMode (boolean, required): a boolean value indicating whether accessibility mode is currently active.
-->
<#macro adminAccessibilityMode>
<@tform method='post' action='jsp/admin/DoModifyAccessibilityMode.jsp' class='form-inline ms-0 mb-2'>
	<@input type='hidden' name='token' value='${token}' />
	<#local btnIcon='eye-slash me-1' > 
	<#local btnTitle='#i18n{portal.users.admin_header.labelActivateAccessibilityMode}' >
	<#if user.accessibilityMode>
		<#local btnIcon='eye me-1' > 
		<#local btnTitle='#i18n{portal.users.admin_header.labelDeactivateAccessibilityMode}' >
	<#else>
	</#if>
	<@button color='dropdown dropdown-item mb-0 ms-0' type='submit' buttonIcon=btnIcon title=btnTitle />
</@tform>
</#macro>

<#--
Macro: adminContentHeader
Description: Generates a header section for an administrative page, including a page title and optional documentation link.
Parameters:
@param - feature_title - string - required - the feature or section of the application.
@param - feature_url - string - optional - the feature or section of the application.
@param - page_title - string - optional - the current page.
-->
<#macro adminContentHeader>
<section class="content <#if feature_url?? && feature_url?ends_with('AdminSite.jsp')>no-padding</#if> min-vh-100">
<header class='page-header d-print-none'>
    <@div class="row align-items-center px-4">
        <@div class="col">
            <@div class="page-pretitle" id="feature-title">
                <span class="mb-0 fw-bold">
                    <#if feature_url??>
                        <@link href='${feature_url}' title='${feature_title!""}'>${feature_title!''}</@link>
                    <#else>
                        ${feature_title!''}
                    </#if>
                    <#if page_title?has_content>
                        > ${page_title!''}
                    </#if>
                </span>
            </@div>
        </@div>
        <@div id="page-header-buttons" class="col-auto ms-auto d-print-none">
            <@adminHeaderDocumentationLink />
        </@div>
    </@div>
</header>
</#macro>

<#-- Macro: adminDashboardPanel
Description: Generates a collapsible panel for use in the admin dashboard. It generates a Bootstrap panel that includes a header with a title and an icon, and a body that can be expanded or collapsed.
Parameters:
@param - title - string - optional - display in the panel header.
@param - parentId - string - optional - the parent element for the panel.
@param - childId - string - optional - the panel body.
@param - icon - string - optional - display in the panel header.
@param - color - string - optional - the panel header, using a Bootstrap color class (e.g. "primary", "success", "danger").
-->
<#macro adminDashboardPanel title='' navTitle='' parentId='' childId='' icon='' color=''>
<#assign parentId=parentId />
<@tabPanel id='${childId}' params='title="${title}" data-nav="${navTitle}" data-icon="${icon}" data-color="${color}"'>
<@pageHeader title="${title}" />
<#nested>
</@tabPanel>
<script>
document.addEventListener( "DOMContentLoaded", function(){
	const urlHash = document.location.hash, idHash = document.querySelector( urlHash ) ;
	if ( urlHash != undefined) {
		idHash.classList.add('show')
	}
});
</script>
</#macro>

<#-- Macro: adminDashboardWidget
Description: Generates a widget for use in the admin dashboard. It generates a Bootstrap card that includes a header with a title and control buttons, and a body that can display any content.
Parameters:
@param - id - string - required - the widget.
@param - title - string - required - display in the widget header.
@param - color - string - optional - the widget header, using a Bootstrap color class (e.g. "primary", "success", "danger").
@param - url - string - optional - a settings page for the widget.
@param - class - string - optional - apply to the widget element.
@param - bodyClass - string - optional - apply to the widget body element.
@param - params - string - optional - add to the widget element.
-->
<#macro adminDashboardWidget id title color='primary' url='' class='' bodyClass='table-responsive no-padding' params=''>
	<@box style='solid' color='${color}' id='${id}_dashboard_card' class='box-widget' params=' data-id="${id}" draggable="true"'>
		<@boxHeader titleLevel='h2' class='h5' title='${title}'>
			<#if url!=''>
				<@aButton color='link' class='card-control' href='${url!}' title='${title!}' size='sm' buttonIcon='cog' hideTitle=['all'] params='aria-label="${title!}"' />
			</#if>
			<@button style='card-control collapse' buttonTargetId='#${id}_dashboard_card_body' buttonIcon='minus' size='sm' params='aria-label="#i18n{portal.util.labelShow}"'/>
			<@button style='card-control remove' buttonTargetId='#${id}_dashboard_card' buttonIcon='times' size='sm' params='aria-label="#i18n{portal.util.labelHide}"' />
		</@boxHeader>
		<@boxBody class=bodyClass id='${id}_dashboard_card_body'>
			<#nested>
		</@boxBody>
	</@box>
</#macro>

<#macro adminFooter closeMain=true >
<!-- footer menu -->
<footer class="lutece-main-footer footer footer-transparent d-print-none">
	<div class="container-fluid">
		<div class="row text-center align-items-center flex-row-reverse">
			<div class="col-lg-auto ms-lg-auto">
				<ul class="list-inline mb-0">
					<li class="list-inline-item nav-item "><a href="https://lutece.paris.fr/support/jsp/site/Portal.jsp?page=wiki" class="nav-link">Documentation</a></li>
					<li class="list-inline-item nav-item "><a href="https://github.com/lutece-platform/" target="_blank" class="nav-link" rel="noopener">Source code</a></li>
				</ul>
			</div>
			<div class="col-12 col-lg-auto mt-3 mt-lg-0">
				<ul class="nav list-inline mb-0">
					<li class="list-inline-item nav-item">
						<a class="nav-link d-flex align-items-center" href="https://lutece.paris.fr" target="lutece" title="#i18n{portal.site.portal_footer.labelPortal}">
							<span class="me-2">${site_name}</span>
							<img src="themes/admin/shared/images/poweredby.svg" style="height:15px" class="img-fluid theme-invert" alt="#i18n{portal.site.portal_footer.labelMadeBy}">
							<span class="visually-hidden">LUTECE</span>
							<span class="text-muted ms-2" rel="noopener">version ${version}</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</footer>
<!-- Included JS Files 												-->
<!-- Le javascript 													-->
<!-- ============================================================== -->
<!-- Placed at the end of the document so the pages load faster 	-->
<@coreAdminJSLinks />
${javascript_files}
</div><!-- Close wrapper -->
</#macro>

<#--
Macro: adminHeader
Description: Generates a header section for an administrative page, including a navigation menu and user account menu.
Parameters:
@param - site_name - string - required - the website or application.
-->
<#macro adminHeader site_name=site_name!'Lutece' admin_url=admin_url >
<#local userReadMode><#attempt>${dskey('portal.site.site_property.layout.user.readmode.show.checkbox')?number}<#recover>0</#attempt></#local>
<#local userDarkMode><#attempt>${dskey('portal.site.site_property.layout.user.darkmode.show.checkbox')?number}<#recover>0</#attempt></#local>
<#local userMenuMode><#attempt>${dskey('portal.site.site_property.layout.user.menumode.show.checkbox')?number}<#recover>0</#attempt></#local>
<#local readMode><#attempt><#if dskey('portal.site.site_property.layout.readmode.checkbox')?number = 1> dir="rtl"</#if><#recover></#attempt></#local>
<#local darkMode><#attempt><#if dskey('portal.site.site_property.layout.darkmode.checkbox')?number==1> theme-dark</#if><#recover></#attempt></#local>
<#local layout><#attempt><#if dskey('portal.site.site_property.layout.menu.checkbox')?number==1>aside<#else>header</#if><#recover>header</#attempt></#local>
<#local logoUrl = (dskey('portal.site.site_property.logo_url')!)?has_content?then(dskey('portal.site.site_property.logo_url'), 'themes/admin/shared/images/logo-header-icon.svg')>
</head>
<body class="antialiased${darkMode!}"${readMode}>
<@adminSkipNav />
<div id="lutece-layout-wrapper" class="${layout!}" data-userdarkmode="${userDarkMode}" data-usermenu="${userMenuMode}">
<header class="lutece-header" > 
	<nav class="lutece-nav navbar navbar-expand-lg navbar-dark d-print-none">
		<div class="container-fluid">
			<a class="lutece-brand navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0" href="${dskey('portal.site.site_property.home_url')}" title="#i18n{portal.users.admin_header.title.viewSite} ${site_name}" target="_blank" title="#i18n{portal.site.portal_footer.newWindow}">
				<img src="${logoUrl}" height="30" alt="Logo ${site_name}" aria-hidden="true">
				<span class="ml-2 ms-2">${site_name}</span>
			</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
				<span class="navbar-toggler-icon"></span>
				<span class="visually-hidden">#i18n{portal.util.labelShow} / #i18n{portal.util.labelHide}</span>
			</button>
			<div class="lutece-collapse collapse navbar-collapse" id="navbar-menu">
				<ul class="navbar-nav">
					<#list feature_group_list as feature_group>
						<#if feature_group.icon?length < 1>
							<#assign icon_class = "ti ti-mood-empty">
						<#else>
							<#assign icon_class = feature_group.icon>
						</#if>
						<#if feature_group.features?size &gt; 1>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" id="dLabel${feature_group.id}Header" role="button" data-bs-toggle="dropdown" role="button" aria-expanded="false" href="${admin_url}#${feature_group.id}">
									<i class="${icon_class} me-1"></i> <span>${feature_group.label}</span>
								</a>
								<div class="dropdown-menu" aria-labelledby="dLabel${feature_group.id}Header">
									<div class="dropdown-menu-columns">
										<div class="dropdown-menu-column">
										<#list feature_group.features as feature>
											<#if !feature.externalFeature>
												<a class="dropdown-item" href="${feature.url}?plugin_name=${feature.pluginName}" title="${feature.name}">
													<i class="${feature.iconUrl} me-1"></i> 
													<span>${feature.name} </span>
												</a>
											<#else>
												<a class="dropdown-item" href="${feature.url}" title="${feature.name}">
													<#if feature.iconUrl?has_content><i class="${feature.iconUrl} me-1"></i></#if> 
													<span>${feature.name}</span>
												</a>
											</#if>
										</#list>
										</div>
									</div>
								</div>
							</li>
						<#else>
							<#list feature_group.features as feature>
								<li class="nav-item">
								<#if !feature.externalFeature>
									<a class="nav-link" href="${feature.url}?plugin_name=${feature.pluginName}"><#if feature.iconUrl?has_content>
										<i class="${feature.iconUrl} me-1"></i></#if> 
										<span>${feature.name}</span>
									</a>
								<#else>
									<a class="nav-link" href="${feature.url}"><#if feature.iconUrl?has_content><i class="${feature.iconUrl} me-1"></i></#if> 
										<span>${feature.name}</span>
									</a>
								</#if>
								</li>
							</#list>
						</#if>
					</#list>
					<li class="nav-item d-none d-lg-flex ms-auto">
						<a class="nav-link"  href="${admin_url}" title="#i18n{portal.users.admin_header.homePage}" id="go-home">
							<i class="ti ti-home"></i><span class="visually-hidden">#i18n{portal.users.admin_header.homePage}</span>
						</a>
					</li>
					<li class="nav-item d-flex d-lg-none mt-2">
						<a class="nav-link"  href="${admin_url}" title="#i18n{portal.users.admin_header.homePage}" id="go-home">
							<i class="ti ti-home me-2"></i> <span>#i18n{portal.users.admin_header.homePage}</span>
						</a>
					</li>
					<#if userMenuMode?number = 1>
					<li class="nav-item d-none d-lg-flex">
						<div class="nav-link" title="#i18n{portal.users.admin_header.homePage}" id="switch-menu" tabindex="0" role="button" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="bottom" data-bs-original-title="#i18n{portal.users.admin_header.labelMenuV} / #i18n{portal.users.admin_header.labelMenuH}">
							<i class="ti ti-layout-navbar-collapse menu-rotate-icon"></i><span class="visually-hidden">#i18n{portal.users.admin_header.labelMenuV} / #i18n{portal.users.admin_header.labelMenuH}</span>
						</div> 
					</li>
					</#if>
					<#if userDarkMode?number = 1>
					<li class="nav-item" id="switch-darkmode">
						<div class="nav-link d-none d-lg-flex" tabindex="0" role="button">
							<i class="ti ti-moon"></i><span class="visually-hidden">#i18n{portal.users.admin_header.labelMode} <span>#i18n{portal.users.admin_header.labelDarkMode}</span></span>
						</div>
						<div class="nav-link d-flex d-lg-none" tabindex="0" role="button">
							<i class="ti ti-moon me-2"></i> <span>#i18n{portal.users.admin_header.labelMode} #i18n{portal.users.admin_header.labelDarkMode}</span>
						</div>
					</li>
					</#if>
					<#if userReadMode?number = 1>
						<@adminReadMode />
					</#if>
					<#if user.userLevel == 0>
						<#if listLoggersInfo??>
						<#assign listLogDebug = listLoggersInfo?filter( logInfo -> ( logInfo.level = 'DEBUG' || logInfo.level = 'TRACE' ) ) />
						<#if listLogDebug?has_content>
							<li class="nav-item d-none d-lg-flex">
								<a href="#" class="nav-link" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" aria-expanded="false">
									<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg>
									<#if listLoggersInfo?has_content><span class="badge bg-red"></span></#if>
								</a>
								<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
									<div class="card">
										<div class="card-header">
											<h3 class="card-title">Notifications</h3>
										</div>
										<div class="list-group list-group-flush list-group-hoverable">
											<div class="list-group-item logger">
												<div class="row align-items-start">
													<div class="col-auto pt-2">
														<span class="badge bg-red d-block"></span>
													</div>
													<div class="col text-truncate">
														<h3><a href="#" class="text-body d-block">#i18n{portal.util.log.warningLevel}</a></h3>
														<#list listLogDebug as logInfo>
															<#if logInfo?size gt 0><div class="d-block text-truncate mt-1" title="${logInfo.path!}"><strong>${logInfo.name!}  - ${logInfo.level!}</strong> ${logInfo.path!}</div></#if>
														</#list>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</li> 
						</#if>
					</#if>
					<li class="nav-item d-none d-lg-flex">
						<a class="nav-link" href="jsp/admin/ManageProperties.jsp" title="#i18n{portal.site.adminFeature.properties_management.name}" >
							<i class="ti ti-home-cog"></i>
							<span class="visually-hidden">#i18n{portal.site.adminFeature.properties_management.name}</span>
						</a>
					</li>
					<li class="nav-item d-flex d-lg-none">
						<a class="nav-link" href="jsp/admin/ManageProperties.jsp" title="#i18n{portal.site.adminFeature.properties_management.name}" >
							<i class="ti ti-home-cog me-2"></i> <span>#i18n{portal.site.adminFeature.properties_management.name}</span>
						</a>
					</li>
					<li class="nav-item d-none d-lg-flex">
						<a class="nav-link" href="jsp/admin/AdminTechnicalMenu.jsp" title="#i18n{portal.admindashboard.view_dashboards.title}">
							<i class="ti ti-settings"></i>
							<span class="visually-hidden">#i18n{portal.admindashboard.view_dashboards.title}</span>
						</a>
					</li>
					<li class="nav-item d-flex d-lg-none">
						<a class="nav-link" href="jsp/admin/AdminTechnicalMenu.jsp" title="#i18n{portal.admindashboard.view_dashboards.title}">
							<i class="ti ti-settings me-2"></i> <span>#i18n{portal.admindashboard.view_dashboards.title}</span>
						</a>
					</li>
					</#if>
					<li class="nav-item dropdown d-none d-lg-flex">
						<a href="#" class="nav-link nav-info nav-user-info d-flex lh-1 py-0 px-2 text-reset dropdown-toggle" data-bs-toggle="dropdown" role="button" >
							<span class="visually-hidden">#i18n{portal.util.labelMore}</span>
							<span class="avatar avatar-sm" style="background-image:url(<#if adminAvatar>servlet/plugins/adminavatar/avatar?id_user=${user.userId}<#else>#dskey{portal.site.site_property.avatar_default}</#if>)"></span>
							<div class="ps-2 pt-3 user-infos">
								<p class="mb-0 fs-5 user-login">${dashboard_zone_4!}</p>
								<p class="mt-0 small user-date">${user.dateLastLogin!}</p>
							</div>
						</a>
						<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow nav-info ">
						<#if userMenuItems?has_content>   
							<#list userMenuItems as item>
								${item.content}
							</#list>
						</#if>
						<div class="dropdown-divider nav-info "></div>
						<#if admin_logout_url?has_content>
						<a class="dropdown-item dropdown-logout d-none d-lg-flex" href="${admin_logout_url}" title="#i18n{portal.users.admin_header.deconnectionLink}">
							<i class="ti ti-logout me-1"></i> 
							<span>#i18n{portal.users.admin_header.deconnectionLink}</span>
						</a>
						</#if> 
						</div>
					</li>
					<li class="nav-item justify-content-start d-lg-none">
						<span class="ms-2 mb-2"><i class="ti ti-user me-2"></i>${dashboard_zone_4!}</span>
						<span class="ms-2"><i class="ti ti-calendar me-2"></i> #i18n{portal.users.admin_header.labelLastLogin} ${user.dateLastLogin!}</span>
					</li>
					<#if admin_logout_url?has_content>
					<li class="nav-item d-flex d-lg-none">
						<a class="nav-link" href="${admin_logout_url}" title="#i18n{portal.users.admin_header.deconnectionLink}">
							<i class="ti ti-logout me-2"></i> 
							<span>#i18n{portal.users.admin_header.deconnectionLink}</span>
						</a>
					</li>	
					</#if>
				</ul>
				<button id="aside-header-collapse" class="btn btn-dark btn-sm mt-5" type="button" title="#i18n{portal.util.labelToggleSize}">
					<span class="ti ti-switch-horizontal"></span>
					<span class="visually-hidden">#i18n{portal.util.labelToggleSize}</span>
				</button>
			</div>
		</div>
	</nav>
<#if user.userLevel == 0>
<script>
document.addEventListener( 'DOMContentLoaded', () => {	
	const loggers = document.querySelector('.logger') ;
	if( loggers != null && loggers.childElementCount > 0 && document.getElementById('adminModal') != null ){
		if( !sessionStorage.getItem('lutece-debug-modal') ){
			sessionStorage.setItem('lutece-debug-modal', false )
		}
		var modalContent = '<h3>#i18n{portal.util.log.warningLevel}</h3><p><strong>#i18n{portal.util.log.modalWarningMessage}</strong></p><p class="text-center"><button class="btn btn-sm btn-danger" data-toggle="collapse" data-target="#info-log" aria-expanded="false" aria-controls="info-log" type="button">#i18n{portal.util.log.modalLabelButton}</button></p><blockquote class="collapse" id="info-log">' + loggers.querySelector('.col.text-truncate').innerHTML + '</blockquote>';
		var adminModal = document.getElementById('adminModal');
		var adminModalLabel = document.getElementById('adminModalLabel');
		var adminModalBody = document.querySelector('#adminModal .modal-body');
		if( adminModalBody != null){
			adminModalBody.insertAdjacentHTML( 'beforeEnd', modalContent);
		}
		var adminModalHeader = document.querySelector('#adminModal .modal-header');
		var adminModalHeaderBtn = document.querySelector('#adminModal .modal-header button');
		var myAdminModal = new bootstrap.Modal( adminModal, {} );
		adminModalLabel.insertAdjacentHTML( 'beforeEnd', '#i18n{portal.util.log.modalWarningTitle}' );
		adminModalHeader.classList.add('text-white');
		adminModalHeaderBtn.setAttribute( 'style', 'background: transparent url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\' fill=\'%23ffffff\'%3e%3cpath d=\'M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z\'/%3e%3c/svg%3e") center/.75rem auto no-repeat;');
		adminModalHeader.classList.add('bg-danger');
		adminModalBody.classList.add('text-danger');
		adminModal.addEventListener('hide.bs.modal', function () {
			sessionStorage.setItem('lutece-debug-modal',true);
		})	
		if( sessionStorage.getItem('lutece-debug-modal') === 'false' ){
			myAdminModal.show();
		}
	}
}); 
</script>
</#if>
</header> 
</#macro>	

<#--
Macro: adminHeaderDocumentationLink
Description: Generates a link to the documentation for a specific administrative feature.
Parameters:
@param - feature_documentation - string - optional - the feature's documentation.
-->
<#macro adminHeaderDocumentationLink >
  <#if feature_documentation?has_content >
		<#if feature_documentation?exists>
			<@div id="lutece-doc-link" class="bg-light p-1">
				<@link target="_blank" href="${feature_documentation}" title="#i18n{portal.features.documentation.help} [Nouvelle fenêtre]">
					<@icon class="fa-life-ring" /> <small>#i18n{portal.features.documentation.help}</small> 
				</@link>
			</@div>
		</#if>
	</#if>
</#macro>

<#-- Macro: adminHome
Description: Generates the home page for the admin dashboard. It generates a container for three columns of widgets, which are defined in separate macro calls. The macro also includes a script that enables dragging and dropping of the widgets to rearrange their positions.
-->
<#macro adminHome>
<#assign head = .get_optional_template('../../../../../admin/user/adminHeader.html')>
<#if head.exists><@head.include /></#if>
<main id="lutece-main" class="lutece-main-content">
<h1 class="visually-hidden">#i18n{portal.admin.admin_login.welcome} ${site_name!}</h1>
<@pageWrapper>
<@div id="dashboard-widgets" class="dashboard-widgets pt-3">
	<@row>
		<@columns sm=12 md=4 class='widget-col' id='zone-1'>
			${dashboard_zone_1!}
		</@columns>
		<@columns sm=12 md=4 class='widget-col' id='zone-2'>
			${dashboard_zone_2!}
		</@columns>
		<@columns sm=12 md=4 class='widget-col' id='zone-3'>
			${dashboard_zone_3!}
		</@columns>
	</@row>
</@div>
</@pageWrapper>
</main>
<#assign foot = .get_optional_template('../../../../../admin/user/adminFooter.html')>
<#if foot.exists><@foot.include /></#if>
<script type="module">
import {
	LuteceDraggable
} from './themes/shared/modules/luteceDraggable.js';

const containers = document.querySelectorAll('#dashboard-widgets .widget-col');
const draggables = Array.from(containers).flatMap(container => [...container.children]);

const AdminHomeDraggable = new LuteceDraggable(draggables, containers);

AdminHomeDraggable.on('dragged', (event) => {
	// should be make a call to user preference to save the position of the widget
});

// Get all the elements that need to have a "move" cursor
const elements = document.querySelectorAll('#dashboard-widgets .widget-col > .card > .card-header, #dashboard-widgets .widget-col > .card .avatar, #dashboard-widgets .widget-col > .card .info-box-icon');
// Loop through each element and set the cursor to "move"
elements.forEach((element) => {
	element.style.cursor = 'move';
});


function setCounters( speed, counters  ){
	counters.forEach( counter => {
		const animate = () => {
			let nCounter = counter.innerText;
			let sVal = '';
			let thisTXT = counter.innerText.split( '/' );
			if ( thisTXT.length > 1 ){
				nCounter = thisTXT[0];
				sVal = ' / ' + thisTXT[1];
			}
			if ( typeof nCounter === 'number' ) {
				const time = nCounter / speed;
				if( data < value) {
					counter.innerText = Math.ceil( data + time );
					setTimeout(animate, 1);
				} else {
					counter.innerText = value;
				}
			}
		}
		animate();
	});
}

const dashSortables = [].slice.call(document.querySelectorAll('.dashboard-widgets .widget-col'));
// Loop through each nested sortable element
for ( var i = 0; i < dashSortables.length; i++) {
	var sortableDash = new Sortable( dashSortables[i], {
		group: 'widget-dashboard',
		swapThreshold: 0.65,
		draggable: '.box-widget',
		store: {
			get: function (sortable) {
				var order = localStorage.getItem(sortable.options.group.name);
				return order ? order.split('|') : [];
			},
			set: function (sortable) {
				var order = sortable.toArray();
				localStorage.setItem(sortable.options.group.name, order.join('|'));
			}
		}
	});
}

const boxCount = document.querySelectorAll('.box-widget .counter')
setCounters( 200, boxCount );

</script>
</#macro>

<#macro adminLanguage languages lang action='jsp/admin/DoChangeLanguage.jsp' >
<@tform method='post' action=action class='form-inline clearfix'>
	<@input type='hidden' name='token' value='${token}' />
	<@row>
		<@columns id='lutece-language-menu'>
			<#list languages?filter( language -> language.code == lang  ) as language>
				<@div id="lutece-default-language" class=" ps-1">
					<@icon style='language' /> #i18n{portal.admin.admin_home.language}
					<@span class='ms-2 py-1 ps-4 pe-2 px-2 fw-bolder border border-2 border-muted rounded-pill' params='tabindex="0" style="background: transparent url( ./themes/admin/shared/css/vendor/tabler/img/flags/${lang}.svg ) no-repeat .65rem center; background-size: .75rem"'>
						${language.name!?capitalize}
					</@span>
				</@div>
			</#list>
			<@div id='lutece-languages'>
			<#list languages?filter( language -> language.code != lang  ) as language>
				<@button color='secondary btn-language' type='submit' name='language' value='${language.code}' title='${language.name?capitalize}' hideTitle=['all'] params='style="background-image: url( ./themes/admin/shared/css/vendor/tabler/img/flags/${language.code}.svg );"' />
			</#list>
			</@div>
		</@columns>
	</@row>
</@tform>
</#macro>

<#-- Macro: adminLoginPage
Description: Generates the login page for the admin dashboard, with a custom background image and site name. The macro includes a script that randomly selects a background image from a list of images.
Parameters:
@param - title - string - optional - display on the login page.
@param - site_name - string - optional - the site to display on the login page.
@param - layout - string - optional - the site to display on the login page.
-->
<#macro adminLoginPage title='' site_name='LUTECE' params='' deprecated...>
<@deprecatedWarning args=deprecated />
<#local readMode><#if dskey('portal.site.site_property.layout.readmode.checkbox')?trim?starts_with('DS')><#else><#if dskey('portal.site.site_property.layout.readmode.checkbox')?number = 1> dir="rtl"</#if></#if></#local>
<#--  <#local readMode=dskey('portal.site.site_property.layout.readmode.checkbox')/>  -->
<#local logoUrl = (dskey('portal.site.site_property.logo_url')!)?has_content?then(dskey('portal.site.site_property.logo_url'), 'themes/admin/shared/images/logo-header-icon.png')>
<#local loginLayoutImg=dskey('portal.site.site_property.login.image')?trim /> 
</head>
<body class="antialiased d-flex flex-column" ${readMode!}<#if params!=''> ${params}</#if>>
<main id="login-page" class="page page-center">
<#if dskey('portal.site.site_property.bo.showXs.checkbox') == '0' >
<@div class="position-fixed top-0 w-100 d-block d-md-block d-lg-none m-0 p-0 overflow-hidden" params='style="z-index: 1050"'>
    <@pageColumn class="p-0 m-0">
	   <@div class="d-flex align-items-center justify-content-center vh-100 ">
			<@div class="container">
				<@div class="card shadow-lg rounded-4 p-4 mt-3 mx-2 mw-30">
					<@div class="card-body p-5 fs-6">
						<@div class="text-center mb-4">
							<@link href='/' target='_blank'>
								<#--  <img src="${dskey('portal.site.site_property.logo_url')}" height="40" alt="Logo" aria-hidden="true" >  -->
								<span class="visually-hidden">${site_name!'Lutece'}</span>
							</@link>
						</@div>
						<@div class='d-flex flex-column align-items-center'>
							<h2 class="h1 mb-4 text-center">#i18n{portal.admin.admin_login.welcome} ${site_name!}</h2>
							<i class="ti ti-device-mobile-off" style="font-size:120px !important"></i>
						</@div>
					</@div>
			   </@div>
			</@div>
		</@div>
	</@pageColumn>
</@div>
</#if>
<#if loginLayoutImg?trim !=''>
	<div class="container container-normal py-4">
		<div class="row align-items-center g-4">
			<div class="col-lg">
				<div class="container-tight">
</#if>
<#--  Content  -->
<@div class="container-tight py-4">
	<@div class="text-center mb-4">
		<@link href='.' target='_blank'>
			<@span class="visually-hidden">#i18n{portal.admin.admin_login.gotoFO} ${site_name!} </@span>
			<figure>
				<@img url='${logoUrl}' alt='${site_name!}' title='${site_name!}' class='' params='aria-hidden="true" height="40" style="border: 2px solid white;border-radius:50%;"' />
				<figcaption class="visually-hidden">#i18n{portal.admin.admin_login.gotoFO} ${site_name!'Lutece'} [ #i18n{portal.site.portal_footer.newWindow} ]</figcaption>
			</figure>
		</@link>
	</@div>
	<@div class="card card-md">
		<@div class="card-body bg-white">
			<h2 class="card-title text-center mb-4 pt-2">
				#i18n{portal.admin.admin_login.welcome}
				<span class="d-block">${site_name!}</span>
			</h2>
			<#nested>
		</@div>
	</@div>
</@div>
<p class="text-center text-white"><small>#i18n{portal.site.portal_footer.labelMadeBy} ${version}</small></p>
<#--  End content -->
<#if loginLayoutImg !='' && !loginLayoutImg?starts_with('DS') >
				</div>
			</div>
			<div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
				<div class="bg-cover h-100 min-vh-100 w-100" style="background-image: url(${loginLayoutImg});background-size:70%; "></div>
			</div>
		</div>
	</div>
</div>
</#if>
<#if dskey('portal.site.site_property.bo.showXsWarning.checkbox') == '1' >
<@initToast position='top-0 start-50 translate-middle-x' showAll=true >
   <@addToast title='' content='#i18n{portal.site.message.showXsWarningMsg}' class='text-bg-warning d-block d-sm-block d-md-block d-lg-none' />
</@initToast>
</#if>
</main>
<script type="module">
import {
	LutecePassword
} from './themes/shared/modules/lutecePassword.js';
import {
	LuteceLogin
} from './themes/shared/modules/luteceLogin.js';

const login = new LuteceLogin();
const password = new LutecePassword();

document.addEventListener( "DOMContentLoaded", function(){
	/* backGround image random */
	const aImages = '#dskey{portal.site.site_property.layout.login.image}'.split(',');
	const backImages = '#dskey{portal.site.site_property.back_images}'.split(',');
	login.randomImages = aImages;
	login.randomBgImages = backImages;
	<#if loginLayoutImg != '' >
	login.element = '.bg-cover';
	</#if>	
	login.init( )
	/* Password Toggler */
	password.initPassToggler( );
});
</script>
<@coreAdminJSLinks />
</#macro>

<#-- Macro: adminMessagePage

Description: Generates a Bootstrap page for displaying an administrative message.

Parameters:
@param - title - string - optional - the page.
- message (object): an object containing information about the message to be displayed, including its type and text.
- text (string): the text of the message.
-->
<#macro adminMessagePage title=''>
<#assign logoUrl = (dskey('portal.site.site_property.logo_url')!)?has_content?then(dskey('portal.site.site_property.logo_url'), 'themes/admin/shared/images/logo-header-icon.svg')>
<#assign title=title />
<#assign alerttype="primary" />
<#assign icontype="fa-info-circle" />
<#if title??>
	<#if title?trim='' >
		<#assign title="Information" />
	</#if>		
</#if>		
<#if message.type == 2 >
	 <#assign alerttype="danger" />
   <#assign icontype="fa-question-circle" />
<#elseif message.type == 3 >
   <#assign alerttype="warning" />
   <#assign icontype="fa-exclamation-circle" />
<#elseif message.type == 4 >
	 <#assign alerttype="warning" />
   <#assign icontype="fa-question-circle" />
<#elseif message.type == 5 >
   <#assign alerttype="danger" />
   <#assign icontype="fa-ban" />
</#if>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<@div class="page page-center">
	<@div class="text-center mb-4">
		<@link href=".">
			<@img url="${logoUrl}" alt='LUTECE' title='Lutece' params=' width="36"' />
		</@link>
	</@div>
	<@row class='justify-content-center align-items-center'>
		<@columns md=3>
			<@alert color=alerttype titleLevel='h1' title=title iconTitle=icontype params='flex-column'>
				<@p class="text-center">${text!}</@p>
				<#nested>
			</@alert>	
		</@columns>
	</@row>
</@div>
</#macro>

<#macro adminReadMode>
<li class="nav-item dropdown me-2" id="lutece-rtl">
	<div class="nav-link d-none d-lg-flex" tabindex="0" role="button" title="#i18n{portal.site.site_property.layout.readmode.checkbox}">
		<i class="ti ti-text-direction-rtl"></i> <span class="visually-hidden">#i18n{portal.site.site_property.layout.readmode.checkbox}</span>
	</div>
	<div class="nav-link d-flex d-lg-none" tabindex="0" role="button" title="#i18n{portal.site.site_property.layout.readmode.checkbox}">
		<i class="ti ti-text-direction-rtl  me-2"></i> #i18n{portal.site.site_property.layout.readmode.checkbox}
	</div>
</li>
</#macro>

<#-- Macro: adminSiteColumnOutline
Description: Wraps a column's content in an outline that includes the column's ID. It generates a Bootstrap column outline with the given column ID.
Parameters:
@param - columnid - string - optional - the column to be displayed in the outline.
-->
<#macro adminSiteColumnOutline columnid=''>
<@div id='lutece-column-${columnid}' class='lutece-admin-column' params='data-no-content="#i18n{portal.site.portletType.labelCreateColumn}"'>
    <@div class='lutece-column-toolbar'>
		<@tag class='lutece-admin-column-id' color='dark'>${i18n("portal.site.columnId",columnid)}</@tag>
		<@button color='dark btn-column-add-portlet rounded-pill' params='data-bs-toggle="modal" data-portlet-column="${columnid}" data-portlet-order=""' title='#i18n{portal.site.portletType.labelCreateColumn}' hideTitle=['all'] buttonIcon='layout-grid-add' />
	</@div>
    <@div class="lutece-admin-column-outline"><#compress><#nested></#compress></@div>
</@div>
</#macro>

<#macro adminSiteFooter >
<#assign siteFooter = .get_optional_template('../../../../../skin/site/portal_footer.html')>
<#if siteFooter.exists><@siteFooter.include /></#if>
<!-- A modal dialog containing a form -->
<dialog id="addPortletDialog" class="lutece-dialog" aria-labelledby="portletModalLabel" aria-hidden="true" tabindex="-1">
    <div class="lutece-dialog lutece-dialog-fullscreen">
        <div class="lutece-dialog-content">
            <div class="lutece-dialog-header">
                <h2 class="lutece-dialog-title h4 text-dark" id="portletModalLabel">#i18n{portal.site.portletType.labelCreate}</h2>
                <button type="button" class="btn btn-link btn-close text-dark" aria-label="#i18n{portal.util.labelCancel}"><i class="ti ti-x"></i></button>
            </div>
            <div class="lutece-dialog-body">
                    <form action="jsp/admin/DoCreatePortlet.jsp" type="get">
                    <div class="container">
                        <div id='portlet_type_id' class="row row-cols-4"></div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <button type="button" class="btn btn-secondary btn-close" value="cancel" >#i18n{portal.util.labelCancel}</button>
                    </div>
                    </form>
                </div>
            <div>
        </div>
    </div>
</div>
</dialog>
<script type="module">
document.addEventListener( "DOMContentLoaded", function(){
    const parentPortletTypeNodes = window.parent.document.querySelectorAll( '#offcanvas-body-portlet-type-wrapper ul li' );
    const dialogPortletTypes = document.getElementById( 'portlet_type_id' );
    const portletDialog = document.querySelector( '#addPortletDialog' );

    parentPortletTypeNodes.forEach( ( item ) => {
        const divType = document.createElement('div')
        divType.classList.add('col')
        const aType = document.createElement('a')
        aType.classList.add('btn', 'btn-outline-primary', 'btn-lg','btn-block', 'btn-new-portlet', 'py-5', 'px-2', 'mb-2' )
        aType.setAttribute( 'href', item.dataset.portletTypeHref )
        aType.innerText = item.dataset.portletTypeName
        const iconType = document.createElement('i')
        iconType.classList.add('ti', <#noparse>`ti-${item.dataset.portletTypeIcon}`</#noparse> ,'fs-0','d-block')
        aType.appendChild( iconType );
        divType.appendChild( aType );
        dialogPortletTypes.appendChild( divType );
    })

    // 
    const columnList = document.querySelectorAll( '.lutece-admin-column' );
    columnList.forEach( ( col ) => {
        const colOutList = col.querySelectorAll( '.lutece-admin-column-outline' );
        colOutList.forEach( ( colOut ) => { 
            if( colOut.textContent.trim() === '' ){
                colOut.textContent= '';
            }
        })
    })

    // "Show the dialog" button opens the <dialog> modally
    const btnPortletList = document.querySelectorAll( '[data-bs-toggle="modal"]' );
    btnPortletList.forEach( ( btnPortlet ) => {
        btnPortlet.addEventListener( 'click', ( event ) => {
            const portlet = event.currentTarget
            const portletColumn = portlet.dataset.portletColumn
            let portletOrder = portlet.dataset.portletOrder
            if( portletOrder === '' ){
                const lastPortlet = document.querySelector(<#noparse>`#lutece-column-${portletColumn} .lutece-admin-column-outline .lutece-admin-portlet:last-child .lutece-admin-toolbar</#noparse>`)
                if( lastPortlet != null ){
                    portletOrder = parseInt( document.querySelector(<#noparse>`#lutece-column-${portletColumn} .lutece-admin-column-outline .lutece-admin-portlet:last-child .lutece-admin-toolbar</#noparse>`).dataset.portletOrder ) + 1
                } else {
                    portletOrder = 1
                }
            }
            dialogPortletTypes.childNodes.forEach( ( item ) => {
                let itemLnk = item.firstElementChild;
                let itemHref = itemLnk.getAttribute('href');
                <#noparse>itemLnk.setAttribute('href',`${itemHref}&portlet_column=${portletColumn}&portlet_order=${portletOrder}`)</#noparse>
            })  
            portletDialog.showModal()
        })
    })

    const btnCloseDialogList = document.querySelectorAll( '.btn-close' );
    btnCloseDialogList.forEach( ( btnCloseDialog ) => {
        btnCloseDialog.addEventListener( 'click', ( event ) => {
            portletDialog.close()
        })
    })

}); 
import {
    LuteceDraggable
} from './themes/shared/modules/luteceDraggable.js';

const containers = document.querySelectorAll('#main .lutece-admin-column-outline');
const draggables = Array.from(containers).flatMap(container => [...container.children]);
const AdminHomeDraggable = new LuteceDraggable( draggables, containers);

async function updatePortlet( portletId, col, order ){
<#noparse>const response = await fetch( `jsp/admin/site/DoModifyPortletPosition.jsp?portlet_id=${portletId}&column=${col}&order=${order}` );</#noparse>
}

AdminHomeDraggable.on( 'dragged', (event) => {
    // should be make a call to user preference to save the position of the widget
    const portletId = event.currentTarget.firstElementChild.dataset.portletId
	let newCol = 0, newOrder= 0
	if ( event.currentTarget.nextSibling != null ){
		newOrder = event.currentTarget.nextSibling.firstElementChild.dataset.portletOrder
		if( newOrder > 1 ){ newOrder-- }
	    newCol = event.currentTarget.nextSibling.firstElementChild.dataset.portletColumn
	} else if ( event.currentTarget.previousSibling != null ){
		newOrder = event.currentTarget.previousSibling.previousSibling.firstElementChild.dataset.portletOrder
		newOrder++
	    newCol = event.currentTarget.previousSibling.previousSibling.firstElementChild.dataset.portletColumn
	}
	event.currentTarget.firstElementChild.firstElementChild.textContent = newOrder
	event.currentTarget.firstElementChild.firstElementChild.dataset.portletOrder = newOrder
	event.currentTarget.firstElementChild.firstElementChild.dataset.portletColumn = newCol
	updatePortlet( portletId, newCol, newOrder )
}); 
</script> 
</#macro>

<#-- Macro: adminSiteToolbar
Description: Generates a toolbar for use in the site admin panel. It generates a Bootstrap toolbar that includes buttons for various site management tasks, such as searching for a page, changing the display size, deleting a page, adding a child page, and viewing the site map.
-->
<#macro adminSiteToolbar >
<@btnToolbar>
	<@btnGroup>
		<@tform type='inline' action='jsp/admin/site/AdminSite.jsp' role='search'>
			<@input type='number' name='page_id' id='page_id' min=1 title='${i18n("portal.site.admin_page.buttonSearchPage")}' placeHolder='22' params=' style="width:4rem;"' />
			<@button type='submit' color='primary' title='${i18n("portal.site.admin_page.buttonSearchPage")}' hideTitle=['all'] buttonIcon='search' />
		</@tform>
	</@btnGroup>
	<@btnGroup class='ms-3 me-2 d-none d-md-block'>
		<@button id='display-desktop' title='#i18n{portal.site.admin_page.buttonXLargeScreen}' buttonIcon='device-desktop' color='primary' class='btn-preview active' hideTitle=['all'] />
		<@button id='display-laptop' title='#i18n{portal.site.admin_page.buttonLargeScreen}' buttonIcon='device-laptop' color='primary' class='btn-preview' hideTitle=['all'] />
		<@button id='display-tablet' title='#i18n{portal.site.admin_page.buttonTablet}' buttonIcon='device-tablet' color='primary' class='btn-preview' hideTitle=['all'] />
		<@button id='display-phone' title='#i18n{portal.site.admin_page.buttonSmartphone}' buttonIcon='device-mobile' color='primary' class='btn-preview' hideTitle=['all'] />
	</@btnGroup>
	<#if page.id != 1>
		<@btnGroup class='ms-1'>
			<@aButton href='jsp/admin/site/AdminSite.jsp?page_id=${page.parentPageId}' color='success' buttonIcon='arrow-up' size='' title='#i18n{portal.site.admin_page.buttonUpToParentPage}' hideTitle=['all'] />
			<@aButton href='jsp/admin/site/RemovePage.jsp?page_id=${page.id}' color='danger' buttonIcon='trash' size='' title='#i18n{portal.site.admin_page.buttonDeletePage}' hideTitle=['all']  />
		</@btnGroup>
	</#if>
	<#if extendableResourceActionsHtml?? && extendableResourceActionsHtml?has_content>${extendableResourceActionsHtml!}</#if>
	<@btnGroup class='ms-1'>
		<@aButton href='jsp/admin/site/AdminSite.jsp?page_id=${page.id}&amp;param_block=2' buttonIcon='wrench me-1' title='#i18n{portal.site.admin_page.labelPageProperty}' hideTitle=['xs','sm']  />
	</@btnGroup>
	<@btnGroup class='mx-1'>
		<@aButton href='jsp/admin/site/AdminSite.jsp?page_id=${page.id}&amp;param_block=5'  buttonIcon='plus me-1' title='#i18n{portal.site.admin_page.labelChildPagePage}' hideTitle=['xs','sm'] />
	</@btnGroup>
	<@offcanvas id="portlet-type-wrapper" title="#i18n{portal.site.admin_page.labelPortletPage}" btnColor="primary btn-portet" btnIcon="layout-dashboard mx-1" btnTitle="#i18n{portal.site.admin_page.labelPortletPage}" position="end">
	<@listGroup>
	<#list portlet_types_list?sort_by("name") as portlet_type>
		<#if portlet_type.name !=''>
			<#assign iconPortlet><#if portlet_type.iconName??>portlet_type.iconName!'puzzle'<#else>puzzle</#if></#assign>
			<@listGroupItem class='p-2' params='data-portlet-type-id="${portlet_type.id}" data-portlet-type-icon="${iconPortlet!}" data-portlet-type-href="jsp/admin/DoCreatePortlet.jsp?portlet_type_id=${portlet_type.id}&amp;page_id=${page.id}" data-portlet-type-name="${portlet_type.name}"'>
				<@aButton color='link w-100 btn-portlet d-flex justify-content-start' buttonIcon='${iconPortlet!} me-2 me-2' href='jsp/admin/DoCreatePortlet.jsp?portlet_type_id=${portlet_type.id}&amp;page_id=${page.id}' target='preview' title='${portlet_type.name}' />
			</@listGroupItem>	
		</#if>
	</#list>
	</@listGroup>
	</@offcanvas>
	<@btnGroup class='ms-1'>
		<@button buttonIcon='sitemap' title='Page ${page.name} - Id ${page.id}' hideTitle=['all'] params='data-bs-toggle="offcanvas" data-bs-target="#offcanvasSiteMap" aria-controls="offcanvasSiteMap"' ><@span hide=['all']>#i18n{portal.site.admin_page.tabAdminMapSite}</@span></@button>
	</@btnGroup>
	<@btnGroup class='ms-1  d-none d-sm-block'>
		<@aButton href='jsp/site/Portal.jsp?page_id=${page.id}' title='#i18n{portal.site.admin_page.labelShowPage}' buttonIcon='external-link' color='info' class='btn-preview' target='_blank' hideTitle=['all'] />
	</@btnGroup>
	<@btnGroup class='ms-1  d-none d-sm-block'>
		<@button id='iframe-fullscreen' color='info' buttonIcon='maximize' />
	</@btnGroup>  
</@btnToolbar>
</#macro>

<#-- SkipNav -->
<#-- Params
    - title   : Title shown over the banner
    - logoImg : Default: Empty string, show logo instead of text title, title is set as title html attribute for the logo image.
    - hasMenu : Default: true; 
    Nested content : Shows default page menu, but can other item can be add using @mainNavItem macro.
-->
<#macro adminSkipNav>
<a href="jsp/admin/AdminMenu.jsp#lutece-main" class="lutece-skip-links">#i18n{themeparisfr.skipNavMain}</a></li>
</#macro> 

<#--
Macro: alert

Description: Generates an HTML alert element with optional title, icon, and dismiss button.

Parameters:
@param - class - string - optional - of the alert element.
@param - color - string - optional - of the alert element.
@param - titleLevel - string - optional - the title element (h1, h2, h3, h4, h5, or h6).
@param - title - string - optional - the alert element.
@param - iconTitle - string - optional - the icon to include in the alert element.
@param - dismissible - boolean - optional - should be dismissible.
@param - id - string - optional - the alert element. If not provided, a default ID will be generated.
@param - params - string - optional - to include in the alert element.
-->
<#macro alert class='' color='' titleLevel='h4' title='' iconTitle='' dismissible=false id='' params=''>
<div class="alert<#if color!=''> alert-${color}</#if><#if class!=''> ${class}</#if><#if dismissible> alert-dismissible</#if>"<#if id!=''> id="${id}"</#if>>
	<div class="d-flex justify-content-between"<#if params!=''> ${params}</#if>>
	<#if color!=''><#assign txtColor> text-${color}</#assign></#if>
	<#if iconTitle!=''><@icon style=iconTitle class='mx-2${txtColor}' /></#if>
	<#if title!=''>
	<${titleLevel} class="alert-title">
		${title}
	</${titleLevel}>
	</#if>
	<#nested>
	</div>
	<#if dismissible><a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a></#if>
</div>
</#macro>

<#--
Macro: autocomplete
Description: Generates an autocomplete dropdown
Parameters:
- id (string): the ID of the autocomplete search input element.
- name (string): the name attribute of the hidden input element.
- suggestionsUrl (string): the URL to fetch the suggestions from.
@param - suggestionsPath - string - optional - the suggestions list in the response object.
@param - itemValueFieldName - string - optional - of the suggestion object.
@param - btnColor - string - optional - the dropdown button.
@param - btnSize - string - optional - the dropdown button.
@param - itemLabelFieldNames - array - optional - suggestion object property names to display as the title.
@param - itemTitleFieldNames - array - optional - suggestion object property names to display as the description.
@param - itemDescriptionFieldNames - array - optional - suggestion object property names to display as the description.
@param - itemTagsFieldNames - array - optional - suggestion object property names to display as tags.
@param - currentValue - string - optional - of the autocomplete input.
@param - currentLabel - string - optional - displayed on the dropdown button.
@param - required - boolean - optional - is required or not.
@param - minimumInputLength - integer - optional - of characters needed to trigger the search.
@param - minimumInputLenghtLabel - string - optional - the minimum input length information.
@param - formLabel - string - optional - on the dropdown button as default.
@param - searchLabel - string - optional - on the dropdown button.
@param - emptyLabel - string - optional - when there are no suggestions.
-->
<#macro autocomplete id name suggestionsUrl suggestionsPath="" itemValueFieldName="value" btnColor="light" btnSize="" itemLabelFieldNames="[]" itemTitleFieldNames=itemLabelFieldNames itemDescriptionFieldNames="[]" itemTagsFieldNames="[]" currentValue="" currentLabel="" required=false minimumInputLength=1 minimumInputLenghtLabel="#i18n{portal.util.labelMinimumSearchLenght}" formLabel=searchLabel searchLabel="#i18n{portal.util.labelSearch}" emptyLabel="#i18n{portal.util.labelNoItem}">
    <div class="dropdown">
        <input type="text" id="${id}-form-input" name="${name}" style="opacity: 0;width: 0;margin-left:20px;position:absolute;" aria-required="true" value="${currentValue}" <#if required>required=required</#if>>
        <button class="btn btn-${btnColor} border <#if btnSize!=''>btn-${btnSize}</#if>" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
            <span id="${id}-dropdown-btn"><#if currentLabel!="">${currentLabel}<#else>${formLabel}</#if></span>
            <span id="${id}-remove" class="<#if currentValue=''>d-none</#if> badge bg-indigo ms-2 rounded-5 p-1 py-0"><i class="ti ti-x fs-5"></i></span>
            <span><i class="ti ti-chevron-down ps-1"></i></span>
        </button>
        <ul id="${id}-dropdown"class="dropdown-menu p-0" aria-labelledby="dropdownMenuButton">
            <li class="p-3 border-bottom">
                <div class="input-icon mb-0">
                    <input type="text" placeholder=${searchLabel} class="form-control" id="${id}-search" <#if currentValue!="">${currentValue}</#if>>
                    <span class="input-icon-addon">
                        <i id="${id}-search-icon" class="ti ti-search"></i>
                    </span>
                </div>
                <#if minimumInputLength gt 1>
                    <div class="d-flex justify-content-end">
                        <small class="text-muted fst-italic">
                            <strong>${minimumInputLength}</strong> ${minimumInputLenghtLabel}
                        </small>
                    </div>
                </#if>
            </li>
            <li>
                <ul id="${id}-list-container" class="list-group list-group-flush overflow-auto bg-white" id="suggestions-list" style="max-height:15rem;">
                </ul>
            </li>
        </ul>
    </div>
    <script type="module">
        import LuteceAutoComplete from './themes/shared/modules/luteceAutoComplete.js';
        //util functions
        const updateLoader = (add, remove) => (loader.classList.add(...add), loader.classList.remove(...remove));
        const createEl = (type, classNames = [], textContent = '') => (el => (el.classList.add(...classNames), el.textContent = textContent, el))(document.createElement(type));

        // Autocomplete
        
        // elements;
        const [formInput, dropdownBtn, removeBtn, loader, dropdown, resultList, searchInput] = ['form-input', 'dropdown-btn', 'remove', 'search-icon','dropdown','list-container','search'].map(suffix => document.getElementById(`${id}-`+suffix));

        // customise the template to display the suggestions
        const itemTemplate = suggestion => {
            const item = createEl('li', ['list-group-item', 'p-3']);
            item.setAttribute('data-value', suggestion.${itemValueFieldName});
            item.setAttribute('data-label', ${itemTitleFieldNames}.map(field => suggestion[field]).join(" "));
            if (suggestion.${itemValueFieldName} == formInput.value) item.classList.add('active');
            item.addEventListener('click', ({ currentTarget }) => {
                dropdown.querySelectorAll(`.list-group-item.active`).forEach(el => el.classList.remove('active'));
                currentTarget.classList.add('active');
                formInput.value = currentTarget.getAttribute('data-value');
                dropdownBtn.textContent = currentTarget.getAttribute('data-label');
                removeBtn.classList.remove('d-none');
            });
            item.append(
                createEl('h4', ['mb-0', 'fw-bolder'], ${itemTitleFieldNames}.map(field => suggestion[field]).join(" ")),
                createEl('p', ['text-muted', 'mb-0'], ${itemDescriptionFieldNames}.map(field => suggestion[field]).join(" ")),
                ${itemTagsFieldNames}.reduce((tags, field) => (tags.appendChild(createEl('span', ['badge', 'bg-blue-lt', 'me-1'], suggestion[field])), tags), createEl('span'))
            );
            return item;
        };

        // init the autocomplete
        const autoComplete = new LuteceAutoComplete(searchInput, resultList, "${suggestionsUrl}", "${suggestionsPath}", itemTemplate, ${minimumInputLength});
        // event listeners
        removeBtn.addEventListener('click', () => (dropdown.querySelectorAll(`.list-group-item.active`).forEach(el => el.classList.remove('active')), formInput.value = '', dropdownBtn.textContent = '${formLabel}', removeBtn.classList.add('d-none')));
        dropdownBtn.addEventListener('click', () => searchInput.focus());
        autoComplete.addEventListener('loading-error', () => updateLoader(['ti-zoom-exclamation', 'text-danger'], ['ti-loader-2', 'icon-rotate', 'ti-search']));
        autoComplete.addEventListener('loading-start', () => updateLoader(['ti-loader-2', 'icon-rotate'], ['ti-zoom-exclamation', 'text-danger', 'ti-search']));
        autoComplete.addEventListener('loading-end', () => {
            updateLoader(['ti-search'], ['ti-loader-2', 'icon-rotate']);
            if (resultList.childElementCount === 0) {
                const emptyItem = createEl('li', ['list-group-item', 'p-3', 'text-muted','text-center'], `${emptyLabel}`);
                resultList.appendChild(emptyItem);
            }
        });
    </script>
</#macro>

<#--
Macro: messages
Description: Generates HTML alert elements for displaying error, info, and warning messages.
Parameters:
@param - errors - list - optional - error messages to display.
@param - infos - list - optional - info messages to display.
@param - warnings - list - optional - warning messages to display.
@param - errors_class - string - optional - of the alert element for error messages.
@param - infos_class - string - optional - of the alert element for info messages.
@param - warnings_class - string - optional - of the alert element for warning messages.
-->
<#macro box color='' id='' style='' class='' title=''  collapsed=false  params='' deprecated...>
<@deprecatedWarning args=deprecated />
<div class="card mb-3<#if color!=''> card-${color}<#else> card-transparent</#if> card-outline<#if style!=''> text-${style}</#if><#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#if title =''>
<#nested>
<#else>
<@boxHeader title=title collapsed=isCollapsed params=params skipHeader=true />
<@boxBody collapsed = collapsed>
<#nested>
</@boxBody>
</#if>
</div>
</#macro>

<#--
Macro: boxBody
Description: Generates an HTML element for a box body with an optional class, alignment, and collapse state.
Parameters:
@param - class - string - optional - of the box body element.
@param - collapsed - boolean - optional - body should be initially collapsed.
@param - align - string - optional - of the box body element.
@param - id - string - optional - the box body element. If not provided, a default ID will be generated.
@param - params - string - optional - to include in the box body element.
-->
<#macro boxBody class='' collapsed=false align='' id='' params=''>
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
<div class="card-body bg-white<#if class!=''> ${class}</#if>" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</div>
</#macro>

<#--
Macro: boxFooter
Description: Generates an HTML element for a box footer with an optional class and alignment.
Parameters:
@param - class - string - optional - of the box footer element.
@param - align - string - optional - of the box footer element.
@param - id - string - optional - the box footer element. If not provided, a default ID will be generated.
@param - params - string - optional - to include in the box footer element.
-->
<#macro boxFooter class='' align='' id='' params=''>
<#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
<div class="card-footer<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</div>
</#macro>

<#--
Macro: boxHeader
Description: Generates an HTML element for a box header with an optional title, ID, class, and box tools.
Parameters:
@param - title - string - optional - the box header.
@param - i18nTitleKey - string - optional - of the title of the box header.
@param - hideTitle - list - optional - screen sizes to hide the title of the box header on.
@param - showTitle - boolean - optional - the title of the box header.
@param - id - string - optional - the box header element. If not provided, a default ID will be generated.
@param - class - string - optional - of the box header element.
@param - params - string - optional - to include in the box header element.
@param - boxTools - boolean - optional - box tools in the header.
@param - titleLevel - string - optional - level for the title of the box header.
@param - skipHeader - boolean - optional - the box header element entirely.
-->
<#macro boxHeader title='' i18nTitleKey='' titleClass='' hideTitle=[] collapsed=false showTitle=true id='' class='' params='' boxTools=false titleLevel='h3' skipHeader=false>
<div class="card-header<#if class!=''> ${class}</#if><#if skipHeader> skip-header</#if>"<#if id!=''> id="${id}"</#if><#if params !=''> ${params}</#if>>
	<${titleLevel} class="card-title<#if titleClass!=''> ${titleClass}</#if><#if showTitle=false> visually-hidden</#if>"><#if title!=''>${title}</#if><#if i18nTitleKey!=''>#i18n{${i18nTitleKey}}</#if></${titleLevel}>
	<#local nested><#nested></#local>
	<#if nested?has_content>
	<div class="ms-auto">
		<#nested>
	</div>
	</#if>
</div>
</#macro>

<#--
Macro: breadcrumbItem
Description: Generates an HTML element for a breadcrumb item.
Parameters:
@param - class - string - optional - of the breadcrumb item.
@param - id - string - optional - the breadcrumb item element.
@param - params - string - optional - to include in the breadcrumb item element.
-->
<#macro breadcrumbItem class='' id='' params=''>
<li class="breadcrumb-item<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</li>
</#macro>

<#--
Macro: breadcrumbs

Description: Generates an HTML element for breadcrumbs.

Parameters:
@param - id - string - optional - the breadcrumbs element.
@param - class - string - optional - of the breadcrumbs element.
@param - params - string - optional - to include in the breadcrumbs element.
-->
<#macro breadcrumbs id='' class='' params=''>
<nav aria-label="breadcrumb">
	<ol class="breadcrumb<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</ol>
</nav>
</#macro>

<#-- Macro: btnGroup

Description: Generates a button group container with customizable attributes.

Parameters:
@param - id - string - optional - of the container.
@param - class - string - optional - to add to the container.
@param - align - string - optional - the container's content.
@param - size - string - optional - the container.
@param - params - string - optional - add to the container.
@param - ariaLabel - string - optional - of the container.
@param - hide - array - optional - breakpoints to hide the container.
@param - deprecated - string - optional - that the macro is deprecated.
-->
<#macro btnGroup id='' class='' align='' size='' params='' ariaLabel='' hide=[]   deprecated...>
<@deprecatedWarning args=deprecated />	
<#local class += ' ' + displaySettings(hide,'inline-flex') + ' ' + alignmentSettings(align,'') />
<div class="btn-group<#if size!=''> btn-group-${size}</#if><#if class!=''> ${class?trim}</#if>" role="group"<#if ariaLabel!=''> aria-label="${ariaLabel}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</div>
</#macro>

<#-- Macro: btnGroupRadioCheckbox

Description: Generates a radio button or checkbox within a button group.

Parameters:
@param - type - string - optional - input, either 'checkbox' or 'radio'.
@param - color - string - optional - the button, defaults to 'primary'.
@param - size - string - optional - the button.
@param - name - string - optional - of the input.
@param - id - string - optional - of the input.
@param - params - string - optional - add to the input.
@param - ariaLabel - string - optional - of the input.
@param - labelFor - string - optional - the label for the input.
@param - labelKey - string - optional - of the label for the input.
@param - labelParams - string - optional - add to the label.
@param - tabIndex - string - optional - of the input.
@param - value - string - optional - of the input.
@param - checked - boolean - optional - is checked by default.
-->
<#macro btnGroupRadioCheckbox type='checkbox' color='primary' size='' name='' id='' params='' ariaLabel='' labelFor='' labelKey='' labelParams='' tabIndex='' value='' checked=false>
<label class="btn btn-${color}<#if size!=''> btn-${size}</#if>" for="${labelFor}"<#if labelParams!=''> ${labelParams}</#if>>
<input type="${type}" name="${name}" id="${id}" autocomplete="off"<#if value!=''> value="${value}"</#if><#if params!=''> ${params}</#if><#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if checked> checked</#if> /><#if labelKey!=''><span class="ms-1">${labelKey}<span></#if>
</label>
</#macro>

<#-- Macro: btnToolbar

Description: Generates a button toolbar container with customizable attributes.

Parameters:
@param - id - string - optional - of the container.
@param - class - string - optional - to add to the container.
@param - align - string - optional - the container's content.
@param - ariaLabel - string - optional - of the container.
@param - params - string - optional - add to the container.
-->
<#macro btnToolbar id='' class='' align='' ariaLabel='' params=''>
<#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
<div class="btn-toolbar<#if class!=''> ${class?trim}</#if>" role="toolbar"<#if ariaLabel!=''> aria-label="${ariaLabel}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</div>
</#macro>

<#-- Macro: button

Description: Generates a button with customizable attributes.

Parameters:
@param - name - string - optional - of the button.
@param - id - string - optional - of the button.
@param - type - string - optional - the button, defaults to 'button'.
@param - size - string - optional - the button.
@param - color - string - optional - the button.
@param - style - string - optional - the button.
@param - class - string - optional - to add to the button.
@param - params - string - optional - add to the button.
@param - value - string - optional - of the button.
@param - title - string - optional - of the button.
@param - tabIndex - string - optional - of the button.
@param - hideTitle - array - optional - breakpoints to hide the button title.
@param - showTitle - boolean - optional - the button title.
@param - showTitleXs - boolean - optional - the button title on XS breakpoint.
@param - showTitleSm - boolean - optional - the button title on SM breakpoint.
@param - showTitleMd - boolean - optional - the button title on MD breakpoint.
@param - showTitleLg - boolean - optional - the button title on LG breakpoint.
@param - buttonIcon - string - optional - display in the button.
@param - disabled - boolean - optional - is disabled.
@param - iconPosition - string - optional - the icon, either 'left' or 'right'.
@param - dropdownMenu - boolean - optional - is part of a dropdown menu.
@param - cancel - boolean - optional - cancels a form.
@param - formId - string - optional - the form the button belongs to.
@param - buttonTargetId - string - optional - the target element the button controls.
@param - deprecated - string - optional - that the macro is deprecated.
-->
<#macro button name='' id='' type='button' size='' color='' style='' class='' value='' title='' tooltip='' tabIndex='' hideTitle=[] showTitle=true showTitleXs=true showTitleSm=true showTitleMd=true showTitleLg=true buttonIcon='' disabled=false iconPosition='left' dropdownMenu=false cancel=false formId='' buttonTargetId=''  params='' deprecated...>
<@deprecatedWarning args=deprecated />
<#local params = params />
	<#if cancel || color = 'default' || color='btn-default' || color='btn-secondary' || color='secondary'>
		<#local buttonColor = 'default' />
	<#elseif !cancel && color=''>
		<#local buttonColor = 'primary' />
	<#else>
		<#local buttonColor = color />
	</#if>
	<#-- Visibility of button title -->
	<#local displayTitleClass = displaySettings( hideTitle,'inline-flex') />
	<#-- Visibility of button title: backwards compatibility with Lutece v6, BS3 only -->
	<#local showTitleClass = '' />
	<#if style != ''>
		<#if style?contains('card-control')>
			<#if style?contains('collapse')>
				<#local widgetAction = 'collapse' />
				<script>
					$( function() {
					<#if buttonIcon = 'minus'>
						$("${buttonTargetId}").addClass("show");
					<#else>
						$("${buttonTargetId}").addClass("collapse");
					</#if>
					});
				</script>
			<#elseif style?contains('remove')>
				<#local widgetAction = 'remove' />
			</#if>
			<#local btnStyle = style?replace('collapse|remove', '', 'r')?trim />
		<#elseif style?contains('modal')>
			<#local widgetAction = 'modal' />
			<#local btnStyle = style?replace('modal', '', 'r')?trim />
		<#else>
			<#local btnStyle = style />
		</#if>
	</#if>
	<#-- Size class -->
	<#local buttonSize = '' />
	<#if size?starts_with('style') == true >
		<#local params = params + ' ' + size />
	<#else>
		<#local buttonSize = size />
	</#if>	
	<button class="<#if style!='close'>btn</#if><#if buttonSize!=''> btn-${buttonSize}</#if><#if buttonColor!=''> btn-${buttonColor}</#if><#if btnStyle?? && btnStyle!=''> ${btnStyle}</#if><#if dropdownMenu> dropdown-toggle</#if><#if class!=''> ${class}</#if>" type="${type}"<#if tooltip!=''>title="${tooltip}"<#else><#if title!=''> title="${title}"</#if></#if><#if name!=''> name="${name}"</#if><#if id!=''> id="${id}"</#if><#if value!=''> value="${value}"</#if><#if params!=''> ${params}</#if><#if disabled> disabled</#if><#if dropdownMenu> data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"</#if><#if widgetAction?? && widgetAction!=''><#if widgetAction = 'collapse' || widgetAction = 'modal'> data-bs-toggle="${widgetAction}"<#elseif widgetAction = 'remove'> data-bs-dismiss="alert"</#if></#if><#if buttonTargetId!=''> data-bs-target="${buttonTargetId}"</#if><#if cancel> formnovalidate</#if><#if formId!=''> form="${formId}"</#if>>
		<#if buttonIcon!='' && iconPosition='left'>
			<#local buttonIcon = buttonIcon + ' me-1' />
			<@icon style=buttonIcon />
		</#if>
		<#local nestedContent><#nested /></#local>
		<#local nestedContent = nestedContent?trim />
		<#if nestedContent=''>
			<#if displayTitleClass!=''><span class="${displayTitleClass}"></#if>
				${title}
			<#if displayTitleClass!=''></span></#if>
		</#if>
		<#if nestedContent!='' && !dropdownMenu><#if displayTitleClass!=''><span class="${displayTitleClass}"></#if><#nested><#if displayTitleClass!=''></span></#if></#if>
		<#if buttonIcon!='' && iconPosition='right'>
			<#local buttonIcon = buttonIcon + ' ms-1' />
			<@icon style=buttonIcon />
		</#if>
	</button>
	<#if dropdownMenu>
		<ul class="dropdown-menu"<#if id!=''> id="${id}-content" aria-labelledby="${id}-content"</#if>>
			<#nested>
		</ul>
	</#if>
</#macro>

<#--
Macro: callOut

Description: Generates an HTML callout element with an optional icon and title.

Parameters:
@param - color - string - required - of the callout element.
@param - titleLevel - string - optional - the title element (h1, h2, h3, h4, h5, or h6).
@param - title - string - optional - the callout element.
@param - callOutIcon - string - optional - the icon to include in the callout element.
@param - id - string - optional - the callout element. If not provided, a default ID will be generated.
@param - params - string - optional - to include in the callout element.
-->
<#macro callOut color='' titleLevel='h3' title='' callOutIcon='' id='' params=''>
<div class="alert alert-important alert-${color}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#if title!=''><${titleLevel}><@icon style=callOutIcon /> ${title}</${titleLevel}></#if>
	<#nested>
</div>
</#macro>

<#-- Macro: card

Description: Generates a Bootstrap card container with customizable attributes.

Parameters:
@param - header - boolean - optional - a header in the card.
@param - headerTitle - string - optional - the card header.
@param - headerIcon - boolean - optional - an icon in the card header.
@param - headerTitleIcon - string - optional - display in the card header title.
-->
<#macro card header=false headerTitle='' headerIcon=false headerTitleIcon=''>
<div class="card mb-3">
	<#if header><div class="card-header bg-info"><#if headerIcon><@icon style='${headerTitleIcon}' />&#160;</#if>${headerTitle}</div></#if>
	<div class="card-body">
		<#nested>
	</div>
</div>
</#macro>

<#--
Macro: checkBox

Description: Generates an HTML checkbox element with a specified ID, name, class, label, orientation, value, tabindex, title, disabled, readonly, checked, parameters, and mandatory flag.

Parameters:
@param - name - string - required - the checkbox element.
@param - id - string - optional - the checkbox element.
@param - class - string - optional - add to the checkbox element.
@param - labelKey - string - optional - the checkbox element.
@param - orientation - string - optional - the checkbox element, either "vertical" (default) or "switch".
@param - value - string - optional - the checkbox element.
@param - tabIndex - string - optional - the checkbox element.
@param - title - string - optional - the checkbox element.
@param - disabled - boolean - optional - element is disabled.
@param - readonly - boolean - optional - element is readonly.
@param - checked - boolean - optional - element is checked.
@param - params - string - optional - add to the HTML code.
@param - mandatory - boolean - optional - element is mandatory.
-->
<#macro checkBox name id='' class='' labelKey='' labelClass='' orientation='vertical' value='' tabIndex='' title='' disabled=false readonly=false checked=false params='' mandatory=false deprecated...>
<@deprecatedWarning args=deprecated />	
<#if id = ''><#local id = name /></#if>
<#if orientation!='switch'>
	<#if orientation='vertical'><div class="custom-control custom-checkbox"<#if params!=''> ${params}</#if>></#if>
	<input type="checkbox" class="custom-control-input<#if class!=''> ${class}</#if>" id="${id}" name="${name}"<#if value!=''> value="${value}"</#if><#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if checked> checked</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if mandatory> required</#if> />
	<label class="custom-control-label<#if orientation!='vertical'> checkbox-inline</#if><#if labelClass!=''> ${labelClass!}</#if>" for="${id}" <#if title!=''> title="${title}"</#if>>
	<#if labelKey!=''>${labelKey}<#else><#nested></#if>
	</label>
	<#if orientation='vertical'></div></#if>
<#else>
	<label class="form-check form-switch" for="${id}" <#if title!=''> title="${title}"</#if><#if params!=''> ${params}</#if>>
    	<input class="form-check-input<#if class!=''> ${class}</#if>" type="checkbox"  id="${id}" name="${name}" value="<#if value!=''>${value}</#if>"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if checked> checked</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if params!=''> ${params}</#if><#if mandatory> required</#if>>
   		<span class="form-check-label<#if labelClass!=''> ${labelClass!}</#if>"><#if labelKey!=''>${labelKey}<#else><#nested></#if></span>
  </label>
</#if>
</#macro>

<#--
Macro: codeHighLight

Description: Adds syntax highlighting to code blocks using the Prism.js library.
-->
<#macro codeHighLight >
<link rel="stylesheet" href="js/admin/lib/prism/prism.css">
<link rel="stylesheet" href="js/admin/lib/prism/prism-live.css">
<script src="js/admin/lib/prism/prism.js"></script>
<script src="js/admin/lib/prism/prism-live.js"></script>
</#macro>

<#-- Macro: coloredBg

Description: Wraps content in an element with a colored background.

Parameters:
- color (string): the color of the background, using a Bootstrap color class (e.g. "primary", "secondary", "success", "info", "warning", "danger", "light", or "dark").
@param - type - string - optional - the element to use (e.g. "div", "p", "span", etc.).
@param - id - string - optional - the element.
@param - params - string - optional - add to the element.
-->
<#macro coloredBg color='' type='p' id='' params=''>
<${type} class="bg-${color}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</${type}>
</#macro>

<#--
Macro: columns

Description: Generates a grid column using the Bootstrap grid system with responsive options for offset, push, pull, and order.

Parameters:
@param - tag - string - optional - to use for the column element (e.g. "div", "section", "article", etc.).
- offset* (integer, optional): the number of columns to offset the column on extra small screens.
@param - offsetSm - integer - optional - columns to offset the column on small screens.
@param - offsetMd - integer - optional - columns to offset the column on medium screens.
@param - offsetLg - integer - optional - columns to offset the column on large screens .
@param - offsetXl - integer - optional - columns to offset the column on extra large screens.
@param - offset - map - optional - screen sizes and corresponding offset values. Overrides offsetXs, offsetSm, offsetMd, offsetLg, offsetXl if provided.
@param - pushXs - integer - optional - columns to push the column on extra small screens.
@param - pushSm - integer - optional - columns to push the column on small screens.
@param - pushMd - integer - optional - columns to push the column on medium screens.
@param - pushLg - integer - optional - columns to push the column on large screens .
@param - pushXl - integer - optional - columns to push the column on extra large screens.
@param - pullXs - integer - optional - columns to pull the column on extra small screens.
@param - pullSm - integer - optional - columns to pull the column on small screens.
@param - pullMd - integer - optional - columns to pull the column on medium screens.
@param - pullLg - integer - optional - columns to pull the column on large screens .
@param - pullXl - integer - optional - columns to pull the column on extra large screens.
@param - xs - integer - optional - columns the column should span on extra small screens.
@param - sm - integer - optional - columns the column should span on small screens.
@param - md - integer - optional - columns the column should span on medium screens.
@param - lg - integer - optional - columns the column should span on large screens .
@param - xl - integer - optional - columns the column should span on extra large screens.
- order (map or integer, optional): a map of screen sizes and corresponding order values, or a single order value that applies to all screen sizes.
@param - id - string - optional - the column element.
@param - class - string - optional - of the column element.
@param - align - string - optional - of the column element (left, right, center, justify).
@param - collapsed - boolean - optional - the "collapse" class to the column element (useful for hiding/showing columns).
@param - params - string - optional - to include in the column elemen
-->
<#macro columns tag='div' offsetXs=0 offsetSm=0 offsetMd=0 offsetLg=0 offsetXl=0 offset={} pushXs=0 pushSm=0 pushMd=0 pushLg=0 pushXl=0 pullXs=0 pullSm=0 pullMd=0 pullLg=0 pullXl=0 xs=0 sm=0 md=0 lg=0 xl=0 order={} id='' class='' align='' collapsed=false params=''>
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<#if align!=''><#local class+= ' ' + alignmentSettings(align,'') /></#if>
<#local class += ' ' + responsiveDisplay('col',{'xs':xs, 'sm':sm, 'md':md, 'lg':lg, 'xl':xl}) />
<#if offset?has_content>
	<#local class += ' ' + responsiveDisplay('offset',offset) />
<#elseif offsetXs &gt; 0 || offsetSm &gt; 0 || offsetMd &gt; 0 || offsetLg &gt; 0 || offsetXl &gt; 0>
	<#local class += ' ' + responsiveDisplay('offset',{'xs':offsetXs, 'sm':offsetSm, 'md':offsetMd, 'lg':offsetLg, 'xl':offsetXl}) />
</#if>
<#if order?has_content>
	<#if order?is_number>
		<#local class += ' order-${order}' />
	<#elseif order?is_hash>
		<#local class += ' ' + responsiveDisplay('order',order) />
	</#if>
</#if>
<${tag} class="<#if class?trim!=''>${class?trim}<#else>col</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</${tag}>
</#macro>

<#-- 
Macro: copyElementToClipboard

Description: Attaches a click event listener to the specified element(s) that copies its contents to the clipboard when clicked. The macro also adds a tooltip to the element(s) that indicates it can be clicked to copy, and optionally displays a success or error message after the copy operation.

Parameters:
@param - selector - string - required - for the element(s) to attach the click event listener to.
@param - class - string - optional - to add to the element(s).
@param - showMsg - boolean - optional - a success or error message after the copy operation.
@param - msgDone - string - optional - to display.
@param - msgError - string - optional - to display.

-->
<#macro copyElementToClipboard selector='.copy-content' class='copy-icon' showMsg=true msgDone='#i18n{portal.util.copy.done}' msgError='#i18n{portal.util.copy.error}'>
<script>
const elems = document.querySelectorAll('${selector!}');
elems.forEach(elem => {
	<#if class !=''>elem.classList.add( ${class!} );</#if>
	elem.setAttribute('title', '#i18n{portal.util.labelCopy}');
  	elem.addEventListener('click', () => {
		const selection = window.getSelection();
		const range = document.createRange();
		range.selectNodeContents(elem);
		selection.removeAllRanges();
		selection.addRange(range);
		try {
			document.execCommand('copy');
			selection.removeAllRanges();
		<#if showMsg>
			const original = elem.textContent;
			elem.textContent = '${msgDone}';
			elem.classList.add('msg-success');
			setTimeout(() => {
				elem.textContent = original;
				elem.classList.remove('msg-success');
			}, 1200);
		</#if>
		} catch(e) {
		<#if showMsg>
			const original = elem.textContent;
			elem.textContent = '${msgError}';
			elem.classList.add('msg-error');
			setTimeout(() => {
				elem.textContent = original;
				elem.classList.remove('msg-danger');
			}, 1200);
		</#if>
    	}
  	});
});
</script>
</#macro>

<#-- Macro: deprecatedWarning

Description: Generates a warning message for deprecated or incorrect arguments.

Parameters:
@param - args - map - optional - arguments and their values.
-->
<#macro deprecatedWarning args=[] >
<#if args?size != 0 ><!-- Warning : wrong or deprecated argument(s) : <#list  args?keys as key >${key}, </#list> ... --></#if>
</#macro>

<#--
Macro: div

Description: generate a div element with the specified attributes.

Parameters:
- id (string): ID attribute of the div element (default: '')
- class (string): class attribute of the div element (default: '')
- hide (list): list of display settings to hide the element on specific screen sizes (default: [])
- collapsed (boolean): boolean to determine if the element is initially collapsed (default: false)
- align (string): alignment of the content within the div element (default: '')
- params (string): additional parameters to include in the div element (default: '')

-->
<#macro div id='' class='' hide=[] collapsed=false align='' params=''>
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
<#if hide??><#local class += ' ' + displaySettings(hide,'block') /></#if>
<div<#if class?trim!=''> class="${class?trim}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</div>
</#macro>

<#--
Macro: dropdownItem

Description: Generates an HTML list item element that serves as a dropdown menu item, with a specified class, href, target, title, ID, and parameters.

Parameters:
@param - class - string - optional - add to the list item.
@param - href - string - required - the dropdown menu item.
@param - target - string - optional - the dropdown menu item.
@param - title - string - optional - the dropdown menu item.
@param - id - string - optional - the list item.
@param - params - string - optional - add to the HTML code.
-->
<#macro dropdownItem class='' href='' target='' title='' id='' params=''>
<li>
	<a href="${href}" class="dropdown-item<#if class!=''> ${class}</#if>" title="${title}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if target!=''> target="${target}"</#if>>${title}</a>
</li>
</#macro>

<#--
Macro: dropdownList

Description: Generates a dropdown menu list element with a specified ID and additional parameters.

Parameters:
@param - id - string - optional - the dropdown menu list.
@param - params - string - optional - add to the HTML code.
-->
<#macro dropdownList id='' params=''>
<div class="dropdown-menu"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</div>
</#macro>

<#--
Macro: dropdownMenu

Description: Generates a dropdown menu element with a specified class, ID, and additional parameters.

Parameters:
@param - class - string - optional - add to the dropdown menu.
@param - id - string - optional - the dropdown menu.
@param - params - string - optional - add to the HTML code.
-->
<#macro dropdownMenu class='' id='' params=''>
<ul class="dropdown-menu ${class}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</ul>
</#macro>

<#-- Macro: emailTemplate

Description: Generates an email template using HTML and inline CSS styling.

Parameters:
@param - title - string - optional - display in the email masthead.
@param - footer_link - string - optional - to display in the email footer.
-->
<#macro emailTemplate title='Lutece' footer_link='https://fr.lutece.paris.fr'> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
* { margin: 0; padding: 0; font-size: 100%; font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; line-height: 1.65; }
img { max-width: 100%; margin: 0 auto; display: block; }
body, .body-wrap { width: 100% !important; height: 100%; background: #f8f8f8; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.button { display: inline-block; color: white; background: #007bff; border: solid #007bff; border-width: 10px 20px 8px; font-weight: bold; border-radius: 4px; }
.button:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; line-height: 1.25; }
h1 { font-size: 32px }
h2 { font-size: 28px }
h3 { font-size: 24px }
h4 { font-size: 20px }
h5 { font-size: 16px }
p, ul, ol { font-size: 16px; font-weight: normal; margin-bottom: 20px; }
.container { display: block !important; clear: both !important; margin: 0 auto !important; max-width: 580px !important; }
.container table { width: 100% !important; border-collapse: collapse; }
.container .masthead { padding: 80px 0; background: #007bff; color: white; }
.container .masthead h1 { margin: 0 auto !important; max-width: 90%; text-transform: uppercase; }
.container .content { background: white; padding: 30px 35px; }
.container .content.footer { background: none; }
.container .content.footer p { margin-bottom: 0; color: #888; text-align: center; font-size: 14px; }
.container .content.footer a { color: #888; text-decoration: none; font-weight: bold; }
.container .content.footer a:hover { text-decoration: underline; }
</style>
</head>
<body>
<table class="body-wrap">
<tr>
	<td class="container">
		<!-- Message start -->
		<table>
			<tr>
				<td align="center" class="masthead"> <h1>${title}</h1> </td>
			</tr>
			<tr>
				<td class="content"><#nested></td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td class="container">
		<!-- Message start -->
		<table>
			<tr>
				<td class="content footer" align="center">
					<p><a href="${footer_link}">Lutece</a></p>
				</td>
			</tr>
		</table>
	</td>
</tr>
</table>
</body>
</html>		
</#macro>

<#-- Macro: empty

Description: Generates an empty state message with an optional icon, image, title, subtitle, and action button.

Parameters:
@param - title - string - optional - of the empty state message.
@param - subtitle - string - optional - the empty state message.
@param - iconName - string - optional - the icon to use, using the Themify Icon font (e.g. "mood-empty", "heart", "star", etc.).
@param - img - string - optional - the image to display.
@param - actionTitle - string - optional - the action button.
@param - actionBtn - string - optional - the action button, using a Bootstrap color class (e.g. "primary", "secondary", "success", "info", "warning", "danger", "light", or "dark").
@param - actionIcon - string - optional - the icon to use for the action button, using the Themify Icon font.
@param - actionUrl - string - optional - link to when the action button is clicked.
-->
<#macro empty title='' subtitle='' id='' class='' iconName='mood-empty' iconClass='' img='' imgClass='' actionTitle='' actionBtn='primary' actionIcon='plus' actionClass='' actionUrl='#'>
<div class="empty<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if>>
<#if img=''>
	<div class="empty-icon<#if iconClass!=''> ${iconClass}</#if>"><@icon prefix='ti ti-' style='${iconName}' params='style="font-size:48px"' /></div>
<#else>
	<div class="empty-img<#if imgClass!=''> ${imgClass}</#if>"><img src="${img}" height="128" alt=""></div>
</#if>
	<p class="empty-title"><#if title=''>#i18n{portal.util.message.emptyTitle}	<#else>${title}</#if></p>
<#if subtitle !=''>
	<p class="empty-subtitle text-muted">${subtitle}</p>
	<#else>
		<p class="empty-subtitle text-muted">#i18n{portal.util.message.emptySubTitle}</p>
</#if>
<#if actionTitle !=''>
	<div class="empty-action<#if actionClass!=''> ${actionClass}</#if>">
		<a href="${actionUrl}" class="btn btn-${actionBtn}"><#if actionIcon !=''><@icon prefix='ti ti-' style='${actionIcon}' /></#if> ${actionTitle}</a>
	</div>
</#if>
</div>
</#macro>

<#-- 
Macro: errorPage

Description: Generates an error page with a custom color, type, and ID, as well as internationalized error messages and a back button.

Parameters:
@param - color - string - optional - the error message and button, using a Bootstrap color class (e.g. "danger").
@param - errorType - string - required - error, such as "404" or "500".
@param - id - string - optional - the error page container.
@param - params - string - optional - be added to the error page container.
-->
<#macro errorPage color='' errorType='' id='' params=''>
<div class="error-page"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<h2 class="headline text-${color}">${errorType}</h2>
	<div class="error-content">
		<h3>
			<@icon style='warning' class='text-${color}' />
			<#if errorType=='404'>
				#i18n{portal.util.error404.title}
			<#elseif errorType='500'>
				#i18n{portal.util.error500.title}
			<#else>...
			</#if>
		</h3>
		<p>
			<#if errorType=='404'>
				#i18n{portal.util.error404.text} 
			<#elseif errorType='500'>
				#i18n{portal.util.error500.text} 
			<#else>...
			</#if>
		</p>
		<@aButton href='' size='' color='bg-${color}' style='btn-flat'>
			<@icon style='home' />
			#i18n{portal.util.labelBackHome}
		</@aButton>
	</div>
</div>
</#macro>

<#--
Macro: fieldSet

Description: Generates a fieldset element with a specified class, ID, legend, and additional parameters.

Parameters:
@param - class - string - optional - add to the fieldset.
@param - fieldsetId - string - optional - the fieldset.
@param - fieldsetParams - string - optional - add to the fieldset.
@param - legend - string - optional - use as the legend for the fieldset.
@param - legendClass - string - optional - add to the legend.
@param - legendId - string - optional - the legend.
@param - legendIcon - string - optional - the icon to use in the legend.
@param - legendParams - string - optional - add to the legend.
@param - hideLegend - list - optional - that, if non-empty, hide the legend.
@param - disabled - boolean - optional - fieldset is disabled.
-->
<#macro fieldSet class='' fieldsetId='' fieldsetParams='' legend='' legendClass='' legendId='' legendIcon='' legendParams='' hideLegend=[] disabled=false>
<fieldset class="mb-3<#if class!=''> ${class}</#if>"<#if fieldsetId!=''> id="${fieldsetId}"</#if><#if fieldsetParams!=''> ${fieldsetParams}</#if><#if disabled> disabled</#if>>
<#if legend!=''>
	<#local legendClass += ' ' +  displaySettings(hideLegend,'block') />
	<legend<#if legendClass!=''> class="${legendClass?trim}"</#if><#if legendId!=''> id="${legendId}"</#if><#if legendParams!=''> ${legendParams}</#if>><#if legendIcon!=''><@icon style=legendIcon /> </#if>${legend}</legend>
</#if>
<#nested>
</fieldset>
</#macro>

<#-- 
Macro: formField

Description: Generates a form row with the specified CSS class.

Parameters:
@param - class - string - optional - add to the form row.
-->
<#macro formField class=''>
<div class="form-row mb-3<#if class!=''> ${class}</#if>">
<#nested>
</div>
</#macro>

<#-- Macro: formGroup

Description: Generates a Bootstrap form group with a label, input field, and help text.

Parameters:
@param - id - string - optional - the form group.
@param - formStyle - string - optional - (horizontal, inline, or blank).
@param - groupStyle - string - optional - the form group (success or error).
@param - class - string - optional - to add to the form group.
@param - rows - number - optional - rows in the input field.
@param - labelKey - string - optional - for the label text.
@param - labelFor - string - optional - the input field that the label is associated with.
@param - labelId - string - optional - the label element.
@param - labelClass - string - optional - to add to the label element.
@param - helpKey - string - optional - for the help text.
@param - mandatory - boolean - optional - field is mandatory.
@param - hideLabel - list - optional - label properties to hide (e.g. "label", "i18nLabel").
@param - collapsed - boolean - optional - the form group.
@param - params - string - optional - add to the form group element.
-->
<#macro formGroup id='' formStyle='horizontal' groupStyle='' class='' rows=1 labelKey='' labelKeyDesc='' labelFor='' labelId='' labelClass='' helpKey='' mandatory=false hideLabel=[] collapsed=false params='' deprecated...>
<@deprecatedWarning args=deprecated />	
<#if groupStyle = 'success'>
	<#local validation = 'is-valid'>
<#elseif groupStyle='error'>
	<#local validation = 'is-invalid'>
</#if>
<#if collapsed><#local class += ' collapse' /></#if>
<div class="form-group<#if formStyle='horizontal'> mb-3</#if><#if class!=''> ${class?trim}</#if><#if validation?? && validation!=''> ${validation}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#local displayLabelClass = displaySettings(hideLabel,'inline-flex') />
<#local labelClass = ''>
<#if rows=1>
	<#if labelKey!='' && formStyle='horizontal'>
		<#local labelClass += ' col-sm-12 col-lg-3 form-label text-right'>
		<#if displayLabelClass?contains('d-none')>
			<#local divClass='col'>
		<#else>
			<#local divClass = 'col-lg-6'>
		</#if>
	<#elseif formStyle = 'inline'>
		<#local divClass = 'mb-2 mr-sm-2'>
		<#local labelClass += ' mr-2' />
	<#else>
		<#local divClass='col-sm-12 offset-lg-3 col-lg-6'>
	</#if>
<#else>
	<#local labelClass += ' form-label'>
	<#local divClass = 'col-sm-12'>
</#if>
<#if labelKey!=''>
	<@formLabel class=labelClass?trim labelFor=labelFor labelKeyDesc=labelKeyDesc labelId=labelId labelKey=labelKey hideLabel=hideLabel mandatory=mandatory />
</#if>
<#assign propagateMandatory = mandatory>
<#nested>
<#assign propagateMandatory = false>
<#if helpKey!=''><#if formStyle!='inline'><p></#if><small class="text-muted form-text"<#if labelFor!=''> aria-describedby="${labelFor}"</#if>>${helpKey}</small><#if formStyle!='inline'></p></#if></#if>
</div>
</#macro>

<#-- Macro: formHelp

Description: Generates help text for a Bootstrap form group.

Parameters:
@param - style - string - optional - the help text (inline or popover).
@param - class - string - optional - to add to the help text element.
@param - labelFor - string - optional - the input field that the help text is associated with.

-->
<#macro formHelp style='inline' class='' labelFor=''>
<#if style='inline'>
	<small class="text-muted<#if style!='inline'> form-text</#if><#if class!=''> ${class}</#if>" <#if labelFor!=''>aria-describedby="${labelFor}"</#if>>
	<#nested>
	</small>
<#else>
	<span class="form-help" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover" data-bs-html="true" data-bs-content="<#nested>">?</span>
</#if>
</#macro>

<#-- Macro: formLabel

Description: Generates a label for a Bootstrap form group.

Parameters:
@param - class - string - optional - to add to the label element.
@param - labelFor - string - optional - the input field that the label is associated with.
@param - labelId - string - optional - the label element.
@param - labelKey - string - optional - for the label text.
@param - hideLabel - list - optional - label properties to hide (e.g. "label", "i18nLabel").
@param - mandatory - boolean - optional - field is mandatory.
- deprecated: whether the macro is deprecated.

-->
<#macro formLabel class='form-label' labelFor='' labelId='' labelKey='' labelKeyDesc='' hideLabel=[] mandatory=false deprecated...>
<@deprecatedWarning args=deprecated />	
<#local labelClass = ' ' + displaySettings(hideLabel,'') />
<label class="<#if mandatory=true> required</#if><#if class !=''> ${class?trim}</#if><#if hideLabel?seq_contains('all')> visually-hidden</#if>"<#if labelFor!=''> for="${labelFor}"</#if><#if labelId!=''> id="${labelId}"</#if>>
<#if labelKey?trim !=''><#if labelClass?trim !=''><span class="${labelClass}"></#if>${labelKey}<#if labelClass?trim !=''></span></#if><#if labelKeyDesc?trim !=''><span class="form-label-description">${labelKeyDesc}</span></#if><#else><#nested></#if>
</label>
</#macro>

<#-- Macro: icon
Description: Generates an icon element with customizable attributes.
Parameters:
@param - prefix - string - optional - the icon library.
@param - style - string - optional - the icon.
@param - class - string - optional - to add to the icon.
@param - title - string - optional - of the icon.
@param - id - string - optional - of the icon.
@param - params - string - optional - add to the icon.
-->
<#macro icon prefix='ti ti-' style='' class='' title='' id='' params='' deprecated...>
<@deprecatedWarning args=deprecated />
<#-- Compat from Font Awesome to Tabler Icons -->
<#local cssStyle = ' ' + style?keep_after(' ') />
<#local tiStyle = style?keep_before(' ') />
<#switch tiStyle>
    <#case 'cog'>
        <#local iconStyle = 'settings' />
        <#break>
    <#case 'wrench'>
        <#local iconStyle = 'tool' />
        <#break>
    <#case 'remove'>
    <#case 'times'>
        <#local iconStyle = 'x' />
        <#break>
    <#case 'puzzle-piece'>
        <#local iconStyle = 'puzzle' />
        <#break>
    <#case 'desktop'>
        <#local iconStyle = 'device-desktop' />
        <#break>
    <#case 'tablet'>
        <#local iconStyle = 'device-tablet' />
        <#break>
    <#case 'mobile'>
        <#local iconStyle = 'device-mobile' />
        <#break>
    <#case 'shield-alt'>
        <#local iconStyle = 'shield' />
        <#break>
    <#case 'eye-slash'>
        <#local iconStyle = 'eye-off' />
        <#break>
    <#case 'envelope'>
        <#local iconStyle = 'mail' />
        <#break>
    <#case 'id-card'>
        <#local iconStyle = 'id' />
        <#break>
    <#case 'user-secret'>
        <#local iconStyle = 'user-question' />
        <#break>
    <#case 'id-card'>
        <#local iconStyle = 'id' />
        <#break>
    <#case 'list-alt'>
        <#local iconStyle = 'list' />
        <#break>
    <#case 'arrows-alt'>
        <#local iconStyle = 'arrows-maximize' />
        <#break>
    <#case 'sync'>
    <#case 'redo'>
        <#local iconStyle = 'refresh' />
        <#break>
    <#case 'play'>
        <#local iconStyle = 'player-play-filled' />
        <#break>
    <#case 'stop'>
        <#local iconStyle = 'player-stop-filled' />
        <#break>
    <#case 'sort'>
    <#case 'arrows'>
        <#local iconStyle = 'arrows-sort' />
        <#break>
    <#case 'step-forward'>
        <#local iconStyle = 'switch-horizontal' />
        <#break>
    <#case 'file-pdf-o'>
        <#local iconStyle = 'pdf' />
        <#break>
    <#case 'file-alt'>
        <#local iconStyle = 'forms' />
        <#break>
    <#case 'sticky-note'>
        <#local iconStyle = 'align-box-left-top' />
        <#break>
    <#case 'check-square'>
        <#local iconStyle = 'square-check' />
        <#break>
    <#case 'dot-circle'>
        <#local iconStyle = 'circle-dot' />
        <#break>
    <#case 'hashtag'>
        <#local iconStyle = 'hash' />
        <#break>
    <#case 'image'>
        <#local iconStyle = 'photo' />
        <#break>
    <#case 'comment'>
        <#local iconStyle = 'message' />
        <#break>
    <#case 'futbol'>
        <#local iconStyle = 'gavel' />
        <#break>
    <#case 'map-marked-alt'>
        <#local iconStyle = 'map-pin' />
        <#break>
    <#case 'phone-square'>
        <#local iconStyle = 'phone' />
        <#break>
    <#case 'list-ol'>
        <#local iconStyle = 'list-numbers' />
        <#break>
    <#case 'th-list'>
        <#local iconStyle = 'list-details' />
        <#break>
    <#case 'question'>
        <#local iconStyle = 'question-mark' />
        <#break>
    <#case 'vote-yea'>
        <#local iconStyle = 'thumb-up' />
        <#break>
    <#case 'comments'>
        <#local iconStyle = 'messages' />
        <#break>
    <#case 'plus-circle'>
        <#local iconStyle = 'circle-plus' />
        <#break>
    <#default>
        <#local iconStyle = style />
</#switch>
<#if cssStyle?trim !=''><#local iconStyle = iconStyle + cssStyle /></#if>
<i class="${prefix}${iconStyle}<#if class!=''> ${class}</#if>" aria-hidden="true"<#if title!=''> title='${title}'</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>></i>
</#macro>

<#-- Macro: iconStack

Description: Generates a stack of icons.

Parameters:
@param - class - string - optional - for the icon stack.
@param - id - string - optional - for the icon stack.
@param - params - string - optional - add to the icon stack.
-->
<#macro iconStack class='fa-2x' id='' params=''>
<span class="fa-stack ${class}"<#if id!=''> ${id}</#if><#if params!=''> ${params}</#if>>
<#nested>
</span>
</#macro>

<#--
Macro: img

Description: Generates an HTML image element with a specified URL, alternative text, title, class, and ID.

Parameters:
@param - url - string - required - the image.
@param - alt - string - optional - to display if the image cannot be loaded or for accessibility purposes.
@param - title - string - optional - the image.
@param - class - string - optional - add to the image element.
@param - id - string - optional - the image element.
@param - params - string - optional - add to the HTML code.
-->
<#macro img url='' alt='' title='' class='img-fluid' id='' params=''> 
<img src="${url}" alt="<#if alt!=''>${alt!}<#else>${title!}</#if>" title="${title}"<#if class!=''> class=" ${class}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> />
</#macro>

<#-- Macro: infoBox

Description: Generates an information box.

Parameters:
@param - color - string - optional - the info box.
@param - boxText - string - optional - display in the info box.
@param - boxIcon - string - optional - display in the info box.
@param - boxNumber - string - optional - display in the info box.
@param - unit - string - optional - display after the number.
@param - bgColor - string - optional - of the info box.
@param - progressBar - string - optional - the progress bar (0-100).
@param - progressDescription - string - optional - display below the progress bar.
@param - id - string - optional - of the info box.
@param - params - string - optional - add to the info box.
-->
<#macro infoBox color='' boxText='' boxIcon='' boxNumber='' unit='' bgColor='' progressBar='' progressDescription='' id='' params=''>
<div class="card m-2 box-widget<#if bgColor!=''> ${bgColor}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<div class="card-body">
		<span class="info-box-icon<#if color!=''> ${color}</#if>"><@icon style=boxIcon /></span><#if boxText !=''><span class="info-box-text ml-2">${boxText}</span></#if>
		<div class="info-box-content">
			<#if boxNumber!='0'><span class="info-box-number">${boxNumber?trim}<#if unit!=''> <small>${unit}</small></#if></span></#if>
			<#if bgColor!='' && progressBar!=''><div class="progress"><div class="progress-bar" style="width: ${(boxNumber?trim?number/progressBar?trim?number*100)?string.computer}%"></div></div></#if>
			<#if progressDescription!=''><span class="progress-description">${progressDescription}</span></#if>
			<#nested />
		</div>
	</div>
</div>
</#macro>

<#-- Macro: initToast
Description: Initializes a Polipop instance for displaying Bootstrap toast notifications.
Parameters:
@param - layout - string - optional - the notifications ("popups" or "list").
@param - position - string - optional - the notifications on the screen ("top-left", "top-right", "bottom-left", or "bottom-right").
@param - closer - boolean - optional - a close button on the notifications.
@param - sticky - boolean - optional - should be sticky (i.e., remain on the screen until closed by the user).
@param - progressbar - boolean - optional - a progress bar for the notifications.
@param - insert - string - optional - the DOM where the notifications should be inserted ("before" or "after").
@param - theme - string - optional - the notifications (a string corresponding to a Bootstrap color class).
@param - duration - integer - optional - milliseconds that the notifications should be displayed before disappearing.
@param - pool - integer - optional - of notifications that can be displayed at the same time.
-->
<#macro initToast class='' id='' position='top-0 end-0' showAll=true autohide=false animation=true duration=2000 params='' deprecated...>
<@deprecatedWarning args=deprecated />
<div aria-live="polite" aria-atomic="true" class="position-static z-3">
	<div<#if id !=''> id="${id}"</#if> class="toast-container ${position} p-3<#if class !=''> ${class}</#if>"<#if params !=''> ${params}"</#if>>
	<#nested>
	</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const toastElList = [].slice.call(document.querySelectorAll('.toast'))
    const option = { delay: ${duration}, animation: ${animation?c}, autohide: ${autohide?c} }
    const toastList = toastElList.map( function( toastEl, option ) {
        return new bootstrap.Toast( toastEl )
    })
    <#if showAll>toastList.forEach( toast => toast.show())</#if>
});
</script>
</#macro>

<#-- Macro intiTooltip 
-- Options
allowList	object	Default value	Object which contains allowed attributes and tags.
animation	boolean	true	Apply a CSS fade transition to the tooltip.
boundary	string, element	'clippingParents'	Overflow constraint boundary of the tooltip (applies only to Popper’s preventOverflow modifier). By default, it’s 'clippingParents' and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper’s detectOverflow docs.
container	string, element, false	false	Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
customClass	string, function	''	Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'. You can also pass a function that should return a single string containing additional class names.
delay	number, object	0	Delay showing and hiding the tooltip (ms)—doesn’t apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { "show": 500, "hide": 100 }.
fallbackPlacements	array	['top', 'right', 'bottom', 'left']	Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper’s behavior docs.
html	boolean	false	Allow HTML in the tooltip. If true, HTML tags in the tooltip’s title will be rendered in the tooltip. If false, innerText property will be used to insert content into the DOM. Use text if you’re worried about XSS attacks.
offset	array, string, function	[0, 0]	Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: data-bs-offset="10,20". When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: skidding, distance. For more information refer to Popper’s offset docs.
placement	string, function	'top'	How to position the tooltip: auto, top, bottom, left, right. When auto is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.
popperConfig	null, object, function	null	To change Bootstrap’s default Popper config, see Popper’s configuration. When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.
sanitize	boolean	true	Enable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized.
sanitizeFn	null, function	null	Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
selector	string, false	false	If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this issue and an informative example. Note: title attribute must not be used as a selector.
template	string	'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'	Base HTML to use when creating the tooltip. The tooltip’s title will be injected into the .tooltip-inner. .tooltip-arrow will become the tooltip’s arrow. The outermost wrapper element should have the .tooltip class and role="tooltip".
title	string, element, function	''	The tooltip title. If a function is given, it will be called with its this reference set to the element that the popover is attached to.
trigger	string	'hover focus'	How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. 'manual' indicates that the tooltip will be triggered programmatically via the .tooltip('show'), .tooltip('hide') and .tooltip('toggle') methods; this value cannot be combined with any other trigger. 'hover' on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.
-->
<#macro initToolTip class='' id='' options='' autohide=false animation=true duration=2000 params='' deprecated...>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    <#if options !=''>const tooltipOptions = {${options}}</#if>
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl<#if options !=''>, tooltipOptions</#if> ))
});
</script>
</#macro>

<#--
Macro: input

Description: Generates an input element for various types of form fields, including text, textarea, password, email, file, number, color, range, tel, and datalist. It also supports various attributes such as size, maxlength, placeholder, disabled, readonly, pattern, title, min, max, and mandatory. Additionally, it can generate date and time pickers using the `getDate`, `getDateTime`, `getTime`, `getDateRange`, and `getDateTimeRange` macros.

Parameters:
- name (string): the name of the input field.
@param - id - string - optional - the input field.
@param - type - string - optional - the input field. Default is `text`.
@param - value - string - optional - of the input field.
@param - class - string - optional - of the input field.
@param - size - string - optional - the input field.
@param - inputSize - int - optional - the input field for some input types.
@param - maxlength - int - optional - of the input field.
@param - placeHolder - string - optional - of the input field.
@param - rows - int - optional - rows for a textarea input.
@param - cols - int - optional - columns for a textarea input.
@param - richtext - boolean - optional - a rich text editor for a textarea input.
@param - tabIndex - int - optional - of the input field.
@param - disabled - boolean - optional - field is disabled.
@param - readonly - boolean - optional - field is readonly.
@param - pattern - string - optional - for the input field.
@param - title - string - optional - of the input field.
@param - min - int - optional - of the input field.
@param - max - int - optional - of the input field.
@param - params - string - optional - the input field.
@param - mandatory - boolean - optional - field is required.
@param - language - string - optional - for date and time pickers.
@param - minDate - string - optional - for date and datetime pickers.
@param - maxDate - string - optional - for date and datetime pickers.
@param - defaultDate - string - optional - for date and datetime pickers.
@param - defaultTime - string - optional - for datetime pickers.
@param - time_24hr - boolean - optional - a 24-hour clock for time pickers.
@param - minTime - string - optional - for time and datetime pickers.
@param - maxTime - string - optional - for time and datetime pickers.
@param - format - string - optional - date and time pickers.
@param - showFormat - string - optional - for date and time pickers.
@param - dateRangeEndId - string - optional - the end date field for date range and datetime range pickers.
@param - dateParams - list - optional - date and time pickers.
@param - showFileUrl - boolean - optional - a link to the uploaded file for file inputs.
@param - fileURL - string - optional - the uploaded file for file inputs.
@param - fileName - string - optional - the uploaded file for file inputs.
- datalist (string, optional): the comma-separated list of options for a datalist input.

-->
<#macro input name id='' type='text' value='' class='' size='' inputSize=0 maxlength=0 placeHolder='' autoComplete='' rows=4 cols=40 richtext=false tabIndex='' disabled=false readonly=false pattern='' title='' min=0 max=0 mandatory=false language=.locale minDate='' maxDate='' defaultDate='' defaultTime='' time_24hr=true minTime='' maxTime='' format='' showFormat='' dateRangeEndId='' dateParams=[] showFileUrl=false fileURL='' fileName='' datalist='' params='' deprecated...>
<@deprecatedWarning args=deprecated />
<#if propagateMandatory?? && propagateMandatory ><#local mandatory = true /></#if>
<#if type='textarea'>
	<textarea name="${name}" class="form-control<#if size!=''> input-${size}</#if><#if class!=''> ${class}</#if><#if richtext> richtext</#if>" rows="${rows}" cols="${cols}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if (mandatory && !richtext)> required</#if><#if labelFor?? && labelFor!='' && helpKey?? && helpKey!=''> aria-describedby="${labelFor}_help"</#if>><#if value!='' >${value}<#else><#nested></#if></textarea>
<#elseif type='text' || type='search' || type='password' || type='email' || type='file' || type='number' || type='color' || type='url'  || type='range' || type='tel' || type='datalist'>
	<input class="form-control<#if size!=''> input-${size}</#if><#if type='color'> input-color</#if><#if class!=''> ${class}</#if>" type="${type}" name="${name}" value="${value}"<#if autoComplete !=''> autocomplete="${autoComplete}"</#if><#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if maxlength &gt; 0> maxlength="${maxlength}"</#if><#if inputSize!=0> size="${inputSize}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if min!=max> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if mandatory> required </#if><#if labelFor?? && labelFor!='' && helpkey?? && helpKey!=''> aria-describedby="${labelFor}_help"</#if><#if type='datalist'> list="${name}_list"</#if>>
	<#if type='file'>
		<input type="hidden" id=${id}Key name="${name}Key" value="${value}" />
		<#if showFileUrl && fileURL?? && fileName??><@link href="${fileURL}">${fileName}</@link></#if>
	</#if>
	<#if type='datalist'>
		<#if id !='' && datalist !='' >
			<datalist id="${name}_list">
			<#assign options = datalist?split(',')>
			<#list options as opt>
				<option value="${opt!}">
			</#list>
			</datalist>
		<#else>
			<!-- Missing id or params attribute for macro @input for type "datalist" -->
		</#if>
	</#if>
<#elseif type='date' || type='datetime' || type='daterange' || type='datetimerange' || type='time'>
	<input class="form-control<#if size!=''> input-${size}</#if><#if class!=''> ${class}</#if>" type="text" name="${name}" value="${value}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if maxlength &gt; 0> maxlength="${maxlength}"</#if><#if inputSize!=0> size="${inputSize}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if min!=max> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if mandatory> required </#if><#if labelFor?? && labelFor!='' && helpkey?? && helpKey!=''> aria-describedby="${labelFor}_help"</#if> />
	<#if type='date'>
		<#if value?has_content>
			<#local defaultDate=value />
		</#if>
		<@getDate idField='${id}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate dateOptions=dateParams />
	<#elseif type='datetime'>
		<#if value?has_content>
			<#local defaultDate=value />
		</#if>
		<@getDateTime idField='${id}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate defaultTime=defaultTime minTime=minTime maxTime=maxTime dateOptions=dateParams />
	<#elseif type='daterange'>
		<#if dateRangeEndId != ''>
			<#if value?has_content>
				<#local defaultDate=value />
			</#if>
			<@getDateRange idField='${id}' idEndField='${dateRangeEndId}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate dateOptions=dateParams />
		<#else>
			<@alert class='danger'>${i18n("portal.util.datepicker.rangeEndId.mandatory")}</@alert>
		</#if>
	<#elseif type='datetimerange'>
		<#if dateRangeEndId != ''>
			<#if value?has_content>
				<#local defaultDate=value />
			</#if>
			<@getDateTimeRange idField='${id}' idEndField='${dateRangeEndId}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate defaultTime=defaultTime minTime=minTime maxTime=maxTime dateOptions=dateParams  />
		<#else>
			<@alert class='danger'>${i18n("portal.util.datepicker.rangeEndId.mandatory")}</@alert>
		</#if>
	<#elseif type='time'>
		<#if value?has_content>
			<#local defaultDate=value />
		</#if>
		<@getTime idField='${id}' language=language format='H:i' showFormat='H:i' minTime=minTime maxTime=maxTime time_24hr=time_24hr defaultDate=defaultDate dateOptions=dateParams />
	</#if>
	<#if id=''><@alert class='danger'>${i18n("portal.util.datepicker.id.mandatory")}</@alert></#if>
<#elseif type='html5date' || type='html5datetime' || type='html5time' || type='html5month'>
	<input class="form-control<#if size!=''> input-${size}</#if><#if type='color'> input-color</#if><#if class!=''> ${class}</#if>" type="<#if type='html5date'>date<#elseif type='html5datetime'>datetime-local<#elseif type='html5time'>time<#elseif type='html5month'>month<#else>unsupported date type</#if>" name="${name}" value="${value}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if inputSize!=0> size="${inputSize}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if min!=max> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if mandatory> required </#if><#if labelFor?? && labelFor!='' && helpkey?? && helpKey!=''> aria-describedby="${labelFor}_help"</#if>
	>
<#elseif type='hidden'>
	<input type="hidden" name="${name}" <#if id!=''>id="${id}"</#if> value="${value}" />
<#else><@alert class='danger'>${i18n("portal.util.message.unsupportedType")}</@alert>
</#if>
</#macro>

<#--
Macro: inputGroup

Description: Wraps form elements inside an input group div, which adds styling and functionality such as prepend/append icons and buttons.

Parameters:
@param - id - string - optional - the input group div.
@param - class - string - optional - of the input group div.
@param - size - string - optional - the input group div.
@param - params - string - optional - the input group div.
-->
<#macro inputGroup id='' class='' size='' params='' deprecated...>
<@deprecatedWarning args=deprecated />
<div class="input-group<#if size!=''> input-group-${size}</#if><#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</div>
</#macro>

<#--
Macro: inputGroupItem

Description: Generates an input group item, which can be used to add buttons, text, or other form elements to an input group.

Parameters:
@param - id - string - optional - the input group item.
@param - pos - string - optional - the input group item relative to the input field. Can be 'append' or 'prepend'. Default is 'append'.
@param - type - string - optional - the input group item. Can be 'btn', 'icon' or 'text'. Default is 'text'.
@param - params - string - optional - the input group item.
-->
<#macro inputGroupItem id='' class='' pos='append' type='text'  params='' deprecated...>
<@deprecatedWarning args=deprecated />
<span class="<#if type='icon'>input-icon-addon<#else>input-group-${type}</#if><#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</span>
</#macro>

<#-- Macro: item_navigation

Description: Generates a Bootstrap navigation bar with links to the previous and next items in a list.

Parameters:
- item_navigator (object): an object that contains information about the current and next/previous items in a list.
@param - id - string - optional - the navigation bar.
@param - align - string - optional - the navigation bar (left, right, or center).
@param - hideButtonTitle - list - optional - button titles to hide (e.g. "title", "i18nTitle").
@param - buttonColor - string - optional - the navigation buttons, using a Bootstrap color class (e.g. "primary").
@param - buttonSize - string - optional - the navigation buttons, using a Bootstrap size class (e.g. "lg").
-->
<#macro item_navigation item_navigator id='item-navigator' display='' align='' hideButtonTitle=[] buttonColor='info' buttonSize='sm'>
<#local class = alignmentSettings(align,'') />
<nav id="${id}" class="${class} <#if display!=''>d-inline</#if>">
<#if (item_navigator.currentItemId > 0)>
	<@aButton href='${item_navigator.previousPageLink?xhtml}' title='#i18n{portal.util.labelPrevious}' buttonIcon='arrow-left' color='${buttonColor}' hideTitle=hideButtonTitle size='${buttonSize}' />
</#if>
<#if (item_navigator.currentItemId < item_navigator.listItemSize - 1) >
	<@aButton href='${item_navigator.nextPageLink?xhtml}' title='#i18n{portal.util.labelNext}' buttonIcon='arrow-right' color='${buttonColor}' hideTitle=hideButtonTitle size='${buttonSize}' />
</#if>
</nav>
</#macro>

<#-- Macro: jsTreeInit

Description: Initializes a jstree instance for displaying a tree structure.

Parameters:
@param - id - string - optional - the jstree element.
@param - btntreeSearch - string - optional - the search input field.
@param - multiple - boolean - optional - can be selected.
@param - plugins - list - optional - jstree plugins to use.
@param - style - string - optional - the jstree theme to use.
-->
<#macro jsTreeInit id='tree' btntreeSearch='treesearch' multiple=false plugins=[] style='proton/style.min.css'>
<link rel="stylesheet" href="js/admin/lib/jstree/themes/proton/style.min.css" >
<script src="js/admin/lib/jstree/jstree.min.js"></script>
<script>
$(function(){
	let selectedTree=jsTreeId=localStorage.getItem('jsTreeSelectedId' );

	$('#tree').jstree({
		'core': {
			'multiple' : false,
            'themes': {
                'name': 'proton',
                'responsive': true
            }
        },
	 	'plugins' : [  'search' , 'wholerow' ,'changed'  ]
	}).on('click', function( e ){
		window.location.replace( e.target.getAttributeNode('href').value );
	}).on("changed.jstree", function (e, data) {
		localStorage.setItem( 'jsTreeSelectedId', data.changed.selected );
    });

	$('#tree').jstree( 'select_node', jsTreeId );
   
	var to = false;
	$('#treesearch').keyup(function () {
		if(to) { clearTimeout(to); }
		to = setTimeout(function () {
		var v = $('#treesearch').val();
		$('#tree').jstree(true).search(v);
		}, 250);
	});

});
</script>
</#macro>

<#-- Macro: jsTreeSearch

Description: Generates a form group with a search input and a button to search the jstree.

-->
<#macro jsTreeSearch >
<@formGroup formStyle='inline' labelKey='#i18n{portal.site.admin_page.buttonSearchPage}' hideLabel=['all']>
	<@inputGroup size='sm'>
		<@input type='text' id='tree_search' name='tree_search' placeHolder='#i18n{portal.site.admin_page.buttonSearchPage}' />
		<@inputGroupItem>
			<@button id='btn-tree_search' color='link' type='button' title='#i18n{portal.site.admin_page.buttonSearchPage}' buttonIcon='search' hideTitle=['all'] />
		</@inputGroupItem>
	</@inputGroup>
</@formGroup>
</#macro>

<#-- Macro: li

Description: Generates an HTML list item (<li>) with optional attributes and content.

Parameters:
@param - id - string - optional - of the list item.
@param - params - string - optional - add to the list item, in the form of a string of HTML attributes.
@param - class - string - optional - of the list item.
@param - hide - list - optional - strings representing the CSS display values for hiding the list item at different screen sizes (e.g. ["md:hidden"] to hide the list item on medium screens and up).
@param - align - string - optional - the list item within its parent element ("left", "center", or "right").
-->
<#macro li id='' params='' class='' hide=[] align=''>
<#local class += ' ' + alignmentSettings(align,'') + ' ' + displaySettings(hide,'block') />
<li<#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> ${id}</#if>>
<#nested>
</li>
</#macro>

<#--
Macro: link
Description: Generates an HTML anchor link element with a specified URL, class, ID, name, title, alt text, target, and additional parameters.
Parameters:
@param - href - string - required - the link.
@param - class - string - optional - add to the link element.
@param - id - string - optional - the link element.
@param - name - string - optional - the link element.
@param - title - string - optional - the link element.
@param - alt - string - optional - for the link element.
@param - target - string - optional - the link element, e.g., "_blank".
@param - params - string - optional - add to the HTML code.
-->
<#macro link href='' class='' id='' name='' label='' title='' alt='' target='' params=''>
<a href="${href}"<#if class!=''> class="${class}"</#if><#if id!=''> id="${id}"</#if><#if name!=''> name="${name}"</#if><#if target!=''> target="${target}"</#if><#if title!=''> title="${title}"</#if><#if alt!=''> alt="${alt}"</#if><#if params!=''> ${params}</#if>>
<#if label !=''>${label}<#else><#nested></#if>
</a>
</#macro>

<#-- Macro: listGroup

Description: Generates an HTML unordered list (<ul>) with the Bootstrap "list-group" class and optional attributes.

Parameters:
@param - id - string - optional - of the unordered list.
@param - class - string - optional - of the unordered list.
@param - params - string - optional - add to the unordered list, in the form of a string of HTML attributes.
-->
<#macro listGroup id='' class='' params=''>
<ul class="list-group<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</ul>
</#macro>

<#-- Macro: listGroupItem

Description: Generates an HTML list item (<li>) with the Bootstrap "list-group-item" and "list-group-item-action" classes, and optional attributes.

Parameters:
@param - id - string - optional - of the list item.
@param - class - string - optional - of the list item.
@param - params - string - optional - add to the list item, in the form of a string of HTML attributes.

-->
<#macro listGroupItem id='' class='' active=false params=''>
<li class="list-group-item list-group-item-action<#if class!=''> ${class}</#if><#if active> active</#if>"<#if id!=''> id="${id}"</#if><#if active> aria-current="true"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</li>
</#macro>

<#--
Macro: messages

Description: Generates HTML alert elements for displaying error, info, and warning messages.

Parameters:
@param - errors - list - optional - error messages to display.
@param - infos - list - optional - info messages to display.
@param - warnings - list - optional - warning messages to display.
@param - errors_class - string - optional - of the alert element for error messages.
@param - infos_class - string - optional - of the alert element for info messages.
@param - warnings_class - string - optional - of the alert element for warning messages.
-->

<#macro messages errors=[] infos=[] warnings=[] errors_class="alert alert-danger" infos_class="alert alert-info" warnings_class="alert alert-warning">
<#if errors??>
	<#if errors?size gt 0 >
		<#list errors as error >
			<#local errorMessage=error.message />
		</#list>
		<@alert color='danger' title=errorMessage iconTitle='exclamation-circle' dismissible=true id='messages_errors_div'>	</@alert>
	</#if>
</#if>
<#if infos??>
	<#if infos?size gt 0 >
		<#list infos as info >
			<#local infoMessage=info.message />
		</#list>
		<@alert color='info' title=infoMessage iconTitle='info-circle' dismissible=true id='messages_infos_div'></@alert>
	</#if>
</#if>
<#if warnings??>
	<#if warnings?size gt 0 >
		<#list warnings as warning >
			<#local warningMessage=warning.message />
		</#list>
		<@alert color='warning' title=warningMessage iconTitle='exclamation-circle' dismissible=true id='messages_warnings_div'></@alert>>
	</#if>
</#if>
</#macro>

<#-- Macro: modal
Description: Generates a Bootstrap modal dialog, with optional parameters for the ID, additional attributes, background color, and size.
Parameters:
- id (string): the ID of the modal.
@param - params - string - optional - add to the modal, in the form of a string of HTML attributes.
@param - bgColor - string - optional - of the modal, using a Bootstrap color class (e.g. "bg-primary").
@param - size - string - optional - the modal dialog, using a Bootstrap size class (e.g. "lg").
-->
<#macro modal id params='' bgColor='' size=''>
<div class="modal ${bgColor} fade" id="${id}" <#if params!=''> ${params}</#if>>
	<div class="modal-dialog<#if size!=''> modal-${size}</#if>" role="document">
		<div class="modal-content">
			<#nested>
		</div>
	</div>
</div>
</#macro>

<#-- Macro: modalBody

Description: Generates the body content for a Bootstrap modal dialog, with optional parameters for the ID and additional attributes.

Parameters:
@param - id - string - optional - the modal body.
@param - params - string - optional - add to the modal body, in the form of a string of HTML attributes.
-->
<#macro modalBody id='' params=''>
<div class="modal-body"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</div>
</#macro>

<#-- Macro: modalFooter
Description: Generates the footer content for a Bootstrap modal dialog, with optional parameters for the ID and additional attributes.
Parameters:
@param - id - string - optional - the modal footer.
@param - params - string - optional - add to the modal footer, in the form of a string of HTML attributes.
-->
<#macro modalFooter id='' params=''>
<div class="modal-footer"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</div>
</#macro>

<#-- Macro: modalHeader
Description: Generates the header content for a Bootstrap modal dialog, with optional parameters for the title level, title text, ID, and additional attributes.
Parameters:
@param - titleLevel - string - optional - level for the modal title (default is "h4").
@param - modalTitle - string - optional - of the modal title.
@param - id - string - optional - the modal header.
@param - params - string - optional - add to the modal header, in the form of a string of HTML attributes.
-->
<#macro modalHeader titleLevel='h4' modalTitle='' id='' params=''>
<div class="modal-header"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<${titleLevel} class="modal-title">${modalTitle}</${titleLevel}>
	<#nested>
	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="#i18n{portal.admin_page.buttonClosed}"></button>
</div>
</#macro>

<#-- Macro: nav
Description: Generates a Bootstrap navigation element, such as a tab or pills.
Parameters:
@param - tag - string - optional - to use for the navigation element (default is "nav").
@param - type - string - optional - navigation element (e.g. "tab" or "pill").
@param - class - string - optional - to apply to the navigation element.
@param - id - string - optional - the navigation element.
@param - params - string - optional - add to the navigation element, in the form of a string of HTML attributes.
-->
<#macro nav tag='nav' type='tab' class='' id='' params=''>
<${tag} class="nav nav-${type!}<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</${tag}>
</#macro>

<#-- Macro: navBar
Description: Generates a  navigation bar with the specified tag, class, ID, and parameters.
Parameters:
@param - tag - string - optional - to use for the navigation bar (default is "nav").
@param - class - string - optional - use for the navigation bar.
@param - id - string - optional - use for the navigation bar.
@param - params - string - optional - include in the navigation bar.
-->
<#macro navBar tag='nav' class='' id='' params=''>
<${tag} class="navbar<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</${tag}>
</#macro>

<#-- Macro: navItem
Description: Generates a navigation item with the specified link attributes.
Parameters:
@param - href - string - optional - the navigation item.
@param - name - string - optional - for the navigation item.
@param - active - boolean - optional - item is currently active (default is false).
@param - title - string - optional - for the navigation item.
@param - alt - string - optional - for the navigation item.
@param - target - string - optional - for the navigation item.
@param - tag - string - optional - to use for the navigation item (default is "li").
@param - class - string - optional - use for the navigation item.
@param - id - string - optional - use for the navigation item.
@param - params - string - optional - include in the navigation item.
-->
<#macro navItem href='' name='' active=false title='' alt='' target='' tag='li' class='' id='' params=''>
<${tag} class="nav-link<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#if href !='' >
		<@link class='nav-link' href=href name=name title=title alt=alt target=target active=active /> 
	</#if>
	<#nested>
</#${tag}>
</#macro>

<#--
Macro: offcanvas

Description: Generates an off-canvas component for a sliding panel overlay.

Parameters:
@param - id - string - required - the off-canvas component.
@param - position - string - optional - the off-canvas component ("start", "end", "top", or "bottom").
@param - title - string - optional - the off-canvas component.
@param - btnColor - string - optional - the toggle button.
@param - btnTitle - string - optional - the toggle button.
@param - btnIcon - string - optional - the toggle button.
- backdrop (string, optional, default="true"): whether to show a backdrop when the off-canvas component is open.
@param - size - string - optional - the off-canvas component ("full", "half", "auto", or "sm").
@param - btnSize - string - optional - the toggle button.
@param - targetUrl - string - optional - load content from when the off-canvas component is opened.
@param - targetElement - string - optional - the element to load content into.
@param - redirectForm - boolean - optional - the form when submitted.
-->
<#macro offcanvas id position='start' title='' btnColor='primary' btnTitle='' btnIcon='' btnClass=''  btnSize='' backdrop='true'targetUrl='' targetElement='' redirectForm=true size='auto'>
<@deprecatedWarning args=deprecated />
<a id="btn-${id}" class="btn btn-primary<#if btnColor !=''> btn-${btnColor}</#if><#if btnSize!=''> btn-${btnSize}</#if><#if btnClass!=''> ${btnClass}</#if>" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="${backdrop}" href="#${id}" role="button" aria-controls="${id}">
  <#if btnIcon!="">
    <@icon style=btnIcon />
  </#if>
  <#--  <#if btnIcon!="" && btnTitle!="">&nbsp;</#if>  -->
  <span class="<#if btnClass !=''>${btnClass} </#if>d-none d-md-block">${btnTitle}</span> <#if btnIcon=""><i class="ti ti-arrow-narrow-right"></i></#if>
</a>
<div class="offcanvas offcanvas-end <#if size !=''>w-auto</#if>" data-lutece-load-content-url="${targetUrl}" data-lutece-load-content-target="${targetElement}" data-lutece-redirectForm=<#if redirectForm>true<#else>false</#if> tabindex="-1" id="${id}" aria-labelledby="${id}Label">
  <div class="offcanvas-header text-break <#if title=''>position-absolute end-0 px-2 pt-2 border-0<#else>px-2 py-2 py-md-4 px-md-4</#if>">
      <#if title!=''><h2 class="offcanvas-title fw-bolder" id="${id}Label">${title}</h2></#if>
    <button type="button" class="ms-3 border btn btn-light btn-rounded btn-icon" data-bs-dismiss="offcanvas" aria-label="Close">
      <i class="ti ti-x fs-5"></i>
    </button>
  </div>
  <div id="offcanvas-body-${id}" class="offcanvas-body p-0 px-1 px-md-4 text-break">
    <#nested>
  </div>
</div>
<#if targetUrl?has_content>
<script type="module">
import LuteceBSOffCanvas from "./themes/shared/modules/bootstrap/luteceBSOffCanvas.js";
new LuteceBSOffCanvas(`${id}`);
</script>
</#if>
</#macro>

<#--
Macro: option

Description: Generates an HTML option element for use in a select list.

Parameters:
- label (string): the text to be displayed for the option.
- value (string): the value to be assigned to the option.
@param - id - string - optional - the option element.
@param - class - string - optional - of the option element.
@param - selected - boolean - optional - should be selected by default. Default is false.
@param - disabled - boolean - optional - should be disabled. Default is false.
@param - params - string - optional - the option element.
-->
<#macro option label value help='' id='' class='' selected=false disabled=false params=''>
<option<#if id!=''>id="${id}</#if><#if class!=''> class="${class}"</#if> value="${value!}"<#if selected> selected</#if><#if disabled> disabled</#if><#if help !=''> label="${help}"</#if><#if params!=''> ${params}</#if>>${label!} <#nested></option>
</#macro>

<#--
Macro: options

Description: Generates a list of option elements for use in a select list.

Parameters:
- items (list): a list of items to be displayed as options. Each item should have a 'name' and a 'code'.
@param - selected - string - optional - the option that should be selected by default. If not provided, the 'selected' property of each item will be used.
@param - id - boolean - optional - an ID to each option element. Default is false.
@param - class - string - optional - of each option element.
@param - params - string - optional - each option element.
-->

<#macro options items selected='' id=false class='' params=''>
<#if items??>
	<#list items as item>
		<#local idItem><#if id>${item.code}_${item?index}<#else></#if></#local>
		<#local selectedItem><#if selected !=''><#if item.code?string=selected>true<#else>false</#if><#else>${item.selected?c}</#if></#local>
		<@option label=item.name value=item.code id=idItem class=class selected=selectedItem?boolean disabled=item.disabled params=params /> 
	</#list>
</#if>
</#macro>

<#--
Macro: p

Description: Generates an HTML paragraph element with a specified ID, class, display settings, alignment, and nested content block.

Parameters:
@param - id - string - optional - the paragraph element.
@param - class - string - optional - add to the paragraph element.
@param - hide - list - optional - display settings to hide the paragraph element, e.g., ["md", "lg"].
@param - collapsed - boolean - optional - the paragraph element.
@param - align - string - optional - for the paragraph element, e.g., "center" or "right".
@param - params - string - optional - add to the HTML code.
-->
<#macro p id='' params='' class='' hide=[] collapsed=false align=''>
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<#local class += ' ' + displaySettings(hide,'block') + ' ' + alignmentSettings(align,'') />
<p<#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> id="${id}"</#if>>
	<#nested>
</p>
</#macro>

<#--
Macro: pageColumn
Description: Generates a container element for a full-height column on a page with an optional fixed width and custom CSS classes. The container includes a nested container for page content.
Parameters:
@param - id - string - optional - the container element.
@param - width - string - optional - the container element. Default is 100%.
@param - class - string - optional - of the container element. Use "p-" prefix to add padding classes, e.g. "p-2" or "p-5".
@param - height - string - optional - the container element. Use "full" to set the height to 100% of the viewport height.
@param - title - string - optional - be displayed at the top of the container element. If provided, the container will have a fixed height and a scrollable content area.
- flush (boolean, optional): If true, padding will not be added to the container. Default is false.
- center (boolean, optional): If true, content inside the container will be vertically and horizontally centered. Default is false.
- responsiveMenuSize (string, optional): If provided, the container will be hidden when the viewport width is less than the value. Accepts standard breakpoints (xs, sm, md, lg, xl, xxl).
@param - responsiveMenuTitle - string - optional - be displayed at the top of the container in responsiveMenu mode. If provided, it will replace the regular title when the viewport size matches the responsiveMenuSize.
@param - responsiveMenuPlacement - string - optional - the responsiveMenu offcanvas container. Can be 'start' or 'end'. Default is 'end'.
@param - responsiveMenuBodyClass - string - optional - to be applied to the offcanvas-body in responsiveMenu mode.
- responsiveMenuClose (boolean, optional) : If true, close by default the offcanvas menu. Default is false.
-->
<#macro pageColumn id='' width='' class='' height='' title='' flush=false center=false responsiveMenuSize='' responsiveMenuTitle=title responsiveMenuPlacement='end' responsiveMenuBodyClass='' responsiveMenuClose=false>
    <#if responsiveMenuSize != '' || responsiveMenuClose >
    <div class="<#if responsiveMenuClose>offcanvas<#else>offcanvas-${responsiveMenuSize}</#if> offcanvas-${responsiveMenuPlacement} w-auto border-end overflow-x-hidden" style="<#if width != ''>min-width:${width}</#if>" tabindex="-1" <#if id != ''> id="${id}"</#if>>
        <div class="offcanvas-header border-bottom text-break px-4">
            <h2 class="offcanvas-title fw-bolder" id="template-create-page-roleLabel">${responsiveMenuTitle}</h2>
            <button type="button" class="ms-3 border btn btn-light btn-rounded btn-icon" data-bs-dismiss="offcanvas" data-bs-target="#<#if id != ''>${id}</#if>" aria-label="Close">
                <i class="ti ti-x fs-5"></i>
            </button>
        </div>
        <div class="offcanvas-body p-0 overflow-hidden ${responsiveMenuBodyClass}">
    </#if>
    <div class="<#if width = '' >w-100<#else>border-start border-end</#if> overflow-auto ${class}" style="<#if width != '' >width:${width};min-width:${width};</#if><#if height='full'>height:calc(100vh - 64px);max-height:calc(100vh - 64px)</#if>">
        <div class="container-fluid scrollable">
            <#if title!=''><h1 class="fw-bolder <#if responsiveMenuSize !=''>d-none d-${responsiveMenuSize}-block</#if>">${title}</h1></#if>
            <#nested>
        </div>
    </div>
    <#if responsiveMenuSize != ''>
    </div>
    </div>
    </#if>
</#macro>

<#--
Macro: pageColumnBtn
Description: Generates a button that toggles the visibility of a pageColumn with an optional custom CSS class.
Parameters:
@param - idPageColumn - string - required - the container element to be toggled.
@param - class - string - optional - of the button element.
@param - hideSize - string - optional - which the button should be hidden. Default is 'xl'. Accepts standard breakpoints (xs, sm, md, lg, xl, xxl).
@param - title - string - optional - for the button element.
@param - btnColor - string - optional - of the button. Default is 'primary'.
-->
<#macro pageColumnBtn idPageColumn class='' hideSize='' title='' btnColor='primary'>
	<#assign hideSizebtn>
		<#if hideSize!=''>d-${hideSize}-none</#if>
	</#assign>
	<@button color='primary' class='${hideSizebtn} ${class}' title='${title}' buttonIcon='menu-2'  params='data-bs-toggle="offcanvas" data-bs-target="#${idPageColumn}" aria-controls="${idPageColumn}"' />
</#macro>

<#--
Macro: page
Description: Contenu principe
-->
<#macro pageContainer id='lutece-main' template='' height="" class="">
<!-- Begin page content -->
<main role="main" <#if id!=''> id="${id}"</#if>  class="lutece-page ${template} ${class} d-flex" style="<#if height='full'>height:calc(100%-64px);max-height:calc(100%-64px)</#if>">
<#nested>
</main>
<#if height='full'>
<style>
footer {
	display: none;
}
</style>
</#if>
</#macro>

<#--
Macro: pageHeader

Description: Generates a header section for a page with an optional title and description. Includes a container for additional tools.

Parameters:
@param - id - string - optional - the header element.
@param - title - string - optional - the page header.
@param - description - string - optional - the page header.
-->
<#macro pageHeader id='' title='' description='' class='' toolsClass='' params='' deprecated...>
<@deprecatedWarning args=deprecated />
<div id="pageHeader"<#if toolsClass !=''> class="${class}"</#if>>
	<div class="d-lg-flex align-items-center justify-content-between">
	  <div class="flex-grow-1 py-2">
	  	<h1 class="mb-0 fw-bolder">${title}</h1>
	  </div>
	  <div id="pageHeaderTools" class="py-2<#if toolsClass !=''> ${toolsClass}</#if>">
		<#nested>
	  </div>
	</div>
	<p class="">${description}</p>
</div>
</#macro>

<#--
Macro: pageRow
Description: Generates a row element.
Parameters:
@param - id - string - optional - the container element.
@param - width - string - optional - the container element;
@param - class - string - optional - of the container element.
-->
<#macro pageRow id='' width='' class=''>
<div class="row<#if class !=''> ${class}</#if>" <#if id !=''> id="${id}"</#if>>
	<#nested>
</div>
</#macro>

<#--
Macro: pageWrapper
Description: Generates a main container element for a page with a flexible width that fills the available space.
-->
<#macro pageWrapper template=''>
<!-- Begin layout content -->
<div class="lutece-page-wrapper ${template}">
<#nested>
</div>
</#macro>

<#-- Macro: pagination

Description: Generates a pagination bar for navigating through pages of a list.

Parameters:
- paginator (object): an object that contains information about the current and next/previous pages in a list.
-->
<#macro pagination paginator>
<#assign nbLinkPagesToDisplay = 10 />
<#assign offsetPrev = nbLinkPagesToDisplay / 2 />
<#assign offsetNext = nbLinkPagesToDisplay / 2 />
<#if ( paginator.pageCurrent <= nbLinkPagesToDisplay - offsetPrev )>
	<#assign offsetPrev = paginator.pageCurrent - 1 />
	<#assign offsetNext = nbLinkPagesToDisplay - offsetPrev />
<#elseif ( paginator.pageCurrent + offsetNext > paginator.pagesCount )>
	<#assign offsetNext = paginator.pagesCount - paginator.pageCurrent />
	<#assign offsetPrev = nbLinkPagesToDisplay - offsetNext />
</#if>
<#if ( paginator.pagesCount > 1 )>
	<#if ( paginator.pageCurrent - offsetPrev > 1 )>
		<@link href='${paginator.firstPageLink?xhtml}'>
			<@icon style='double-left' /> #i18n{portal.util.labelFirst}
		</@link>
	</#if>
	<#if ( paginator.pageCurrent > 1 )>
		<@link href='${paginator.previousPageLink?xhtml}'>
			<@icon style='angle-left' /> #i18n{portal.util.labelPrevious}
		</@link>
	<#else>
	</#if>
	<#if ( paginator.pageCurrent - offsetPrev > 1 )>
		<strong>...</strong>
	</#if>
	<#list paginator.pagesLinks as link>
		<#if link.index == paginator.pageCurrent>
			<strong>${link.name}</strong>
		<#else>
			<@link href='${link.url?xhtml}'>${link.name}</@link>
		</#if>
	</#list>
	<#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount )>
		<strong>...</strong>
	</#if>
	<#if ( paginator.pageCurrent < paginator.pagesCount )>
		<@link href='${paginator.nextPageLink?xhtml}'>
			<@icon style='angle-right' /> #i18n{portal.util.labelNext}
		</@link>
		<#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount )>
			<@link href='${paginator.lastPageLink?xhtml}'>
				<@icon style='angle-double-right' /> #i18n{portal.util.labelLast}
			</@link>
		</#if>
	</#if>
</#if>
</#macro>

<#-- Macro: paginationAdmin

Description: Generates a pagination bar for navigating through pages of a list, with options to display item count and select the number of items per page.

Parameters:
- paginator (object): an object that contains information about the current and next/previous pages in a list.
@param - combo - boolean - optional - a combo box for selecting the number of items per page (default is 0).
@param - form - boolean - optional - the item count and item per page controls in a form element (default is 1).
@param - nb_items_per_page - number - optional - items to display per page (default is the value of the "nb_items_per_page" variable).
@param - showcount - boolean - optional - the item count (default is 1).
@param - showall - boolean - optional - a link to show all items on a single page (default is 0).

-->
<#macro paginationAdmin paginator combo=0 form=1 nb_items_per_page=nb_items_per_page showcount=1 showall=0>
<@div class='d-flex justify-content-end mt-3'>
<#if (paginator.pagesCount > 1) >
<@paginationPageLinks paginator=paginator />
</#if>
<#if form == 1 >
	<@tform type='' class='d-flex'>
		<@paginationItemCount paginator=paginator combo=combo nb_items_per_page=nb_items_per_page showcount=showcount showall=showall />
	</@tform>
<#else>
	<@paginationItemCount paginator=paginator combo=combo nb_items_per_page=nb_items_per_page showcount=showcount showall=showall />
</#if>
</@div>
</#macro>

<#-- Macro: paginationCombo

Description: Generates a combo box for selecting the number of items per page in a pagination bar.

Parameters:
- paginator (object): an object that contains information about the current and next/previous pages in a list.
@param - nb_items_per_page - number - optional - items to display per page (default is the value of the "nb_items_per_page" variable).
@param - showall - boolean - optional - an option to show all items on a single page (default is 0).
-->
<#macro paginationCombo paginator nb_items_per_page=nb_items_per_page showall=0>
<@formGroup labelFor='${paginator.itemsPerPageParameterName}' labelKey='#i18n{portal.util.labelItemCountPerPage}' formStyle='inline'>
<@inputGroup size='sm'>
	<@select params='data-max-item="${paginator.itemsCount}"' size='sm' name='${paginator.itemsPerPageParameterName}' id='${paginator.itemsPerPageParameterName}' title='${paginator.labelItemCountPerPage}'>
  		<#list [ "10" , "20" , "50" , "100" ] as nb>
  			<#if nb_items_per_page = nb >
  				<@option selected=true value=nb label=nb />
  			<#else>
  				<@option value=nb label=nb />
  			</#if>
  		</#list>
  		<#if showall ==1>
  			<#if paginator.itemsCount &gt; 100 >
				<#assign isItemSelected><#if nb_items_per_page?number = paginator.itemsCount?number >true<#else>false</#if></#assign>
  				<@option selected=isItemSelected?boolean value=paginator.itemsCount class=nb_items_per_page label='#i18n{portal.util.labelAll}' />
  			</#if>
  		</#if>
	</@select>
	<@inputGroupItem type='btn'>
		<@button type='submit' color='oultine' size='xs' title='#i18n{portal.util.labelRefresh}' buttonIcon='check' hideTitle=['all'] />
	</@inputGroupItem>
</@inputGroup>
</@formGroup>
</#macro>

<#-- Macro: paginationItemCount

Description: Generates the item count and item per page controls for a pagination bar.

Parameters:
- paginator (object): an object that contains information about the current and next/previous pages in a list.
@param - combo - boolean - optional - a combo box for selecting the number of items per page (default is 0).
@param - nb_items_per_page - number - optional - items to display per page (default is the value of the "nb_items_per_page" variable).
@param - showcount - boolean - optional - the item count (default is 1).
@param - showall - boolean - optional - a link to show all items on a single page (default is 0).

-->
<#macro paginationItemCount paginator combo=0 nb_items_per_page=nb_items_per_page showcount=1 showall=0>
<#-- Display item count -->
<#if showcount == 1 >
<@div class='d-flex align-items-center me-3'>
<#if (paginator.labelItemCount)?? && paginator.labelItemCount?has_content>&#160;${paginator.labelItemCount} : <#else>#i18n{portal.util.labelItemCount} : </#if> ${paginator.itemsCount}
</@div>
</#if>
<#-- Display combo -->
<#if combo == 1 >
<@paginationCombo paginator=paginator nb_items_per_page=nb_items_per_page showall=showall />
</#if>
</#macro>

<#-- Macro: paginationPageLinks

Description: Generates the page links for a pagination bar.

Parameters:
- paginator (object): an object that contains information about the current and next/previous pages in a list.

-->
<#macro paginationPageLinks paginator >
<#assign nbLinkPagesToDisplay = 10 />
<#assign offsetPrev = nbLinkPagesToDisplay / 2 />
<#assign offsetNext = nbLinkPagesToDisplay / 2 />
<#if ( paginator.pageCurrent <= nbLinkPagesToDisplay - offsetPrev )>
	<#assign offsetPrev = paginator.pageCurrent - 1 />
	<#assign offsetNext = nbLinkPagesToDisplay - offsetPrev />
<#elseif ( paginator.pageCurrent + offsetNext > paginator.pagesCount )>
	<#assign offsetNext = paginator.pagesCount - paginator.pageCurrent />
	<#assign offsetPrev = nbLinkPagesToDisplay - offsetNext />
</#if>
<@ul class='pagination'>
<#if ( paginator.pageCurrent - offsetPrev > 1 )>
	<@li class='page-item'>
		<@link href='${paginator.firstPageLink?xhtml}' class='page-link'>
			${paginator.labelFirst}
		</@link>
	</@li>
</#if>
<#if (paginator.pageCurrent > 1) >
	<@li class='page-item'>
		<@link href='${paginator.previousPageLink?xhtml}' class='page-link'>
			${paginator.labelPrevious}
		</@link>
	</@li>
<#else>
	<@li class='page-item disabled'>
		<@link href='${paginator.firstPageLink?xhtml}' class='page-link'>${paginator.labelPrevious}</@link>
	</@li>
</#if>
<#if ( paginator.pageCurrent - offsetPrev > 1 )>
	<@li class='page-item'>
		<@link href='${(paginator.pagesLinks?first).url?xhtml}' class='page-link'><strong>...</strong></@link>
	</@li>
</#if>
<#list paginator.pagesLinks as pageLink>
	<#if ( pageLink.index == paginator.pageCurrent )>
		<@li class='page-item active'>
			<@link href='${pageLink.url?xhtml}' class='page-link'>${pageLink.name}</@link>
		</@li>
	<#else>
		<@li class='page-item'>
			<@link href='${pageLink.url?xhtml}' class='page-link'>${pageLink.name}</@link>
		</@li>
	</#if>
</#list>
<#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount )>
	<@li class='page-item'>
		<@link href='${(paginator.pagesLinks?last).url?xhtml}' class='page-link'><strong>...</strong></@link>
	</@li>
</#if>
<#if (paginator.pageCurrent < paginator.pagesCount) >
	<@li class='page-item next'>
		<@link href="${paginator.nextPageLink?xhtml}" class='page-link'>
			${paginator.labelNext}
		</@link>
	</@li>
	<#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount )>
		<@li class='page-item next'>
			<@link href='${paginator.lastPageLink?xhtml}' class='page-link'>
				${paginator.labelLast}
			</@link>
		</@li>
	</#if>
<#else>
	<@li class='page-item disabled'>
		<@link href='${paginator.lastPageLink?xhtml}' class='page-link'>${paginator.labelNext}</@link>
	</@li>
</#if>
</@ul>
</#macro>

<#-- 
Macro: passwordComplexity

Description: Generates a progress bar to display the complexity of a password.

Parameters:
@param - id - string - required - the progress bar.
@param - description - string - optional - the progress bar.
@param - inputId - string - optional - the input field to use for the progress bar update.
@param - params - string - optional - add to the HTML code.
-->
<#macro passwordComplexity id description='' params='' inputId='' value='0'>

<div class="progress"<#if params!=''> ${params}</#if>>
	<div id="${id}" class="progress-bar progress-bar-striped" role="progressbar" style="width:0%">
		<div id="complexity">0%</div>
	</div>
</div>
<#if description!=''>
	<span class="progress-description">${description}</span>
</#if>
<#if inputId!=''>
<script type="module">
	import {
			LutecePassword
		} from './themes/shared/modules/lutecePassword.js';

	const password = new LutecePassword();
    const input = document.getElementById('${inputId}');
	const progressBar = document.getElementById('${id}');

	input.addEventListener('input', () => {
		const complexityScore = password.getComplexity(input.value);
		progressBar.style.width = complexityScore + '%';
		progressBar.innerHTML = Math.round(complexityScore) + '%';
		progressBar.setAttribute( 'aria-valuenow', Math.round( complexityScore ));
		progressBar.classList.remove('bg-danger', 'bg-warning', 'bg-success');
		if( complexityScore < 50 ) {
			progressBar.classList.add('bg-danger')
		} else if ( complexityScore >= 50 && complexityScore < 100 ) {
			progressBar.classList.add('bg-warning')
		} else {
			progressBar.classList.add('bg-success')
		}
	});

</script>
</#if>
</#macro>

<#--
Macro: pre

Description: Generates an HTML preformatted text element with a specified ID, class, display settings, alignment, and nested content block.

Parameters:
@param - id - string - optional - the preformatted text element.
@param - class - string - optional - add to the preformatted text element.
@param - hide - list - optional - display settings to hide the preformatted text element, e.g., ["md", "lg"].
@param - collapsed - boolean - optional - the preformatted text element.
@param - align - string - optional - for the preformatted text element, e.g., "center" or "right".
@param - params - string - optional - add to the HTML code.
-->
<#macro pre id='' class='' hide=[] collapsed=false align='' params=''>
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<#local class += ' ' + alignmentSettings(align,'') + ' ' + displaySettings(hide,'block') />
<pre<#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> ${id}</#if>>
	<#nested>
</pre>
</#macro>

<#-- Macro: progress

Description: Generates a progress bar with optional label, text, and report for progress updates.

Parameters:
@param - color - string - optional - the progress bar, using a Bootstrap color class (e.g. "primary").
@param - id - string - optional - the progress bar container.
@param - params - string - optional - add to the progress bar container.
@param - value - number - optional - the progress bar, as a percentage (0-100).
@param - min - number - optional - of the progress bar (default: 0).
@param - max - number - optional - of the progress bar (default: 100).
@param - text - string - optional - display on the progress bar (default: percentage value).
@param - progressId - string - optional - the progress bar itself.
@param - token - string - optional - for the progress bar to enable progress updates.
@param - label - string - optional - display above the progress bar.
@param - showReport - boolean - optional - a report for progress updates.
@param - intervalTime - number - optional - in milliseconds to check for progress updates (default: 2000).

-->
<#macro progress color='primary' id='' params='' value=0 min=0 max=100 text='' progressId='progressbar' token='' label='' showReport=false intervalTime=2000 >
<#if label!='' >
<div id="${progressId}-label" >${label}</div>
</#if>
<div class="progress"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<div id="${progressId}" class="progress-bar progress-bar-${color}<#if token!=''> progressmanager</#if>" role="progressbar" style="width: ${value}%;" aria-valuenow="${value}" aria-valuemin="${min}" aria-valuemax="${max}" <#if token!=''>token="${token}" intervalTime=${intervalTime} showReport=${showReport?c}</#if> >
        <#if text=''>${value}%<#else>${text}</#if>
	</div>       
</div>
<#if showReport >
<div id="${progressId}-report" class="progress-bar-report" lastline=0></div>
</#if>
</#macro>

<#-- 
Macro: progressBar

Description: Generates a progress bar with an optional description and ID.

Parameters:
@param - description - string - optional - the progress bar.
@param - id - string - optional - the progress bar.
@param - params - string - optional - add to the HTML code.
-->
<#macro progressBar description='' id='' params=''>
<div class="progress"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<div id="progressbar" class="progress-bar progress-bar-striped" role="progressbar">
		<div id="complexity">0%</div>
	</div>
</div>
<#if description!=''>
	<span class="progress-description">${description}</span>
</#if>
</#macro>

<#--
Macro: radioButton

Description: Generates an HTML radio button element with a specified name, ID, label, orientation, value, tabindex, title, disabled, readonly, checked, parameters, and mandatory flag.

Parameters:
@param - name - string - required - the radio button element.
@param - id - string - optional - the radio button element.
@param - labelKey - string - optional - the radio button element.
- labelFor (string, optional): the "for" attribute for the radio button's label element.
@param - orientation - string - optional - the radio button element, either "vertical" (default) or "inline".
@param - value - string - optional - the radio button element.
@param - tabIndex - string - optional - the radio button element.
@param - title - string - optional - the radio button element.
@param - disabled - boolean - optional - button element is disabled.
@param - readonly - boolean - optional - button element is readonly.
@param - checked - boolean - optional - button element is checked.
@param - params - string - optional - add to the HTML code.
@param - mandatory - boolean - optional - button element is mandatory.
@param - propagateMandatory - boolean - optional - the mandatory flag to the radio button element.
-->
<#macro radioButton name id='' class='form-check-input' labelKey='' labelClass='' labelFor='' orientation='vertical' value='' tabIndex='' title='' disabled=false readonly=false checked=false params='' mandatory=false >
<#if propagateMandatory?? && propagateMandatory ><#local mandatory = true /></#if>
<#if orientation='vertical'><div class="radio"<#if params!=''> ${params}</#if>>	</#if>
<#if labelKey!=''><label  class="form-check<#if orientation!='vertical'> form-check-inline</#if><#if labelClass!=''> ${labelClass!}</#if>"<#if labelFor!=''> for="${labelFor}"</#if>></#if>
<input class="<#if class!=''> ${class}</#if>" type="radio" id="${id}" name="${name}" value="<#if value!=''>${value}</#if>"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if checked> checked</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if params!='' && orientation !='vertical'> ${params}</#if><#if mandatory> required</#if>>
<#if labelKey!=''>
<span class="form-check-label<#if labelClass!=''> ${labelClass!}</#if>"><#if labelKey!=''>${labelKey}<#else><#nested></#if></span>
</label>
</#if>
<#if orientation='vertical'></div></#if>
</#macro>

<#--
Macro: row

Description: Generates a row container element for a Bootstrap grid system. Includes options for additional CSS classes, ID, and collapse functionality.

Parameters:
@param - class - string - optional - of the row container element.
@param - id - string - optional - the row container element.
@param - collapsed - boolean - optional - should be initially collapsed.
@param - align - string - optional - the row container element (left, right, or center).
@param - params - string - optional - be added to the row container element.
-->
<#macro row class='' id='' collapsed=false align='' params=''>
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
<div class="row<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</div>
</#macro>

<#-- 
Macro: scrollTopBtn

Description: Generates a button that appears when the user scrolls down the page, allowing them to easily scroll back to the top of the page when clicked.
-->
<#macro scrollTopBtn>
<a href="#" id="scroll" style="display: none;"><span></span></a>
<script>
$( function(){ 
    $(window).scroll(function(){ 
        if ( $(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
</script>
</#macro>

<#-- Macro: select

Description: Generates a select input field with options.

Parameters:
- name (string): the name of the select field.
@param - id - string - optional - the select field.
@param - class - string - optional - apply to the select field.
- items (list): a list of options for the select field. Each option is an object with "name" and "code" properties.
@param - default_value - string - optional - for the select field.
@param - size - string - optional - the select field (e.g. "sm", "md", "lg").
@param - sort - boolean - optional - the options alphabetically by name.
@param - multiple - integer - optional - visible options when the select field is expanded. If set to a value greater than 1, the select field allows multiple selections.
@param - params - string - optional - add to the select field.
@param - title - string - optional - of the select field.
@param - disabled - boolean - optional - field is disabled.
@param - tabIndex - integer - optional - of the select field.
@param - maxLength - integer - optional - of each option name.
@param - mandatory - boolean - optional - field is mandatory.

-->
<#macro select name id=name class='' items='' default_value='' size='' sort=false multiple=0 params='' title='' disabled=false tabIndex=0 maxLength=0 mandatory=false>
<#if propagateMandatory?? && propagateMandatory ><#local mandatory = true /></#if>
<select id="${id}" name="${name}" class="<#if size!=''>form-control form-control-${size}</#if><#if class!=''> ${class}<#else> form-select</#if>" <#if (multiple &gt; 0)>multiple size="${multiple}"</#if><#if (tabIndex &gt; 0)> tabindex="${tabIndex}"</#if><#if params!=''> ${params}</#if><#if title!=''> title="${title}"</#if><#if mandatory> required</#if><#if disabled> disabled</#if>>
<#if items?has_content>
<#if sort=true>
<#list items?sort_by("name") as item>
<#if default_value="${item.code}">
	<option selected="selected" title="${item.name}" value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
<#else>
	<option value="${item.code}" title="${item.name}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
</#if>
</#list>
<#else>
<#if maxLength gt 0>
	<#list items as item>
	<#if maxLength < item.name?length >
		<#assign item_new = "..." + "${item.name?substring(item.name?length-maxLength+3)}" >
	<#else>
		<#assign item_new = "${item.name}">
	</#if>
	<#if default_value="${item.code}">
		<option selected="selected" title="${item.name}" value="${item.code}" >${item_new}</option>
	<#else>
		<option title="${item.name}" value="${item.code}" >${item_new}</option>
	</#if>
	</#list>
<#else>
	<#list items as item>
	<#if default_value="${item.code}">
		<option selected="selected" title="${item.name}" value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
	<#else>
		<option title="${item.name}" value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
	</#if>
	</#list>
</#if>
</#if>
<#else>
<#nested>
</#if>
</select>
</#macro>

<#-- 
Macro: selectIconFont

Description: Generates a select box with options for Font icons. The options are loaded from a YAML or JSON file and include labels and styles.

Parameters:
@param - id - string - optional - the select box.
@param - class - string - optional - of the select box.
@param - name - string - optional - the select box.
@param - showListLabel - boolean - optional - the label of each option in the select box.
@param - showListIcon - boolean - optional - the icon of each option in the select box.
@param - searchShow - boolean - optional - the search box for the select box.
@param - searchFocus - boolean - optional - on the search box when it is displayed.
@param - searchHighlight - boolean - optional - the matched search terms in the options.
@param - type - string - optional - the icon file (either "yaml" or "json").
@param - prefix - string - optional - the Font icon class.
@param - iconsUrl - string - optional - the YAML or JSON file containing the icon data.
@param - resources - boolean - optional - the SlimSelect CSS and JS resources.
-->
<#macro selectIconFont id='selectIcon' class='' name='resource-icon' showListLabel=true showListIcon=true searchShow=true searchFocus=false searchHighlight=true type='yaml' prefix='fa-' iconsUrl='css/admin/font-awesome-icons.yml' resources=true defaultValue=''>
<@select name=name id=id class=class />
<#if resources>
<link rel="stylesheet" href="js/admin/lib/slimselect/slimselect.min.css">
<script src="js/admin/lib/slimselect/slimselect.min.js"></script>
<#if type='yaml'>
<!-- js yaml parser -->
<script src="js/admin/lib/slimselect/js-yaml.min.js"></script>
</#if>
</#if>
<script>
$.get('${iconsUrl}', function(data) {
<#if type='yaml'>
	let parsedIcons = jsyaml.load(data)
<#else>
	<#-- Json / Object -->
	let parsedIcons='';
	if( typeof data === 'object' ){
		parsedIcons = data;
	} else { 
		parsedIcons = JSON.parse( data )
	}
</#if>
$.each( parsedIcons, function(index, icon){
	let i=0, prefix='${prefix}';
	let selected = '${defaultValue}' == index ? 'selected' : '';
	<#if type='yaml'>
		<#-- FontAwesome specific / Other lib add another test/treatment -->
		while( i < icon.styles.length ){
			switch ( icon.styles[i] ) {
				case 'regular':
					prefix = 'far'
					break;
				case 'solid':
					prefix = 'fas'
					break;
				case 'light':
					prefix = 'fal'
					break;
				case 'brands':
					prefix = 'fab'
					break;
			}
			$('#${id}').append('<option value="' + index + '"' + selected + '> <#if showListIcon><span class="' + prefix + ' fa-'+ index + ' mr-1" ' + selected + ' ></span>&nbsp;</#if>' <#if showListLabel>+ icon.label + ' [' + icon.styles[i] +  ']'</#if>+ '</option>');
			i++;
		}
	<#else>
		<#-- Json / Object -->
		$('#${id}').append('<option value="' + index + '" ' + selected + ' > <#if showListIcon><span class="' + prefix + ' fa-'+ index + '"></span>&nbsp;</#if>' <#if showListLabel>+ index </#if>+ '</option>');
	</#if>
});
new SlimSelect({ 
	select: '#${id}',
	showSearch: ${searchShow?c},
	searchText: "#i18n{portal.util.labelNoItem}",
	searchPlaceholder: '#i18n{portal.util.labelSearch}',
	searchFocus: ${searchFocus?c}, // Whether or not to focus on the search input field
	searchHighlight: ${searchHighlight?c}
})
});
</script>
</#macro>

<#--
Macro: smallBox
Description: Generates an HTML element for a small box widget with an icon, title, and text.
Parameters:
@param - color - string - optional - of the widget.
@param - title - string - required - the widget.
@param - text - string - required - of the widget.
@param - boxIcon - string - optional - use in the widget.
@param - titleLevel - string - optional - level for the title of the widget.
@param - unit - string - optional - display next to the title.
@param - url - string - optional - link the widget to.
@param - urlText - string - optional - display for the URL link.
@param - id - string - optional - the widget element. If not provided, a default ID will be generated.
@param - params - string - optional - to include in the widget element.
@param - fontSize - string - optional - of the widget icon.
-->
<#macro smallBox color='' title='' text='' boxIcon='' titleLevel='div' unit='' url='' urlText='' id='' params='' fontSize='40px'>
<div class="card card-sm mb-3 box-widget yeah" draggable='true' <#if id!=''> id="${id}" data-id="${id}"</#if><#if params!=''> ${params}</#if>>
	<div class="card-body">
		<div class="row align-items-center">
			<div class="col-auto">
				<#if color !=''><span class="bg-${color} text-white avatar"></#if>
					<@icon style=boxIcon  />
				<#if color !=''></span></#if>
			</div>
			<div class="col">
			<#if url!=''><a class="card-link" href="${url}"></#if>
			<${titleLevel} class="font-weight-medium"><span class="counter">${title}</span><#if unit!=''> ${unit}</#if></${titleLevel}>
			<div class="text-muted">${text}</div>
			<#if url!=''></a></#if>
			</div>
		</div>
	</div>
</div>
</#macro>

<#-- 

Macro: sort

Description: This macro generates a pair of buttons that allow sorting the data displayed on a web page by a specified attribute. 

Parameters:
- jsp_url: the URL of the web page to sort, including any query string parameters
- attribute: the name of the attribute to sort by
- id (optional): a unique identifier for the sort button group
-->
<#macro sort jsp_url attribute id="" >
<#if jsp_url?contains("?")>
<#assign sort_url = jsp_url + "&amp;sorted_attribute_name=" + attribute + "&amp;asc_sort=" />
<#else>
<#assign sort_url = jsp_url + "?sorted_attribute_name=" + attribute + "&amp;asc_sort=" />
</#if>
<@btnGroup ariaLabel='#i18n{portal.util.sort.label}'>
	<@aButton color='default btn-ghost-dark' size='sm' id='sort${id!}_${attribute!}' href='${sort_url}true#sort${id!}_${attribute!}' title='#i18n{portal.util.sort.asc}' buttonIcon='chevron-up' hideTitle=['all'] />
	<@aButton color='default btn-ghost-dark' size='sm' href='${sort_url}false#sort${id!}_${attribute!}' title='#i18n{portal.util.sort.desc}' buttonIcon='chevron-down' hideTitle=['all'] />
</@btnGroup>
</#macro>

<#--
Macro: span

Description: Generates an HTML span element with a specified ID, class, display settings, alignment, and nested content block.

Parameters:
@param - id - string - optional - the span element.
@param - class - string - optional - add to the span element.
@param - hide - list - optional - display settings to hide the span element, e.g., ["md", "lg"].
@param - collapsed - boolean - optional - the span element.
@param - align - string - optional - for the span element, e.g., "center" or "right".
@param - params - string - optional - add to the HTML code.
-->
<#macro span id='' class='' hide=[] collapsed=false align='' params=''>
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<#local class += ' ' + alignmentSettings(align,'') + ' ' + displaySettings(hide,'inline-flex') />
<span<#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> id="${id}"</#if>>
	<#nested>
</span>
</#macro>

<#-- Macro: staticText

Description: Generates a static text element.

Parameters:
@param - inForm - boolean - optional - text element is inside a form control.
@param - color - string - optional - the text, using a Bootstrap color class (e.g. "primary").
@param - id - string - optional - the static text element.
@param - params - string - optional - add to the static text element.

-->
<#macro staticText inForm=true color='' id='' params=''>
<p class="<#if inForm>form-control-plaintext</#if><#if color!=''> text-${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</p>
</#macro>

<#-- 
Macro: tabContent

Description: Generates a tab content container with an optional ID and parameters.

Parameters:
@param - id - string - optional - the tab content container.
@param - params - string - optional - add to the HTML code.

-->
<#macro tabContent id='' params=''>
<div class="card-body">
<div class="tab-content"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</div>
</div>
</#macro>

<#-- 
Macro: table

Description: Generates an HTML table with an optional ID, class, and various other features.

Parameters:
@param - id - string - optional - the table.
@param - class - string - optional - the table.
@param - responsive - boolean - optional - the table responsive.
@param - condensed - boolean - optional - the table cells more compact.
@param - hover - boolean - optional - rows on hover.
@param - striped - boolean - optional - stripes to the table rows.
@param - headBody - boolean - optional - the <thead> and <tbody> tags.
@param - bordered - boolean - optional - borders to the table cells.
@param - narrow - boolean - optional - the table cells narrower.
@param - collapsed - boolean - optional - the table.
@param - caption - string - optional - the table.
@param - params - string - optional - add to the HTML code.
-->
<#macro table id='' class='' responsive=true condensed=true hover=true striped=false headBody=false bordered=false narrow=false collapsed=false caption='' params='' deprecated...>
<@deprecatedWarning args=deprecated />
<#local class = class />
<#if condensed> <#local class += ' table-condensed' /> </#if>
<#if hover>     <#local class += ' table-hover' /> </#if>
<#if striped>   <#local class += ' table-striped'   /> </#if>
<#if bordered>  <#local class += ' table-bordered'  /> </#if>
<#if collapsed> <#local class += ' collapse' /> </#if>
<#if responsive><div class="table-responsive bg-white"></#if>
<table class="table ${class?trim}" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#if caption!=''><caption>${caption}</caption></#if>
<#if headBody><thead></#if>
	<#nested>
<#if headBody></tbody></#if>
</table>
<#if responsive></div></#if>
</#macro>

<#-- 
Macro: tableBody

Description: Generates an HTML <tbody> element with an optional ID, class, and additional parameters.

Parameters:
@param - id - string - optional - the <tbody> element.
@param - class - string - optional - the <tbody> element.
@param - params - string - optional - add to the HTML code.

-->
<#macro tableBody id='' class='' params=''>
<tbody<#if id!=''> id="${id}"</#if><#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</tbody>
</#macro>

<#-- 
Macro: tableFoot

Description: Generates an HTML <tfoot> element with an optional ID, class, and additional parameters.

Parameters:
@param - id - string - optional - the <tfoot> element.
@param - class - string - optional - the <tfoot> element.
@param - params - string - optional - add to the HTML code.

-->
<#macro tableFoot id='' class='' params=''>
<tfoot <#if id!=''> id="${id}"</#if><#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</tfoot>
</#macro>

<#-- 
Macro: tableHead

Description: Generates an HTML <thead> element with an optional ID, class, and additional parameters.

Parameters:
@param - id - string - optional - the <thead> element.
@param - class - string - optional - the <thead> element.
@param - params - string - optional - add to the HTML code.

-->
<#macro tableHead id='' class='' params=''>
<thead<#if id!=''> id="${id}"</#if><#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</thead>
</#macro>

<#-- 
Macro: tableHeadBodySeparator

Parameters:
@param - id - string - optional - the <tbody> element.
@param - class - string - optional - the <tbody> element.
@param - params - string - optional - add to the HTML code.

-->
<#macro tableHeadBodySeparator id='' class='' params=''>
</thead>
<tbody<#if id!=''> id="${id}"</#if><#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
</#macro>

<#-- 
Macro: tabLink

Description: Generates a tab link with an optional ID, class, and various other features.

Parameters:
@param - id - string - optional - the <li> element containing the tab link.
@param - class - string - optional - the <li> element containing the tab link.
- hide (string[], optional): an array of breakpoint names at which to hide the tab link.
@param - active - boolean - optional - the tab link is active.
@param - href - string - required - the tab link.
@param - title - string - optional - the tab link.
@param - tabLabel - string - optional - the tab.
@param - tabIcon - string - optional - the tab.
@param - tabClass - string - optional - the tab content.
@param - params - string - optional - add to the HTML code.

-->
<#macro tabLink class='' hide=[] id='' active=false href='' title=''tabLabel=''  tabIcon='' tabClass='' params=''>
<li class="nav-item<#if tabClass!=''> ${tabClass}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#local tabLinkClass = class + ' nav-link' />
<#if active><#local tabLinkClass += ' active' /></#if>
<#local tabLinkSettings = 'role="tab" aria-expanded="${active?c}" aria-controls="${href?remove_beginning("#")}"' />
<#if href?contains('#') && href?contains('.jsp') == false>
	<#local tabLinkSettings += ' data-bs-toggle="tab"' />
	<#local tabLinkId = '${href?remove_beginning("#")}-tab' />
<#else>
	<#local tabLinkId = href?keep_after_last('/')?keep_before('.')?lower_case />
</#if>
<#if href=''>
	<#nested>
<#else>
	<@link class=tabLinkClass?trim href=href id=tabLinkId title=title params=tabLinkSettings>
		<#if tabIcon!=''><@icon style=tabIcon class='mr-1 me-1'/></#if> <#if tabLabel !=''>${tabLabel!}<#else>${title!}</#if>
		<#nested>
	</@link>
</#if>
</li>
</#macro>

<#-- 
Macro: tabList

Description: Generates an HTML <ul> element containing tabs, with an optional ID, style, and various other features.

Parameters:
@param - style - string - optional - the tab list.
@param - vertical - boolean - optional - the tab list is vertical.
@param - id - string - optional - the <ul> element containing the tab list.
@param - params - string - optional - add to the HTML code.
@param - color - string - optional - the tab list.

-->
<#macro tabList style='tabs' vertical=false id='' params='' color=''>
<#if propagateTabStyle?? ><#local style = propagateTabStyle /></#if>
<ul class="nav nav-${style}<#if vertical> flex-column mb-3</#if>" data-bs-toggle="tabs"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> role="tablist">
<#nested>
</ul>
</#macro>

<#-- 
Macro: tabPanel

Description: Generates an HTML <div> element for a tab panel, with an optional ID, parameters, and various other features.

Parameters:
@param - id - string - required - the <div> element for the tab panel.
@param - params - string - optional - add to the HTML code.
@param - active - boolean - optional - the tab panel is active.

-->
<#macro tabPanel id params='' active=false>
<div class="tab-pane fade<#if active> show active</#if>" role="tabpanel" id="${id}" aria-labelledby="${id}-tab"<#if params!=''> ${params}</#if>>
<#nested>
</div>
</#macro>

<#-- 
Macro: tabs

Description: Generates an HTML <div> element containing tab panels, with an optional ID, style, color, and various other features.

Parameters:
@param - color - string - optional - the tabs.
@param - style - string - optional - the tabs.
@param - class - string - optional - add to the HTML code.
@param - id - string - optional - the <div> element containing the tabs.
@param - hide - list - optional - breakpoint-specific display settings to hide the element at certain screen sizes.
@param - collapsed - boolean - optional - the tabs are collapsed by default.
@param - params - string - optional - add to the HTML code.

-->
<#macro tabs color='' style='tabs' class='' id='' hide=[] collapsed=false params=''>
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<#if hide??><#local class += ' ' + displaySettings(hide,'block') /></#if>
<#assign propagateTabStyle = style />
<div class="card<#if color!=''> ${color}</#if><#if class?trim!=''> ${class?trim}</#if>" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</div>
</#macro>

<#-- 
Macro: tag

Description: Generates an HTML <span> element containing a badge or tag, with an optional color, size, title, and icon.

Parameters:
@param - color - string - optional - the badge or tag.
@param - class - string - optional - add to the HTML code.
@param - size - string - optional - the badge or tag.
@param - title - string - optional - of the badge or tag.
@param - tagIcon - string - optional - display alongside the badge or tag.
@param - id - string - optional - the <span> element containing the badge or tag.
@param - params - string - optional - add to the HTML code.
@param - deprecated - string - optional - indicating that this macro is deprecated.

-->
<#macro tag color='blue' class='' size='' title='' tagIcon='' id='' params='' deprecated...>
<@deprecatedWarning args=deprecated />	
<span class="badge bg-${color}<#if class!=''> ${class}</#if>"<#if title!=''> title='${title}'</#if><#if id!=''>id='${id}'</#if><#if params!=''>${params}</#if>>
	<#if tagIcon !=''>
	<@icon style=tagIcon />
	</#if>
	<#nested>
</span>
</#macro>

<#-- 
Macro: td

Description: Generates an HTML <td> element with an optional ID, class, and various other features.

Parameters:
@param - id - string - optional - the <td> element.
@param - class - string - optional - the <td> element.
- hide (string[], optional): an array of breakpoint names at which to hide the table cell.
@param - align - string - optional - of the table cell contents.
@param - valign - string - optional - of the table cell contents.
@param - cols - int - optional - columns to span.
@param - xs - int - optional - columns to span on extra-small screens.
@param - sm - int - optional - columns to span on small screens.
@param - md - int - optional - columns to span on medium screens.
@param - lg - int - optional - columns to span on large screens.
@param - xl - int - optional - columns to span on extra-large screens.
@param - colspan - int - optional - columns to span.
@param - rowspan - int - optional - rows to span.
@param - flex - boolean - optional - flexbox for layout.
@param - params - string - optional - add to the HTML code.

Deprecation:
- args (string[]): the list of deprecated arguments.

-->
<#macro td id='' class='' hide=[] align='' valign='' cols=0 xs=0 sm=0 md=0 lg=0 xl=0 colspan=0 rowspan=0 flex=false params='' deprecated...>
<@deprecatedWarning args=deprecated />	
	<#local class += ' ' + displaySettings(hide,'table-cell') + ' ' + alignmentSettings(align,'') />
	<#if cols!=0>
		<#local class += ' col-${cols}' />
	</#if>
	<#local breakpoints = {'xs':xs, 'sm':sm, 'md':md, 'lg':lg, 'xl':xl}>
	<#list breakpoints as breakpointkey,breakpointvalue>
		<#if breakpointvalue!=0>
			<#local class += ' col-${breakpointkey}-${breakpointvalue}' />
		</#if>
	</#list>
	<#if valign!=''><#local class += ' align-' + valign /></#if>
	<#if flex><#local class += ' d-flex' /></#if>
	<td<#if class?trim != ''> class="${class?trim}"</#if><#if id!=''> id="${id}"</#if><#if colspan gt 0> colspan="${colspan}"</#if><#if rowspan gt 0> rowspan="${rowspan}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</td>
</#macro>

<#-- Macro: tform

Description: Generates a Bootstrap form element with specified properties.

Parameters:
@param - type - string - optional - form (horizontal, inline, or blank).
@param - class - string - optional - to add to the form element.
@param - align - string - optional - the form element (left, right, or center).
@param - hide - list - optional - form properties to hide.
@param - action - string - optional - submit the form to.
@param - method - string - optional - to use when submitting the form (get or post).
@param - name - string - optional - the form element.
@param - id - string - optional - the form element.
@param - role - string - optional - the form element.
@param - collapsed - boolean - optional - the form element.
@param - enctype - string - optional - for the form element.
@param - params - string - optional - add to the form element.

-->
<#macro tform type='' class='' align='' hide=[] required=false action='' method='post' name='' id='' role='' collapsed=false enctype='' boxed=false boxClass='' params='' deprecated...>
<@deprecatedWarning args=deprecated />	
<#local class = class />
<#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
<#if hide??><#local class += ' ' + displaySettings(hide,'block') /></#if>
<#if collapsed><#local class += ' collapse' /></#if>
<#switch type>
	<#case 'horizontal'>
		<#local class += ''>
		<#break>
	<#case 'inline'>
		<#local class += ' d-inline-flex'>
		<#break>
	<#default>
		<#local class += ''>
</#switch>
<#if boxed>
<div class="card<#if boxClass !=''> ${boxClass!}</#if>">
<div class="card-body"></#if>
<form <#if class!=''>class="${class?trim} <#if align='middle'>align-middle</#if>"</#if><#if id!=''> id="${id}"</#if><#if action!=''> action="${action}"</#if><#if method!=''> method="${method}"</#if><#if name!=''> name="${name}"</#if><#if role!=''> role="${role}"</#if><#if method='post' && enctype!=''> enctype='${enctype}'</#if><#if params!=''> ${params}</#if>>
<#if required><@staticText>#i18n{portal.util.message.titleRequiredFields}</@staticText></#if>
<#nested>
</form>
<#if boxed></div></div></#if>
</#macro>

<#-- 
Macro: th

Description: Generates an HTML <th> element with an optional ID, title, scope, class, and various other features.

Parameters:
@param - id - string - optional - the <th> element.
@param - title - string - optional - the <th> element.
@param - scope - string - optional - the <th> element.
@param - class - string - optional - the <th> element.
- hide (string[], optional): an array of breakpoint names at which to hide the table cell.
@param - align - string - optional - of the table cell contents.
@param - valign - string - optional - of the table cell contents.
@param - cols - int - optional - columns to span.
@param - xs - int - optional - columns to span on extra-small screens.
@param - sm - int - optional - columns to span on small screens.
@param - md - int - optional - columns to span on medium screens.
@param - lg - int - optional - columns to span on large screens.
@param - xl - int - optional - columns to span on extra-large screens.
@param - colspan - int - optional - columns to span.
@param - rowspan - int - optional - rows to span.
@param - flex - boolean - optional - flexbox for layout.
@param - params - string - optional - add to the HTML code.

-->
<#macro th id='' title='' scope='' class='' align='' valign='' hide=[] cols=0 xs=0 sm=0 md=0 lg=0 xl=0 colspan=0 rowspan=0 flex=false params=''>
<#local class += ' ' + displaySettings(hide,'table-cell') + ' ' + alignmentSettings(align,'text') />
<#if cols!=0>
	<#local class += ' col-${cols}' />
</#if>
<#local breakpoints = {'xs':xs, 'sm':sm, 'md':md, 'lg':lg, 'xl':xl}>
<#list breakpoints as breakpointkey,breakpointvalue>
	<#if breakpointvalue!=0>
		<#local class += ' col-${breakpointkey}-${breakpointvalue}' />
	</#if>
</#list>
<#if valign!=''><#local class += ' align-' + valign /></#if>
<#if flex><#local class += ' d-flex' /></#if>
<th<#if class?trim != ''> class="${class?trim}"</#if><#if id!=''> id="${id}"</#if><#if title!=''> title="${title}"</#if><#if scope!=''> scope="${scope}"</#if><#if colspan gt 0> colspan="${colspan}"</#if><#if rowspan gt 0> rowspan="${rowspan}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</th>
</#macro>

<#-- 
Macro: timeline

Description: Generates an HTML <ul> element to display a timeline, with an optional class and ID.

Parameters:
@param - class - string - optional - add to the HTML code.
@param - id - string - optional - the <ul> element containing the timeline.
@param - params - string - optional - add to the HTML code.
-->
<#macro timeline class='' id='' params=''>
<ul class="list list-timeline<#if class !=''> ${class}</#if>"<#if id !=''> id="${id}"</#if><#if params !=''> ${params}</#if>>
<#nested>
</ul>
</#macro>

<#-- 
Macro: timelineItem

Description: Generates an item for a timeline list.

Parameters:
@param - iconFace - string - optional - the icon face to use.
@param - iconBg - string - optional - for the icon.
@param - time - string - optional - with the item.
@param - label - string - required - the item.
@param - footer - string - optional - for the item.
@param - class - string - optional - add to the list item.
@param - id - string - optional - the list item.
@param - params - string - optional - add to the HTML code.
-->
<#macro timelineItem iconFace='check' iconBg='bg-primary' time='' label='' footer='' class='' id='' params=''>
<li<#if class !=''> class="${class}"</#if><#if id !=''> id="${id}"</#if><#if params !=''> ${params}</#if>>
	<#if iconFace !=''><div class="list-timeline-icon ${iconBg}"><@icon style=iconFace /></div></#if>
	<div class="list-timeline-content">
		<#if time !=''><div class="list-timeline-time">${time}</div></#if>
		<p class="list-timeline-title">${label}</p>
		<div class="list-timeline-body"><#nested></div>
		<#if footer !=''><div class="timeline-footer">${footer}</div></#if>
	</div>
</li>
</#macro>

<#macro timelineLabel bg='primary' label='' class='' id='' params=''>
<!-- no label -->
</#macro>

<#-- 
Macro: tr

Description: Generates an HTML <tr> element with an optional ID, class, and various other features.

Parameters:
@param - id - string - optional - the <tr> element.
@param - class - string - optional - the <tr> element.
- hide (string[], optional): an array of breakpoint names at which to hide the table row.
@param - align - string - optional - of the table cell contents.
@param - params - string - optional - add to the HTML code.

-->
<#macro tr id='' class='' hide=[] params=''>
<#local class += ' ' + displaySettings(hide,'table-cell') + ' ' + alignmentSettings(align) />
<tr<#if id!=''> id="${id}"</#if><#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
	<#nested>
</tr>
</#macro>

<#-- Macro: ul

Description: Generates an HTML unordered list (<ul>) with optional attributes and classes, including support for alignment, display settings, collapsing, and additional parameters.
Note: This macro depends on the "alignmentSettings" and "displaySettings" functions.

Parameters:
@param - id - string - optional - of the unordered list.
@param - class - string - optional - of the unordered list.
@param - align - string - optional - the unordered list within its parent element ("left", "center", or "right").
@param - hide - list - optional - strings representing the CSS display values for hiding the unordered list at different screen sizes (e.g. ["md:hidden"] to hide the unordered list on medium screens and up).
@param - collapsed - boolean - optional - list should be initially collapsed (hidden).
@param - params - string - optional - add to the unordered list, in the form of a string of HTML attributes.
-->
<#macro ul id='' class='' align='' hide=[] collapsed=false params=''>
<#local class += ' ' + alignmentSettings(align,'') + ' ' + displaySettings(hide,'block') />
<#if collapsed><#local class += ' ' + 'collapse' /></#if>
<ul<#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> ${id}</#if>>
<#nested>
</ul>
</#macro>

<#-- Macro: unstyledList

Description: Generates an HTML unordered list (<ul>) with the "unstyled" class, which removes default list styles, and optional attributes.

Parameters:
@param - id - string - optional - of the unordered list.
@param - params - string - optional - add to the unordered list, in the form of a string of HTML attributes.
-->
<#macro unstyledList id='' params=''>
<ul class="unstyled"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
	<#assign liClass = "margin">
	<#nested>
</ul>
</#macro>