commons_bs4_adminlte.html

 1   <#-- WARNING : be careful to white-space and lines break in FreeMarker macros.
 2    # This macro template can be used to output white-space-sensitive formats (like RSS files).
 3    # See http://dev.lutece.paris.fr/jira/browse/LUTECE-765
 4   -->
 5   <#-- Do not remove this comment -->
 6   <#-- Information about this commons file -->
 7   <#macro commonsFile>commons_bs4_adminlte.html</#macro>
 8   <#macro commonsName>Commons Bootstrap 4.3 + Admin LTE</#macro>
 9   <#macro commonsDescription>Freemarker Commons macros powered by Bootstrap CSS Framework 4.3</#macro>
 10   <#macro coreAdminCSSLinks>
 11   <link href="css/admin/style/bootstrap4/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap 4.3.1 -->
 12   <link href="css/admin/style/bootstrap4/bootstrap-colorpicker.min.css" rel="stylesheet">
 13   <link href="css/admin/jquery-ui.min.css" rel="stylesheet" > <!-- provided by core -->
 14   <link href="css/admin/jquery-ui.structure.min.css" rel="stylesheet" > <!-- provided by core -->
 15   <link href="css/admin/jquery-ui.theme.min.css" rel="stylesheet" > <!-- provided by core -->
 16   <link href="css/admin/tabler-icons.min.css"  rel="stylesheet" > <!-- Tabler Icons -->
 17   <link href="css/admin/bootstrap-icons.css"  rel="stylesheet" > <!-- Bootstrap Icons -->
 18   <link href="css/admin/style/bootstrap4/all.min.css" rel="stylesheet"> <!-- Font-Awesome 5.8.1 -->
 19   <link href="css/admin/style/bootstrap4/adminlte.min.css" rel="stylesheet">
 20   <link href="css/admin/style/bootstrap4/adminlte.override.css" rel="stylesheet">
 21   <link href="js/admin/lib/polipop/css/polipop.core.min.css" rel="stylesheet" >
 22   <link href="js/admin/lib/polipop/css/polipop.default.min.css" rel="stylesheet" > 
 23   <link href="css/admin/style/bootstrap4/portal_admin.css" rel="stylesheet">
 24   <link href="css/admin/portal_admin_site.css" rel="stylesheet"><!-- Site override admin CSS -Empty by default- -->
 25   </#macro>
 26   <#macro coreAdminJSLinks>
 27   <script src="js/util/progress-manager.js"></script>
 28   <script src="js/admin/jquery/jquery-ui.min.js"></script>
 29   <script src="js/admin/bootstrap-filestyle.min.js"></script> 
 30   <script src="js/admin/lib/polipop/polipop.min.js"></script> 
 31   <script src="js/admin/style/bootstrap4/bootstrap.bundle.min.js"></script> 
 32   <script src="js/admin/style/bootstrap4/bootstrap-colorpicker.min.js"></script>
 33   <script src="js/admin/style/bootstrap4/popper.min.js"></script>
 34   <script src="js/admin/style/bootstrap4/adminlte.min.js"></script>
 35   <script src="js/admin/style/bootstrap4/admin.js"></script> 
 36   </#macro>
 37   <#global gClassActive='active' />
 38   <#-- PAGINATION  -->
 39   <#macro pagination paginator>
 40   <#assign nbLinkPagesToDisplay = 10 />
 41   <#assign offsetPrev = nbLinkPagesToDisplay / 2 />
 42   <#assign offsetNext = nbLinkPagesToDisplay / 2 />
 43   <#if ( paginator.pageCurrent <= nbLinkPagesToDisplay - offsetPrev )>
 44   	<#assign offsetPrev = paginator.pageCurrent - 1 />
 45   	<#assign offsetNext = nbLinkPagesToDisplay - offsetPrev />
 46   <#elseif ( paginator.pageCurrent + offsetNext > paginator.pagesCount )>
 47   	<#assign offsetNext = paginator.pagesCount - paginator.pageCurrent />
 48   	<#assign offsetPrev = nbLinkPagesToDisplay - offsetNext />
 49   </#if>
 50   <#if ( paginator.pagesCount > 1 )>
 51   	<#if ( paginator.pageCurrent - offsetPrev > 1 )>
 52   		<@link href='${paginator.firstPageLink?xhtml}'>
 53   			<@icon style='double-left' /> #i18n{portal.util.labelFirst}
 54   		</@link>
 55   	</#if>
 56   	<#if ( paginator.pageCurrent > 1 )>
 57   		<@link href='${paginator.previousPageLink?xhtml}'>
 58   			<@icon style='angle-left' /> #i18n{portal.util.labelPrevious}
 59   		</@link>
 60   	<#else>
 61   	</#if>
 62   	<#if ( paginator.pageCurrent - offsetPrev > 1 )>
 63   		<strong>...</strong>
 64   	</#if>
 65   	<#list paginator.pagesLinks as link>
 66   		<#if link.index == paginator.pageCurrent>
 67   			<strong>${link.name}</strong>
 68   		<#else>
 69   			<@link href='${link.url?xhtml}'>${link.name}</@link>
 70   		</#if>
 71   	</#list>
 72   	<#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount )>
 73   		<strong>...</strong>
 74   	</#if>
 75   	<#if ( paginator.pageCurrent < paginator.pagesCount )>
 76   		<@link href='${paginator.nextPageLink?xhtml}'>
 77   			<@icon style='angle-right' />&nbsp;#i18n{portal.util.labelNext}
 78   		</@link>
 79   		<#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount )>
 80   			<@link href='${paginator.lastPageLink?xhtml}'>
 81   				<@icon style='angle-double-right' />&nbsp;#i18n{portal.util.labelLast}
 82   			</@link>
 83   		</#if>
 84   	</#if>
 85   </#if>
 86   </#macro>
 87   <#-- PAGINATION ADMIN -->
 88   <#macro paginationAdmin paginator combo=0 form=1 nb_items_per_page=nb_items_per_page showcount=1 showall=0>
 89   <#if (paginator.pagesCount > 1) >
 90   	<@paginationPageLinks paginator=paginator />
 91   </#if>
 92   <@div align='right'>
 93   	<#if form == 1 >
 94   		<@tform type='inline'>
 95   			<@paginationItemCount paginator=paginator combo=combo nb_items_per_page=nb_items_per_page showcount=showcount showall=showall/>
 96   		</@tform>
 97   	<#else>
 98   		<@paginationItemCount paginator=paginator combo=combo nb_items_per_page=nb_items_per_page showcount=showcount showall=showall/>
 99   	</#if>
 100   </@div>
 101   </#macro>
 102   <#-- PAGINATION LINKS -->
 103   <#macro paginationPageLinks paginator >
 104   <#assign nbLinkPagesToDisplay = 10 />
 105   <#assign offsetPrev = nbLinkPagesToDisplay / 2 />
 106   <#assign offsetNext = nbLinkPagesToDisplay / 2 />
 107   <#if ( paginator.pageCurrent <= nbLinkPagesToDisplay - offsetPrev )>
 108   	<#assign offsetPrev = paginator.pageCurrent - 1 />
 109   	<#assign offsetNext = nbLinkPagesToDisplay - offsetPrev />
 110   <#elseif ( paginator.pageCurrent + offsetNext > paginator.pagesCount )>
 111   	<#assign offsetNext = paginator.pagesCount - paginator.pageCurrent />
 112   	<#assign offsetPrev = nbLinkPagesToDisplay - offsetNext />
 113   </#if>
 114   <@ul class='pagination mt-4'>
 115   <#if ( paginator.pageCurrent - offsetPrev > 1 )>
 116   <li class="page-item">
 117   	<@link href='${paginator.firstPageLink?xhtml}' class='page-link'>
 118   		${paginator.labelFirst}
 119   	</@link>
 120   </li>
 121   </#if>
 122   <#if (paginator.pageCurrent > 1) >
 123   <li class="page-item previous">
 124   	<@link href='${paginator.previousPageLink?xhtml}' class='page-link'>
 125   		${paginator.labelPrevious}
 126   	</@link>
 127   </li>
 128   <#else>
 129   <li class="page-item disabled">
 130   	<@link href='${paginator.firstPageLink?xhtml}' class='page-link'>${paginator.labelPrevious}</@link>
 131   </li>
 132   </#if>
 133   <#if ( paginator.pageCurrent - offsetPrev > 1 )>
 134   <li>
 135   	<@link href='${(paginator.pagesLinks?first).url?xhtml}' class='page-link'><strong>...</strong></@link>
 136   </li>
 137   </#if>
 138   <#list paginator.pagesLinks as pageLink>
 139   <#if ( pageLink.index == paginator.pageCurrent )>
 140   	<li class="page-item active">
 141   		<@link href='${pageLink.url?xhtml}' class='page-link'>${pageLink.name}</@link>
 142   	</li>
 143   <#else>
 144   	<li>
 145   		<@link href='${pageLink.url?xhtml}' class='page-link'>${pageLink.name}</@link>
 146   	</li>
 147   </#if>
 148   </#list>
 149   <#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount )>
 150   <li>
 151   	<@link href='${(paginator.pagesLinks?last).url?xhtml}' class='page-link'><strong>...</strong></@link>
 152   </li>
 153   </#if>
 154   <#if (paginator.pageCurrent < paginator.pagesCount) >
 155   	<li class="page-item next">
 156   		<@link href="${paginator.nextPageLink?xhtml}" class='page-link'>
 157   			${paginator.labelNext}
 158   		</@link>
 159   	</li>
 160   	<#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount )>
 161   		<li class="page-item next">
 162   			<@link href='${paginator.lastPageLink?xhtml}' class='page-link'>
 163   				${paginator.labelLast}
 164   			</@link>
 165   		</li>
 166   	</#if>
 167   <#else>
 168   	<li class="page-item disabled">
 169   		<@link href='${paginator.lastPageLink?xhtml}' class='page-link'>${paginator.labelNext}</@link>
 170   	</li>
 171   </#if>
 172   </@ul>
 173   </#macro>
 174   <#-- PAGINATION COMBO -->
 175   <#macro paginationCombo paginator nb_items_per_page=nb_items_per_page showall=0>
 176   <@formGroup labelFor='${paginator.itemsPerPageParameterName}' labelKey='${paginator.labelItemCountPerPage}' labelClass='small mr-3' formStyle='inline'>
 177   <@inputGroup>
 178   	<@select params='data-max-item="${paginator.itemsCount}"' size='sm' name='${paginator.itemsPerPageParameterName}' id='${paginator.itemsPerPageParameterName}' title='${paginator.labelItemCountPerPage}'>
 179     		<#list [ "10" , "20" , "50" , "100" ] as nb>
 180     			<#if nb_items_per_page = nb >
 181     				<option selected="selected" value="${nb}">${nb}</option>
 182     			<#else>
 183     				<option value="${nb}">${nb}</option>
 184     			</#if>
 185     		</#list>
 186     		<#if showall ==1>
 187     			<#if paginator.itemsCount &gt; 100 >
 188     				<option <#if nb_items_per_page?number = paginator.itemsCount?number >selected="selected"</#if> value="${paginator.itemsCount}" class="${nb_items_per_page}">#i18n{portal.util.labelAll}</option>
 189     			</#if>
 190     		</#if>
 191   	</@select>
 192   	<@inputGroupItem type='btn'>
 193   		<@button type='submit' color='dark' size='xs' title='#i18n{portal.util.labelRefresh}' buttonIcon='check' hideTitle=['all'] />
 194   	</@inputGroupItem>
 195   </@inputGroup>
 196   </@formGroup>
 197   </#macro>
 198   <#-- PAGINATION COUNT -->
 199   <#macro paginationItemCount paginator combo=0 nb_items_per_page=nb_items_per_page showcount=1 showall=0>
 200   <#-- Display combo -->
 201   <#if combo == 1 >
 202     <@paginationCombo paginator=paginator nb_items_per_page=nb_items_per_page showall=showall />
 203   </#if>
 204   <#-- Display item count -->
 205   <#if showcount == 1 >
 206   <span class="showcount small">
 207   	<#if (paginator.labelItemCount)?? && paginator.labelItemCount?has_content>&#160;${paginator.labelItemCount} : </#if> ${paginator.itemsCount}
 208   </span>
 209   </#if>
 210   </#macro>
 211   <#-- NAVIGATION -->
 212   <#macro item_navigation item_navigator id='item-navigator' align='' hideButtonTitle=[] buttonColor='info' buttonSize='sm'>
 213   <#local class = alignmentSettings(align,'') />
 214   <nav id="${id}" class="${class}">
 215   <#if (item_navigator.currentItemId > 0)>
 216   	<@aButton href='${item_navigator.previousPageLink?xhtml}' title='#i18n{portal.util.labelPrevious}' buttonIcon='arrow-left' color='${buttonColor}' hideTitle=hideButtonTitle size='${buttonSize}' />
 217   </#if>
 218   <#if (item_navigator.currentItemId < item_navigator.listItemSize - 1) >
 219   	<@aButton href='${item_navigator.nextPageLink?xhtml}' title='#i18n{portal.util.labelNext}' buttonIcon='arrow-right' color='${buttonColor}' hideTitle=hideButtonTitle size='${buttonSize}' />
 220   </#if>
 221   </nav>
 222   </#macro>
 223   <#-- MESSAGES -->
 224   <#macro messages errors=[] infos=[] warnings=[] errors_class='danger' infos_class='info' warnings_class='warning'>
 225   <#if errors??>
 226   	<#if errors?size &gt; 0>
 227   		<@alert color=errors_class id='messages_errors_div' dismissible=true>
 228   			<#list errors as error>
 229   			<span class="icon"><@icon style='exclamation-circle' /></span> ${error.message}<br />
 230   			</#list>
 231   		</@alert>
 232   	</#if>
 233   </#if>
 234   <#if infos??>
 235   	<#if infos?size &gt; 0>
 236   		<@alert color=infos_class id='messages_infos_div' dismissible=true>
 237   			<#list infos as info>
 238   				<span class="icon"><@icon style='info-circle' /></span> ${info.message}<br />
 239   			</#list>
 240   		</@alert>
 241   	</#if>
 242   </#if>
 243   <#if warnings??>
 244   	<#if warnings?size &gt; 0>
 245   		<@alert color=warnings_class id='messages_warnings_div' dismissible=true>
 246   			<#list warnings as warning>
 247   				<span class="icon"><@icon style='info-circle' /></span> ${warning.message} <br />
 248   			</#list>
 249   		</@alert>
 250   	</#if>
 251   </#if>
 252   </#macro>
 253   <#-- TABLE -->
 254   <#-- class:  -->
 255   <#macro table id='' class='' responsive=true condensed=true hover=true striped=false bordered=false headBody=false collapsed=false caption='' params='' deprecated...>
 256   <@deprecatedWarning args=deprecated />
 257   <#local class = class />
 258   <#if condensed> <#local class += ' table-condensed' /> </#if>
 259   <#if hover>     <#local class += ' table-hover' /> </#if>
 260   <#if striped>   <#local class += ' table-striped'   /> </#if>
 261   <#if bordered>  <#local class += ' table-bordered'  /> </#if>
 262   <#if collapsed> <#local class += ' collapse' /> </#if>
 263   <#if responsive><div class="table-responsive"></#if>
 264   <table class="table ${class?trim}" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 265   <#if caption!=''><caption>${caption}</caption></#if>
 266   <#if headBody><thead></#if>
 267   <#nested>
 268   <#if headBody></tbody></#if>
 269   </table>
 270   <#if responsive></div></#if>
 271   </#macro>
 272   <#macro tableHead id='' class='' params=''>
 273   <thead<#if id!=''> id="${id}"</#if><#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
 274   <#nested>
 275   </thead>
 276   </#macro>
 277   <#macro tableBody id='' class='' params=''>
 278   <tbody<#if id!=''> id="${id}"</#if><#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
 279   <#nested>
 280   </tbody>
 281   </#macro>
 282   <#macro tableFoot id='' class='' params=''>
 283   <tfoot <#if id!=''> id="${id}"</#if><#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
 284   <#nested>
 285   </tfoot>
 286   </#macro>
 287   <#macro tableHeadBodySeparator id='' class='' params=''>
 288   </thead>
 289   <tbody<#if id!=''> id="${id}"</#if><#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
 290   </#macro>
 291   <#-- MACRO TR -->
 292   <#macro tr id='' class='' hide=[] params=''>
 293   <#local class += ' ' + displaySettings(hide,'table-cell') + ' ' + alignmentSettings(align) />
 294   <tr<#if id!=''> id="${id}"</#if><#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if>>
 295   <#nested>
 296   </tr>
 297   </#macro>
 298   <#-- MACRO TH -->
 299   <#-- valign: baseline|top|middle|bottom|bottom|text-top -->
 300   <#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=''>
 301   <#local class += ' ' + displaySettings(hide,'table-cell') + ' ' + alignmentSettings(align,'text') />
 302   <#if cols!=0>
 303   	<#local class += ' col-${cols}' />
 304   </#if>
 305   <#local breakpoints = {'xs':xs, 'sm':sm, 'md':md, 'lg':lg, 'xl':xl}>
 306   <#list breakpoints as breakpointkey,breakpointvalue>
 307   	<#if breakpointvalue!=0>
 308   		<#local class += ' col-${breakpointkey}-${breakpointvalue}' />
 309   	</#if>
 310   </#list>
 311   <#if valign!=''><#local class += ' align-' + valign /></#if>
 312   <#if flex><#local class += ' d-flex' /></#if>
 313   <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>>
 314   <#nested>
 315   </th>
 316   </#macro>
 317   <#-- MACRO TD -->
 318   <#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...>
 319   <@deprecatedWarning args=deprecated />	
 320   <#local class += ' ' + displaySettings(hide,'table-cell') + ' ' + alignmentSettings(align,'') />
 321   <#if cols!=0>
 322   	<#local class += ' col-${cols}' />
 323   </#if>
 324   <#local breakpoints = {'xs':xs, 'sm':sm, 'md':md, 'lg':lg, 'xl':xl}>
 325   <#list breakpoints as breakpointkey,breakpointvalue>
 326   	<#if breakpointvalue!=0>
 327   		<#local class += ' col-${breakpointkey}-${breakpointvalue}' />
 328   	</#if>
 329   </#list>
 330   <#if valign!=''><#local class += ' align-' + valign /></#if>
 331   <#if flex><#local class += ' d-flex' /></#if>
 332   <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>>
 333   <#nested>
 334   </td>
 335   </#macro>
 336   <#-- SORT -->
 337   <#macro sort jsp_url attribute id="" >
 338   <#if jsp_url?contains("?")>
 339   	<#assign sort_url = jsp_url + "&amp;sorted_attribute_name=" + attribute + "&amp;asc_sort=" />
 340   <#else>
 341   	<#assign sort_url = jsp_url + "?sorted_attribute_name=" + attribute + "&amp;asc_sort=" />
 342   </#if>
 343   <@btnGroup ariaLabel='sortButton'>
 344   	<@aButton color='default' size='xs' id='sort${id!}_${attribute!}' href='${sort_url}true#sort${id!}_${attribute!}' title='#i18n{portal.util.sort.asc}' buttonIcon='chevron-up' hideTitle=['all'] />
 345   	<@aButton color='default' size='xs' href='${sort_url}false#sort${id!}_${attribute!}' title='#i18n{portal.util.sort.desc}' buttonIcon='chevron-down' hideTitle=['all'] />
 346   </@btnGroup>
 347   </#macro>
 348   <#-- ICONS -->
 349   <#-- Icons from FontAwesome 5.8.1 -->
 350   <#macro icon prefix='fa-' style='fa-lg' class='' title='' id='' params=''>
 351   <#if style='docker' || style = 'github' || style='gitlab' || style='java' || style='jira' || style='jenkins' || style = 'twitter' >
 352   	<#local prefix = 'fab ' + prefix />
 353   <#else>
 354   	<#local prefix = 'fas ' + prefix />
 355   </#if>
 356   <#switch style>
 357   	<#case 'arrows'>
 358   		<#local iconStyle = 'arrows-alt' />
 359   	<#break>
 360   	<#case 'arrows-h'>
 361   		<#local iconStyle = 'arrows-alt-h' />
 362   	<#break>
 363   	<#case 'arrows-v'>
 364   		<#local iconStyle = 'arrows-alt-v' />
 365   	<#break>
 366   	<#case 'clock-o'>
 367   		<#local iconStyle = 'clock' />
 368   	<#break>
 369   	<#case 'close'>
 370   		<#local iconStyle = 'times' />
 371   	<#break>
 372   	<#case 'external-link'>
 373   		<#local iconStyle = 'external-link-alt' />
 374   	<#break>
 375   	<#case 'file-pdf-o'>
 376   		<#local iconStyle = 'file-pdf' />
 377   	<#break>
 378   	<#case 'pencil'>
 379   		<#local iconStyle = 'edit' />
 380   	<#break>
 381   	<#case 'refresh'>
 382   		<#local iconStyle = 'sync' />
 383   	<#break>
 384   	<#default>
 385   	<#local iconStyle = style />
 386   </#switch>
 387   	<i class="${prefix}${iconStyle} fa-fw<#if class!=''> ${class}</#if>" aria-hidden="true"<#if title!=''> title='${title}'</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>></i>
 388   </#macro>
 389   <#-- ICONSTACK 																					-->
 390   <#-- iconStack 																					-->
 391   <#-- class: par défaut 2x peut être tout autre taille voir doc FontAwesome  					-->			
 392   <#-- nested: 2 macro @icon une class fa-stack-2x , autre avec class fa-stack-1x dans l'ordre   	-->
 393   <#macro iconStack class='fa-2x' id='' params=''>
 394   <span class="fa-stack ${class}"<#if id!=''> ${id}</#if><#if params!=''> ${params}</#if>>
 395   <#nested>
 396   </span>
 397   </#macro>
 398   <#-- FORM -->
 399   <#-- type: inline/horizontal/form -->
 400   <#-- enctype: multipart/form-data | text/plain -->
 401   <#macro tform type='horizontal' class='' align='' hide=[] action='' method='post' name='' id='' role='' collapsed=false enctype='' params='' deprecated...>
 402   	<@deprecatedWarning args=deprecated />	
 403   	<#local class = class />
 404   	<#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
 405   	<#if hide??><#local class += ' ' + displaySettings(hide,'block') /></#if>
 406   	<#if collapsed><#local class += ' collapse' /></#if>
 407   	<#switch type>
 408   		<#case 'horizontal'>
 409   			<#local class += ' form-horizontal'>
 410   			<#break>
 411   		<#case 'inline'>
 412   			<#local class += ' form-inline align-items-center'>
 413   			<#break>
 414   		<#default>
 415   			<#local class += ' form'>
 416   	</#switch>
 417   	<form class="<#if class!=''>${class?trim}</#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>>
 418   		<#nested>
 419   	</form>
 420   </#macro>
 421   <#-- FORM ELEMENT STRUCTURE 												  								-->
 422   <#-- formStyle values: horizontal/empty/inline Default is horizontal 	-->
 423   <#-- class: 						 								-->
 424   <#-- groupStyle: success/error -->
 425   <#macro formGroup id='' formStyle='horizontal' groupStyle='' class='' rows=1 labelKey='' labelFor='' labelId='' labelClass='' helpKey='' mandatory=false htmlRequired=true hideLabel=[] collapsed=false params='' deprecated...>
 426   <@deprecatedWarning args=deprecated />	
 427   <#if groupStyle = 'success'>
 428   	<#local validation = 'is-valid'>
 429   <#elseif groupStyle='error'>
 430   	<#local validation = 'is-invalid'>
 431   </#if>
 432   <#if collapsed><#local class += ' collapse' /></#if>
 433   <div class="form-group<#if formStyle='horizontal'> row</#if><#if class!=''> ${class?trim}</#if><#if validation?? && validation!=''> ${validation}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 434   	<#local displayLabelClass = displaySettings(hideLabel,'inline-flex') />
 435   	<#if rows=1>
 436   		<#if labelKey!='' && formStyle='horizontal'>
 437   			<#local labelClass += ' col-sm-12 col-lg-3 col-form-label text-right'>
 438   			<#if displayLabelClass?contains('d-none')>
 439   				<#local divClass='col'>
 440   			<#else>
 441   				<#local divClass = 'col-lg-6'>
 442   			</#if>
 443   		<#elseif formStyle = 'inline'>
 444   			<#local divClass = 'mb-2 mr-sm-2'>
 445   			<#local labelClass += ' mr-2' />
 446   		<#else>
 447   			<#local divClass='col-sm-12 offset-md-3 col-md-6'>
 448   		</#if>
 449   	<#else>
 450   		<#local labelClass += ' col-sm-12'>
 451   		<#local divClass = 'col-sm-12'>
 452   	</#if>
 453   	<#if labelKey!=''>
 454   		<@formLabel class=labelClass?trim labelFor=labelFor labelId=labelId labelKey=labelKey hideLabel=hideLabel mandatory=mandatory />
 455   	</#if>
 456   	<#if formStyle !='inline'>
 457   		<div class="${divClass}">
 458   	</#if>
 459   	<#assign propagateMandatory = mandatory>
 460   	<#assign propagateHtmlRequired = htmlRequired>
 461   	<#nested>
 462   	<#assign propagateMandatory = false>
 463   	<#assign propagateHtmlRequired = true>
 464   	<#if helpKey!=''><small class="text-muted<#if formStyle!='inline'> form-text</#if>" <#if labelFor!=''>aria-describedby="${labelFor}"</#if>>${helpKey}</small></#if>
 465   	<#if formStyle !='inline'>
 466   		</div>
 467   	</#if>
 468   </div>
 469   </#macro>
 470   <#macro formField class=''>
 471   <div class="form-row<#if class!=''> ${class}</#if>">
 472   <#nested>
 473   </div>
 474   </#macro>
 475   <#macro formLabel class='' labelFor='' labelId='' labelKey='' hideLabel=[] mandatory=true deprecated...>
 476   <@deprecatedWarning args=deprecated />	
 477   <#local labelClass = ' ' + displaySettings(hideLabel,'') />
 478   <label class="<#if class !=''>${class?trim}</#if>" for="${labelFor}" <#if labelId!=''> id="${labelId}"</#if><#if mandatory=true>ariaLabel="${labelKey} [#i18n{portal.users.modify_attribute.labelMandatory}]"</#if>>
 479   <#if labelKey !=''><span class="${labelClass}">${labelKey}<#if mandatory>&#160;<@icon style='asterisk' /></#if></span><#else><#nested></#if>
 480   </label>
 481   </#macro>
 482   <#macro formHelp style='inline' class='' labelFor=''>
 483   <#if style='inline'>
 484   <small class="text-muted<#if style!='inline'> form-text</#if><#if class!=''> ${class}</#if>" <#if labelFor!=''>aria-describedby="${labelFor}"</#if>>
 485   	<#nested>
 486   </small>
 487   <#else>
 488   <span class="form-help" data-toggle="popover" data-trigger="hover focus" data-html="true" data-content="<#nested>">?</span>
 489   </#if>
 490   </#macro>
 491   <#-- ------------------------------------------------------------------------------------------------------------------------------------------ -->
 492   <#-- INPUTS & TEXTAREA 																															-->
 493   <#-- ------------------------------------------------------------------------------------------------------------------------------------------ -->
 494   <#-- name : Mandatory : Name for field 																											-->
 495   <#-- type : text/textarea/password/email/file/number/range/color/hidden/tel. Default : text 													-->
 496   <#-- value: '' 																																	-->
 497   <#-- class: '' 																																	-->
 498   <#-- id: '' 																																	-->
 499   <#-- title:  '' 																																-->
 500   <#-- size: ''																																	-->
 501   <#-- inputSize: 0																																-->
 502   <#-- maxlength: 0																																-->
 503   <#-- placeHolder: ''																															-->
 504   <#-- rows: 4 Textarea specific																													-->
 505   <#-- cols: 40 Textarea specific																													-->
 506   <#-- pattern:  '' [A-F][0-9]{5}																													-->
 507   <#-- tabIndex:  ''																																-->
 508   <#-- disabled:  false 																															-->
 509   <#-- readonly:  false 																															-->
 510   <#-- min: 0 																																	-->
 511   <#-- max: 0 																																	-->
 512   <#-- min: 0 																																	-->
 513   <#-- params: '' 																																-->
 514   <#-- mandatory: false 																															-->
 515   <#-- language: for input type DATE and datepickers																								-->
 516   <#-- defaultDate: Format must be "yyyy-MM-dd hh:mm"																								-->
 517   <#-- minDate: Format must be "yyyy-MM-dd hh:mm"																									-->
 518   <#-- maxDate: Format must be "yyyy-MM-dd hh:mm"																									-->
 519   <#-- defaultHour: Format must be "hh"																											-->
 520   <#-- defaultMinute: Format must be "mm"																											-->
 521   <#-- minTime : Format must be "hh:mm"																											-->
 522   <#-- maxTime : Format must be "hh:mm"																											-->
 523   <#-- format='' : Format for DB 																													-->
 524   <#-- showFormat='' 	Format for User																												-->
 525   <#-- dateRangeEndId='' Id for date range date end																								-->
 526   <#-- dateParams : [] https://flatpickr.js.org/options/ for options list | Example : dateParams=[{'inline': 'true'},{'hourIncrement': '4'}] 		-->
 527   <#-- showFileUrl=false 																															-->
 528   <#-- fileURL='' 																																-->
 529   <#-- fileName='' 																																-->
 530   <#-- datalist='' To comma separated list of values Example : datalist='titi,tata'																-->
 531   <#-- ------------------------------------------------------------------------------------------------------------------------------------------ -->
 532   <#macro input name id='' type='text' value='' class='' size='' inputSize=0 maxlength=0 placeHolder='' rows=4 cols=40 richtext=false tabIndex='' disabled=false readonly=false pattern='' title='' min=0 max=0 params='' mandatory=false language=.locale minDate='' maxDate='' defaultDate='' minTime='' maxTime='' defaultTime='' time_24hr=true format='' showFormat='' dateRangeEndId='' dateParams=[] showFileUrl=false fileURL='' fileName='' datalist=''>
 533   <#if propagateMandatory?? && propagateMandatory && propagateHtmlRequired ><#local mandatory = true /></#if>
 534   	<#if type='textarea'>
 535   		<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>
 536   	<#elseif type='text' || type='search' || type='password' || type='email' || type='file' || type='number' || type='color' || type='range' || type='tel' || type='datalist'>
 537   		<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 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>>
 538   		<#if type='file'>
 539   			<input type="hidden" id=${id}Key name="${name}Key" value="${value}" />
 540   			<#if showFileUrl && fileURL?? && fileName??>
 541   				<@link href="${fileURL}">${fileName}</@link>
 542   			</#if>
 543   		</#if>
 544   		<#if type='datalist'>
 545   			<#if id !='' && datalist !='' >
 546   				<datalist id="${name}_list">
 547   				<#assign options = datalist?split(',')>
 548   				<#list options as opt>
 549   					<option value="${opt!}">
 550   				</#list>
 551   				</datalist>
 552   			<#else>
 553   				<!-- Missing id or params attribute for macro @input for type "datalist" -->
 554   			</#if>
 555   		</#if>
 556   	<#elseif type='date' || type='datetime' || type='daterange' || type='datetimerange' || type='time'>
 557   		<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> />
 558   		<#if type='date'>
 559   			<@getDate idField='${id}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate dateOptions=dateParams />
 560   		<#elseif type='datetime'>
 561   			<@getDateTime idField='${id}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate minTime=minTime maxTime=maxTime dateOptions=dateParams />
 562   		<#elseif type='daterange'>
 563   			<#if dateRangeEndId != ''>
 564   				<@getDateRange idField='${id}' idEndField='${dateRangeEndId}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate dateOptions=dateParams />
 565   			<#else>
 566   				<@alert class='danger'>${i18n("portal.util.datepicker.rangeEndId.mandatory")}</@alert>
 567   			</#if>
 568   		<#elseif type='datetimerange'>
 569   			<#if dateRangeEndId != ''>
 570   				<@getDateTimeRange idField='${id}' idEndField='${dateRangeEndId}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate minTime=minTime maxTime=maxTime dateOptions=dateParams  />
 571   			<#else>
 572   				<@alert class='danger'>${i18n("portal.util.datepicker.rangeEndId.mandatory")}</@alert>
 573   			</#if>
 574   		<#elseif type='time'>
 575   			<@getTime idField='${id}' language=language format='H:i' showFormat='H:i' minTime=minTime maxTime=maxTime time_24hr=time_24hr defaultDate=defaultDate dateOptions=dateParams />
 576   		</#if>
 577   		<#if id=''><@alert class='danger'>${i18n("portal.util.datepicker.id.mandatory")}</@alert></#if>
 578   	<#elseif type='hidden'>
 579   		<input type="hidden" name="${name}" <#if id!=''>id="${id}"</#if> value="${value}" />
 580   	<#else><@icon style='warning' />Type not supported
 581   	</#if>
 582   </#macro>
 583   <#-- STATIC TEXT -->
 584   <#-- Bootstrap colors: primary/secondary/success/info/warning/danger/light/black/muted/white/text-black-50/text-white-50 -->
 585   <#macro staticText inForm=true color='' id='' params=''>
 586   <p class="<#if inForm>form-control-plaintext</#if><#if color!=''> text-${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 587   	<#nested>
 588   </p>
 589   </#macro>
 590   <#--- MACRO SELECT (TO REPLACE "COMBO" MACROS) --->
 591   <#macro select name id=name class='' items='' default_value='' size='' sort=false multiple=0 params='' title='' disabled=false tabIndex=0 maxLength=0 mandatory=false>
 592   <#if propagateMandatory?? && propagateMandatory && propagateHtmlRequired ><#local mandatory = true /></#if>
 593   	<select id="${id}" name="${name}" class="form-control<#if size!=''> form-control-${size}</#if><#if class!=''> input-${class}</#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>>
 594   	<#if items?has_content>
 595   		<#if sort=true>
 596   			<#list items?sort_by("name") as item>
 597   				<#if default_value="${item.code}">
 598   					<option selected="selected" value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
 599   				<#else>
 600   					<option value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
 601   				</#if>
 602   			</#list>
 603   		<#else>
 604   			<#if maxLength gt 0>
 605   				<#list items as item>
 606   					<#if maxLength < item.name?length >
 607   						<#assign item_new = "..." + "${item.name?substring(item.name?length-maxLength+3)}" >
 608   					<#else>
 609   						<#assign item_new = "${item.name}">
 610   					</#if>
 611   					<#if default_value="${item.code}">
 612   						<option selected="selected" value="${item.code}" >${item_new}</option>
 613   					<#else>
 614   						<option value="${item.code}" >${item_new}</option>
 615   					</#if>
 616   				</#list>
 617   			<#else>
 618   				<#list items as item>
 619   					<#if default_value="${item.code}">
 620   						<option selected="selected" value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
 621   					<#else>
 622   						<option value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
 623   					</#if>
 624   				</#list>
 625   			</#if>
 626   		</#if>
 627   	<#else>
 628   		<#nested>
 629   	</#if>
 630   	</select>
 631   </#macro>
 632   <#--- MACRO OPTIONS  --->
 633   <#--- items : list with label, value, selected values  --->
 634   <#macro options items selected='' id=false class='' params=''>
 635   <#if items??>
 636   	<#list items as item>
 637   		<#local idItem><#if id>${item.code}_${item?index}<#else></#if></#local>
 638   		<#local selectedItem><#if selected !=''><#if item.code?string=selected>true<#else>false</#if><#else>${item.selected?c}</#if></#local>
 639   		<@option label=item.name value=item.code id=idItem class=class selected=selectedItem?boolean disabled=item.disabled params=params /> 
 640   	</#list>
 641   </#if>
 642   </#macro>
 643   <#macro option label value id='' class='' selected=false disabled=false params=''>
 644   <option<#if id!=''>id="${id}</#if><#if class!=''> class="${class}</#if> value="${value!}"<#if selected> selected</#if><#if disabled> disabled</#if><#if params!=''> ${params}</#if>>${label!} <#nested></option>
 645   </#macro>
 646   <#-- CHECKBOX 																							-->
 647   <#-- orientation: vertical/inline. Default is vertical 	-->
 648   <#-- TODO  																									-->
 649   <#macro checkBox name id='' class='' labelKey='' orientation='vertical' value='' tabIndex='' title='' disabled=false readonly=false checked=false params='' mandatory=false deprecated...>
 650   <@deprecatedWarning args=deprecated />	
 651   <#if id = ''><#local id = name /></#if>
 652   <#if orientation!='switch'>
 653   	<div class="form-check<#if orientation='inline'> form-check-inline</#if>"<#if orientation!='vertical'> style="margin-top:0.5rem;"</#if>>
 654   	<input type="checkbox" class="form-check-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 params!=''> ${params}</#if><#if mandatory> required</#if> />
 655   	<label class="form-check-label" for="${id}" <#if title!=''> title="${title}"</#if>>
 656   	<#if labelKey!=''>${labelKey}<#else><#nested></#if>
 657   	</label>
 658   	</div>
 659   <#else>
 660   	<div class="custom-control custom-switch">
 661   		<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 params!=''> ${params}</#if><#if mandatory> required</#if>>
 662   		<label class="custom-control-label"  for="${id}" <#if title!=''> title="${title}"</#if>><#if labelKey!=''>${labelKey}<#else><#nested></#if></label>
 663   	</div>
 664   </#if>
 665   </#macro>
 666   <#-- RADIO BUTTON -->
 667   <#-- orientation: vertical/inline. Default is vertical -->
 668   <#macro radioButton name id='' labelKey='' labelFor='' orientation='vertical' value='' tabIndex='' title='' disabled=false readonly=false checked=false params='' mandatory=false >
 669   <#if propagateMandatory?? && propagateMandatory && propagateHtmlRequired ><#local mandatory = true /></#if>
 670   <#if orientation='vertical'><div class="radio">	</#if>
 671   <label<#if orientation!='vertical'> class="radio-inline"</#if> for="${labelFor}">
 672   <input type="radio" 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><#if params!=''> ${params}</#if> />
 673   <#if labelKey!=''>${labelKey}<#else><#nested></#if>
 674   </label>
 675   <#if orientation='vertical'></div></#if>
 676   </#macro>
 677   <#-- INPUT-GROUP -->
 678   <#-- size: sm/lg/no size-->
 679   <#macro inputGroup id='' class='' size='' params=''>
 680   	<div class="input-group<#if size!=''> input-group-${size}</#if><#if class!=''> ${class}</#if>" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 681   		<#nested>
 682   	</div>
 683   </#macro>
 684   <#macro inputGroupItem id='' pos='append' type='btn' params=''>
 685   <#-- pos: append / prepend | Default append -->
 686   <#-- type: btn/text. default is btn	-->
 687   <div class="input-group-${pos}">
 688   <#if type = 'text'>
 689   	<div class="input-group-${type}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 690   </#if>
 691   		<#nested>
 692   <#if type = 'text'>
 693   	</div>
 694   </#if>
 695   </div>
 696   </#macro>
 697   <#-- DROPDOWN MENU -->
 698   <#-- class: dropdown-menu-right -->
 699   <#-- Expected content : <li><a>Your link here</a></li> -->
 700   <#macro dropdownMenu class='' id='' params=''>
 701   	<ul class="dropdown-menu ${class}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 702   		<#nested>
 703   	</ul>
 704   </#macro>
 705   <#-- ROW -->
 706   <#macro row class='' id='' collapsed=false align='' params=''>
 707   <#if collapsed><#local class += ' ' + 'collapse' /></#if>
 708   <#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
 709   	<div class="row<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 710   		<#nested>
 711   	</div>
 712   </#macro>
 713   <#-- COLUMNS -->
 714   <#-- cols = col-(<544px)/ col-sm-(>=544px)/ col-md-(>=768px)/ col-lg-(>=992px)/ col-xl-(>=1200px) -->
 715   <#-- Push and Pull are deprecated in Bootstrap 4 -->
 716   <#-- offsetXs, offsetSm, offsetMd, offsetLg and offsetXl are deprecated. Use offset={} instead where the values are listed as following: offset={'xs':int, 'sm':int, 'md':int, 'lg':int, 'xl':int} -->
 717   <#-- Order uses flexbox. Use Order for xs/all breakpoints this way: order=int, or for other breakpoints this way: order={'sm':int, 'md':int, 'lg':int, 'xl':int} -->
 718   <#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=12 sm=0 md=0 lg=0 xl=0 order={} id='' class='' align='' collapsed=false params=''>
 719   <#if collapsed><#local class += ' ' + 'collapse' /></#if>
 720   <#if align!=''><#local class+= ' ' + alignmentSettings(align,'') /></#if>
 721   <#local class += ' ' + responsiveDisplay('col',{'xs':xs, 'sm':sm, 'md':md, 'lg':lg, 'xl':xl}) />
 722   <#if offset?has_content>
 723   	<#local class += ' ' + responsiveDisplay('offset',offset) />
 724   <#elseif offsetXs &gt; 0 || offsetSm &gt; 0 || offsetMd &gt; 0 || offsetLg &gt; 0 || offsetXl &gt; 0>
 725   	<#local class += ' ' + responsiveDisplay('offset',{'xs':offsetXs, 'sm':offsetSm, 'md':offsetMd, 'lg':offsetLg, 'xl':offsetXl}) />
 726   </#if>
 727   <#if order?has_content>
 728   	<#if order?is_number>
 729   		<#local class += ' order-${order}' />
 730   	<#elseif order?is_hash>
 731   		<#local class += ' ' + responsiveDisplay('order',order) />
 732   	</#if>
 733   </#if>
 734   <${tag} class="<#if class?trim!=''>${class?trim}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 735   	<#nested>
 736   </${tag}>
 737   </#macro>
 738   <#-- LISTS -->
 739   <#macro ul id='' class='' align='' hide=[] collapsed=false params=''>
 740   	<#local class += ' ' + alignmentSettings(align,'') + ' ' + displaySettings(hide,'block') />
 741   	<#if collapsed><#local class += ' ' + 'collapse' /></#if>
 742   	<ul<#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> ${id}</#if>>
 743   		<#nested>
 744   	</ul>
 745   </#macro>
 746   <#macro li id='' params='' class='' hide=[] align=''>
 747   		<#local class += ' ' + alignmentSettings(align,'') + ' ' + displaySettings(hide,'block') />
 748   		<li<#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> ${id}</#if>>
 749   			<#nested>
 750   		</li>
 751   </#macro>
 752   <#-- DIV -->
 753   <#macro div id='' class='' hide=[] collapsed=false align='' params=''>
 754   	<#if collapsed><#local class += ' ' + 'collapse' /></#if>
 755   	<#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
 756   	<#if hide??><#local class += ' ' + displaySettings(hide,'block') /></#if>
 757   	<div<#if class?trim!=''> class="${class?trim}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 758   		<#nested>
 759   	</div>
 760   </#macro>
 761   <#-- PARAGRAPH -->
 762   <#macro p id='' params='' class='' hide=[] collapsed=false align=''>
 763   	<#if collapsed><#local class += ' ' + 'collapse' /></#if>
 764   	<#local class += ' ' + displaySettings(hide,'block') + ' ' + alignmentSettings(align,'') />
 765   	<p<#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> ${id}</#if>>
 766   		<#nested>
 767   	</p>
 768   </#macro>
 769   <#-- SPAN -->
 770   <#macro span id='' class='' hide=[] collapsed=false align='' params=''>
 771   	<#if collapsed><#local class += ' ' + 'collapse' /></#if>
 772   	<#local class += ' ' + alignmentSettings(align,'') + ' ' + displaySettings(hide,'inline-flex') />
 773   	<span<#if class?trim!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> ${id}</#if>>
 774   		<#nested>
 775   	</span>
 776   </#macro>
 777   <#-- PRE -->
 778   <#macro pre id='' class='' hide=[] collapsed=false align='' params=''>
 779   	<#if collapsed><#local class += ' ' + 'collapse' /></#if>
 780   	<#local class += ' ' + alignmentSettings(align,'') + ' ' + displaySettings(hide,'block') />
 781   	<pre<#if class!=''> class="${class?trim}"</#if><#if params!=''> ${params}</#if><#if id!=''> ${id}</#if>>
 782   		<#nested>
 783   	</pre>
 784   </#macro>
 785   <#-- TABS -->
 786   <#-- Tab Container -->
 787   <#-- style: tabs/tabs nav-justified/pills/pills nav-stacked/pills nav-justified -->
 788   <#macro tabs color='' style='tabs' class='' id='' hide=[] collapsed=false params=''>
 789   	<#if collapsed><#local class += ' ' + 'collapse' /></#if>
 790   	<#if hide??><#local class += ' ' + displaySettings(hide,'block') /></#if>
 791   	<#assign propagateTabStyle = style />
 792   	<div class="p-2<#if color!=''> ${color}</#if><#if class?trim!=''> ${class?trim}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 793   		<#if style!='pills'>
 794   			<div class="card card-primary card-tabs">
 795   		</#if>
 796   		<#nested>
 797   		<#if style!='pills'>
 798   			</div>
 799   		</#if>
 800   	</div>
 801   </#macro>
 802   <#-- Tabs List -->
 803   <#-- type is deprecated -->
 804   <#macro tabList style='tabs' vertical=false id='' params='' color=''>
 805   	<#if propagateTabStyle?? ><#local style = propagateTabStyle /></#if>
 806   		<#if style != 'pills'>
 807   			<div class="card-header p-0 pt-1">
 808   		</#if>
 809   		<ul class="nav nav-${style}<#if vertical> flex-column mb-3</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> role="tablist">
 810   			<#nested>
 811   		</ul>
 812   		<#if style != 'pills'>
 813   			</div>
 814   		</#if>
 815   </#macro>
 816   <#-- Tabs -->
 817   <#-- type:  -->
 818   <#macro tabLink class='' hide=[] id='' active=false href='' title=''tabLabel=''  tabIcon='' tabClass='' params=''>
 819   <li class="nav-item"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 820   <#local tabLinkClass = class + ' nav-link' />
 821   <#if active><#local tabLinkClass += ' active' /></#if>
 822   <#local tabLinkSettings = 'role="tab" aria-expanded="${active?c}" aria-controls="${href?remove_beginning("#")}"' />
 823   <#if href?contains('#') && href?contains('.jsp') == false>
 824   	<#local tabLinkSettings += ' data-toggle="tab"' />
 825   	<#local tabLinkId = '${href?remove_beginning("#")}-tab' />
 826   <#else>
 827   	<#local tabLinkId = href?keep_after_last('/')?keep_before('.')?lower_case />
 828   </#if>
 829   	<@link class=tabLinkClass?trim href=href id=tabLinkId title=title params=tabLinkSettings>
 830   		<#if tabIcon!=''><@icon style=tabIcon /></#if> <#if tabLabel !=''>${tabLabel!}<#else>${title!}</#if>
 831   		<#nested>
 832   	</@link>
 833   </li>
 834   </#macro>
 835   <#-- TAB Content -->
 836   <#macro tabContent id='' params=''>
 837   	<div class="card-body">
 838   		<div class="tab-content"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 839   			<#nested>
 840   		</div>
 841   	</div>
 842   </#macro>
 843   <#-- Tab Panel BS4 -->
 844   <#macro tabPanel id params='' active=false>
 845   <div class="tab-pane mt-2 fade<#if active> show active</#if>" role="tabpanel" id="${id}" aria-labelledby="${id}-tab"<#if params!=''> ${params}</#if>>
 846   <#nested>
 847   </div>
 848   </#macro>
 849   <#-- ACCORDION --> 
 850   <#-- The accordionContainer is the container for accordionPanel, which itself is the container for accordionHeader and accordionBody -->
 851   <#-- The childId argument in accordionPanel is meant to be used in the two sub-macros: accordionHeader and accordionBody -->
 852   <#macro accordionContainer id='' params=''>
 853   <#if id = '' >
 854      <#if accordionContainerId?? == false><#assign accordionContainerId = 1 ><#else><#assign accordionContainerId = accordionContainerId + 1 ></#if>
 855      <#local id = 'accCont_'+ accordionContainerId >
 856   </#if>
 857   	<div class="accordion" id="${id}"<#if params!=''> ${params}</#if>>
 858   		<#assign parentId = id>
 859   		<#nested>
 860   	</div>
 861   </#macro>
 862   <#macro accordionPanel color='' collapsed=true childId='' id='' params=''>
 863   	<div class="card<#if color!=''> bg-${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 864   		<#if collapsed>
 865   			<#assign aClass = 'collapsed'>
 866   			<#assign expanded = 'false'>
 867   			<#assign childClass = 'collapse'>
 868   		<#else>
 869   			<#assign aClass = ''>
 870   			<#assign expanded = 'true'>
 871   			<#assign childClass = 'collapse show'>
 872   		</#if>
 873   		<#assign childId = childId />
 874   		<#nested>
 875   	</div>
 876   </#macro>
 877   <#-- ACCORDION ELEMENT --> 
 878   <#-- The boxTools parameter is unused, kept for backwards compatibility -->
 879   <#macro accordionHeader id='' title='' parentId=parentId childId=childId boxTools=false params='' headerIcon='' >
 880   <div class="card-header" id="${childId}-header"<#if params!=''> ${params}</#if>>
 881   	<h2 class="mb-0">
 882   		<button class="btn btn-link<#if aClass!=''> ${aClass}</#if>" type="button" data-toggle="collapse" data-target="#${childId}" aria-expanded="${expanded}" aria-controls="${childId}">
 883   			<#if headerIcon!=''><@icon style=headerIcon /></#if> &nbsp;
 884   			${title}
 885   	</h2>
 886   	<#local nested><#nested></#local>
 887   	<#if nested?has_content>
 888   	<div class="box-tools">
 889   		${nested}
 890   	</div>
 891   	</#if>
 892   </div>
 893   <#assign parentId = parentId />
 894   </#macro>
 895   <#macro accordionBody id=childId class=childClass expanded=expanded params=''>
 896   <div id="${id}" class="${class}" aria-labelledby="${childId}-header" data-parent="#${parentId}" <#if params!=''> ${params}</#if>>
 897   	<@boxBody>
 898   		<#nested>
 899   	</@boxBody>
 900   </div>
 901   </#macro>
 902   <#macro progressBar description='' id='' params=''>
 903   <div class="progress"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 904   	<div id="progressbar" class="progress-bar progress-bar-striped" role="progressbar">
 905   		<div id="complexity">0%</div>
 906   	</div>
 907   </div>
 908   <#if description!=''>
 909   	<span class="progress-description">${description}</span>
 910   </#if>
 911   </#macro>
 912   
 913   <#-- Progress macro
 914       token : the progress manager Feed Token
 915       interval : refresh period in milli seconds (if the feed token is provided) 
 916       showReport : display the messages report (if the feed token is provided) -->
 917   <#macro progress color='primary' id='' params='' value=0 min=0 max=100 text='' progressId='progressbar' token='' label='' showReport=false intervalTime=2000 >
 918   <#if label!='' >
 919   <div id="${progressId}-label" >${label}</div>
 920   </#if>
 921   <div class="progress"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 922   	<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> >
 923           <#if text=''>${value}%<#else>${text}</#if>
 924   	</div>       
 925   </div>
 926   <#if showReport >
 927   <div id="${progressId}-report" class="progress-bar-report" lastline=0></div>
 928   </#if>
 929   </#macro>
 930   
 931   <#-- INFO-BOX AdminTLE (widget) -->
 932   <#-- color: only for the left side showing the icon. -->
 933   <#-- bgColor: for the right side containing the text -->
 934   <#macro infoBox color='' boxText='' boxIcon='' boxNumber='0' unit='' bgColor='' progressBar='' progressDescription='' id='' params=''>
 935   <div class="card m-2 small-box<#if bgColor!=''> ${bgColor}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 936   	<div class="card-body">
 937   		<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>
 938   		<div class="info-box-content">
 939   			<#if boxNumber!='0'><span class="info-box-number">${boxNumber?trim}<#if unit!=''> <small>${unit}</small></#if></span></#if>
 940   			<#if bgColor!='' && progressBar!=''><div class="progress"><div class="progress-bar" style="width: ${(boxNumber?trim?number/progressBar?trim?number*100)?string.computer}%"></div></div></#if>
 941   			<#if progressDescription!=''><span class="progress-description">${progressDescription}</span></#if>
 942   			<#nested />
 943   		</div>
 944   	</div>
 945   </div>
 946   </#macro>
 947   <#-- TAG -->
 948   <#-- color: default/primary/success/info/warning/danger/ -->
 949   <#macro tag color='default' class='' size='' title='' tagIcon='' id='' params='' deprecated...>
 950   <@deprecatedWarning args=deprecated />	
 951   	<span class="badge badge-${color}<#if class!=''> ${class}</#if>"<#if title!=''> title='${title}'</#if><#if id!=''>id='${id}'</#if><#if params!=''>${params}</#if>>
 952   		<#if tagIcon !=''>
 953   		<@icon style=tagIcon />
 954   		</#if>
 955   		<#nested>
 956   	</span>
 957   </#macro>
 958   <#-- NAVBAR -->
 959   <#macro navBar tag='nav' class='' id='' params=''>
 960   <${tag} class="navbar<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 961   	<#nested>
 962   </${tag}>
 963   </#macro>
 964   <#-- NAV -->
 965   <#macro nav tag='nav' type='tab' class='' id='' params=''>
 966   <${tag} class="nav nav-${type!}<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 967   	<#nested>
 968   </${tag}>
 969   </#macro>
 970   <#-- NAVITEM -->
 971   <#macro navItem href='' name='' active=false title='' alt='' target='' tag='li' class='' id='' params=''>
 972   <${tag} class="nav-link<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 973   	<#if href !='' >
 974   		<@link class='nav-link' href=href name=name title=title alt=alt target=target active=active /> 
 975   	</#if>
 976   	<#nested>
 977   </#${tag}>
 978   </#macro>
 979   <#-- BUTTON -->
 980   <#-- bootstrap 3 : size: btn-xs/btn-sm/btn-lg -->
 981   <#-- upcoming bootstrap 4 : size: btn-sm for small buttons/empty for medium buttons/btn-lg for large buttons -->
 982   <#-- color: default[bootstrap4 : secondary]/primary/success/warning/danger/info -->
 983   <#-- color (upcoming bootstrap 4): btn-outline-default/btn-outline-primary/btn-outline-success/btn-outline-warning/btn-outline-danger/btn-outline-info/ -->
 984   <#-- style: btn-block/btn-flat/close/navbar-toggle/collapsed... -->
 985   <#-- type: button/submit/reset -->
 986   <#-- params: data-toggle/data-target/data-dismiss... -->
 987   <#-- buttonIcon: icon name ex: info/check/comment/envelope... -->
 988   <#-- iconPosition: left/right -->
 989   <#-- cancel: switch to true for a cancellation form button. Adds the "formnovalidate" attribute to the button, as well as the right class -->
 990   <#-- formId: contains the form ID if the button is outside of the form -->
 991   <#-- buttonTargetId: contains the target element ID -->
 992   <#-- buttonNested=false : If true add content inside the button else -default- outside  -->
 993   <#-- showTitle, showTitleXs, showTitleSm, showTitleMd, showTitleLg are deprecated in Lutece v7 -->
 994   <#macro button name='' id='' type='button' size='' color='' style='' class='' params='' value='' title='' tabIndex='' hideTitle=[] showTitle=true showTitleXs=true showTitleSm=true showTitleMd=true showTitleLg=true buttonIcon='' disabled=false iconPosition='left' dropdownMenu=false cancel=false formId='' buttonTargetId='' deprecated...>
 995   	<@deprecatedWarning args=deprecated />
 996   	<#if cancel || color = 'default' || color='btn-default' || color='btn-secondary' || color='secondary'>
 997   		<#local buttonColor = 'default' />
 998   	<#elseif !cancel && color=''>
 999   		<#local buttonColor = 'primary' />
 1000   	<#else>
 1001   		<#local buttonColor = color />
 1002   	</#if>
 1003   	<#-- Visibility of button title -->
 1004   	<#local displayTitleClass = displaySettings(hideTitle,'inline-flex') />
 1005   	<#-- Visibility of button title: backwards compatibility with Lutece v6, BS3 only -->
 1006   	<#local showTitleClass = '' />
 1007   	<#if showTitle = false><#local showTitleClass = 'sr-only' /></#if>
 1008   	<#if showTitleXs = false><#local showTitleClass = showTitleClass + ' hidden-xs' /></#if>
 1009   	<#if showTitleSm = false><#local showTitleClass = showTitleClass + ' hidden-sm' /></#if>
 1010   	<#if showTitleMd = false><#local showTitleClass = showTitleClass + ' hidden-md' /></#if>
 1011   	<#if showTitleLg = false><#local showTitleClass = showTitleClass + ' hidden-lg' /></#if>
 1012   	<#if style != ''>
 1013   		<#if style?contains('card-control')>
 1014   			<#if style?contains('collapse')>
 1015   				<#local widgetAction = 'collapse' />
 1016   				<div style="display:none;">
 1017   					<script>
 1018   						$(document).ready(function() {
 1019   							<#if buttonIcon = 'minus'>
 1020   							$("${buttonTargetId}").addClass("show");
 1021   							<#else>
 1022   							$("${buttonTargetId}").addClass("collapse");
 1023   							</#if>
 1024   						});
 1025   					</script>
 1026   				</div>
 1027   			<#elseif style?contains('remove')>
 1028   				<#local widgetAction = 'remove' />
 1029   			</#if>
 1030   			<#local btnStyle = style?replace('collapse|remove', '', 'r')?trim />
 1031   		<#elseif style?contains('modal')>
 1032   			<#local widgetAction = 'modal' />
 1033   			<#local btnStyle = style?replace('modal', '', 'r')?trim />
 1034   		<#else>
 1035   			<#local btnStyle = style />
 1036   		</#if>
 1037   	</#if>
 1038   	<button class="<#if style!='close'>btn</#if><#if size!=''> btn-${size}</#if><#if buttonColor!=''> btn-${buttonColor}</#if><#if btnStyle?? && btnStyle!=''> ${btnStyle}</#if><#if dropdownMenu> dropdown-toggle</#if><#if class!=''> ${class}</#if>" type="${type}"<#if title!=''> title="${title}"</#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-toggle="dropdown" aria-haspopup="true" aria-expanded="false"</#if><#if widgetAction?? && widgetAction!=''><#if widgetAction = 'collapse' || widgetAction = 'modal'> data-toggle="${widgetAction}"<#elseif widgetAction = 'remove'> data-dismiss="alert"</#if></#if><#if buttonTargetId!=''> data-target="${buttonTargetId}"</#if><#if cancel> formnovalidate</#if><#if formId!=''> form="${formId}"</#if>>
 1039   		<#if buttonIcon!='' && iconPosition='left'><@icon style=buttonIcon /></#if>
 1040   		<#local nestedContent><#nested /></#local>
 1041   		<#local nestedContent = nestedContent?trim />
 1042   		<#if nestedContent=''>
 1043   			<#if displayTitleClass!=''><span class="${displayTitleClass}"></#if>
 1044   				${title}
 1045   			<#if displayTitleClass!=''></span></#if>
 1046   		</#if>
 1047   		<#if nestedContent!='' && !dropdownMenu><#if displayTitleClass!=''><span class="${displayTitleClass}"></#if><#nested><#if displayTitleClass!=''></span></#if></#if>
 1048   		<#if buttonIcon!='' && iconPosition='right'><@icon style=buttonIcon /></#if>
 1049   	</button>
 1050   	<#if dropdownMenu>
 1051   		<ul class="dropdown-menu"<#if id!=''> id="${id}-content" aria-labelledby="${id}-content"</#if>>
 1052   			<#nested>
 1053   		</ul>
 1054   	</#if>
 1055   </#macro>
 1056   <#-- A BUTTON (LINK STYLED AS A BUTTON) -->
 1057   <#-- size: sm/lg/or EMPTY for medium size-->
 1058   <#-- Bootstrap colors: default/primary/success/warning/danger/info -->
 1059   <#-- AdminLTE colors: black/gray-dark/gray/light/indigo/navy/purple/fuchsia/pink/maroon/orange/lime/teal/olive -->
 1060   <#-- style: btn-block/btn-flat/btn-app -->
 1061   <#-- icon: icon name ex: info/check/comment/envelope... -->
 1062   <#-- ShowTitleXs is UNUSED in Bootstrap 4. -->
 1063   <#macro aButton name='' id='' href='' target='' size='' color='primary' style='btn' align='' class='' params='' title='' tabIndex='' hideTitle=[] buttonIcon='' disabled=false iconPosition='left' dropdownMenu=false  deprecated...>
 1064   <@deprecatedWarning args=deprecated />	
 1065   	<#-- Visibility of button title -->
 1066   	<#local displayTitleClass = displaySettings(hideTitle,'inline') />
 1067   	<#if color = 'default' || color='btn-default' || color='btn-secondary' || color='secondary'>
 1068   		<#local buttonColor = 'btn-default' />
 1069   	<#elseif color=''>
 1070   		<#local buttonColor = 'btn-primary' />
 1071   	<#else>
 1072   		<#if color == 'primary' || color == 'secondary' || color == 'success' || color == 'info' || color == 'warning' || color == 'danger'>
 1073   			<#local buttonColor = 'btn-' + color />
 1074   		<#else>
 1075   			<#local buttonColor = 'bg-' + color />
 1076   		</#if>
 1077   	</#if>
 1078   	<#if style='card-control'>
 1079   		<#assign style='text-right btn-link' />
 1080   	</#if>
 1081   	<#local class += alignmentSettings(align,'') />
 1082   	<#if dropdownMenu>
 1083   		<div class="btn-group">
 1084   	</#if>
 1085   	<a class="${style}<#if size!=''> btn-${size}</#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>>
 1086   		<#if buttonIcon!='' && iconPosition='left'><@icon style=buttonIcon /></#if>
 1087   		<span class="${displayTitleClass}">${title}</span>
 1088   		<#if buttonIcon!='' && iconPosition='right'><@icon style=buttonIcon /></#if>
 1089   		<#if !dropdownMenu>
 1090   		<#nested>
 1091   		</#if>
 1092   	</a>
 1093   		<#if dropdownMenu>
 1094   		<div class="dropdown-menu"<#if id!=''> id="${id}" aria-labelledby="${id}"</#if>>
 1095   			<#nested>
 1096   		</div>
 1097   		</div>
 1098   		</#if>
 1099   </#macro>
 1100   <#-- BTN TOOLBAR -->
 1101   <#macro btnToolbar id='' class='' align='' ariaLabel='' params=''>
 1102   <#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
 1103   <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>>
 1104   <style type="text/css">
 1105   .btn-toolbar > div:not(:last-of-type) {margin-right:0.2rem;}
 1106   </style>
 1107   	<#nested>
 1108   </div>
 1109   </#macro>
 1110   <#-- BTN GROUP -->
 1111   <#-- size: sm/empty/lg -->
 1112   <#-- align: left/center/right -->
 1113   <#macro btnGroup id='' class='' align='' size='' params='' ariaLabel='' hide=[]   deprecated...>
 1114   <@deprecatedWarning args=deprecated />	
 1115   <#local class += ' ' + displaySettings(hide,'inline-flex') + ' ' + alignmentSettings(align,'') />
 1116   <div class="btn-group<#if size!=''> btn-group-${size}</#if> align-items-baseline<#if class!=''> ${class?trim}</#if>" role="group"<#if ariaLabel!=''> aria-label="${ariaLabel}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1117   	<#nested>
 1118   </div>
 1119   </#macro>
 1120   <#macro actionButtons button1Name='' button2Name='' i18nValue1Key='portal.admin.message.buttonValidate' i18nValue2Key='portal.admin.message.buttonCancel' url1='' url2='' icon1='save' icon2='times' offset=3 >
 1121   	<@formGroup rows=2>
 1122           <#if url1 != ''>
 1123   			<@aButton href='${url1}' buttonIcon='${icon1}' title='#i18n{${i18nValue1Key}}' />
 1124           <#else>
 1125   			<@button type='submit' name='${button1Name}' buttonIcon='${icon1}' title='#i18n{${i18nValue1Key}}' />
 1126           </#if>
 1127           <#if url2 != ''>
 1128   			<@aButton href='${url2}' buttonIcon='${icon2}' title='#i18n{${i18nValue2Key}}' color='secondary' />
 1129           <#else>
 1130               <#if button2Name != ''>
 1131   				<@button type='submit' name='${button2Name}' buttonIcon='${icon2}' title='#i18n{${i18nValue2Key}}' color='secondary' />
 1132               </#if>
 1133           </#if>
 1134   	</@formGroup>
 1135   </#macro>
 1136   <#-- Radio button/Checkbox as buttons (to use with btnGroup)  -->
 1137   <#-- type: radio/checkbox -->
 1138   <#macro btnGroupRadioCheckbox type='checkbox' color='primary' size='' name='' id='' params='' ariaLabel='' labelFor='' labelKey='' labelParams='' tabIndex='' value='' checked=false>
 1139   <label class="btn btn-${color}<#if size!=''> btn-${size}</#if>" for="${labelFor}"<#if labelParams!=''> ${labelParams}</#if>>
 1140   <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!=''>${labelKey}</#if>
 1141   </label>
 1142   </#macro>
 1143   <#-- Simple links a href, anchors -->
 1144   <#macro link href='' class='' id='' name='' title='' alt='' target='' params=''>
 1145   	<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>>
 1146   		<#nested>
 1147   	</a>
 1148   </#macro>
 1149   <#-- MODAL -->
 1150   <#-- bgColor: modal-default/modal-primary/modal-info/modal-warning/modal-danger -->
 1151   <#macro modal id params='' bgColor='' size=''>
 1152   <div class="modal ${bgColor} fade" role="dialog" id="${id}" data-toggle="modal"<#if params!=''> ${params}</#if>>
 1153   	<div class="modal-dialog<#if size!=''> modal-${size}</#if>" role="document">
 1154   		<div class="modal-content">
 1155   			<#nested>
 1156   		</div>
 1157   	</div>
 1158   </div>
 1159   </#macro>
 1160   <#macro modalHeader titleLevel='h4' modalTitle='' id='' params=''>
 1161   <div class="modal-header"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1162   	<${titleLevel} class="modal-title">${modalTitle}</${titleLevel}>
 1163   	<#nested>
 1164   	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 1165   		<span aria-hidden="true">&times;</span>
 1166   	</button>
 1167   </div>
 1168   </#macro>
 1169   <#macro modalBody id='' params=''>
 1170   <div class="modal-body"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1171   	<#nested>
 1172   </div>
 1173   </#macro>
 1174   <#macro modalFooter id='' params=''>
 1175   <div class="modal-footer"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1176   	<#nested>
 1177   </div>
 1178   </#macro>
 1179   <#-- BREADCRUMBS -->
 1180   <#macro breadcrumbs id='' class='' params=''>
 1181   <nav aria-label="breadcrumb">
 1182   	<ol class="breadcrumb"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1183   		<#nested>
 1184   	</ol>
 1185   </nav>
 1186   </#macro>
 1187   <#macro breadcrumbItem class='' id='' params=''>
 1188   <li class="breadcrumb-item<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1189   	<#nested>
 1190   </li>
 1191   </#macro>
 1192   <#-- CALLOUT -->
 1193   <#-- AdminLTE classes: info/warning/danger/success -->
 1194   <#macro callOut color='' titleLevel='h3' title='' callOutIcon='' id='' params=''>
 1195   <div class="callout callout-${color}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1196   	<#if title!=''><${titleLevel}><@icon style=callOutIcon /> ${title}</${titleLevel}></#if>
 1197   	<#nested>
 1198   </div>
 1199   </#macro>
 1200   <#-- ALERT -->
 1201   <#-- classes:  -->
 1202   <#-- color: primary/success/info/warning/danger -->
 1203   <#macro alert class='' color='' titleLevel='h3' title='' iconTitle='' dismissible=false id='' params=''>
 1204   <div class="alert d-flex<#if class!=''> ${class}</#if><#if color!=''> alert-${color}</#if><#if dismissible> alert-dismissible</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1205   	<#if dismissible>
 1206   		<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
 1207   			&times;
 1208   		</button>
 1209   	</#if>
 1210   	<#if iconTitle!=''><@icon style=iconTitle class='mr-2' /></#if>
 1211   	<#if title!=''><${titleLevel}>${title}</${titleLevel}></#if>
 1212   	<#nested>
 1213   </div>
 1214   </#macro>
 1215   <#---------------------------------------------------------->
 1216   <#-- Card as Box 																				-->
 1217   <#-- color: default/primary/info/success/warning/danger 	-->
 1218   <#-- style: solid (no top border) 												-->
 1219   <#-- collapsed: true/false 																-->
 1220   <#---------------------------------------------------------->
 1221   <#macro box color='' id='' style='' class='' title='' params='' collapsed=false>
 1222   <div class="card m-2<#if color!=''> card-${color}<#else> card-transparent</#if> card-outline<#if style!=''> text-${style}</#if><#if class!=''> ${class}</#if><#if collapsed> collapsed-box</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1223   <#if title=''>
 1224   	<#nested>
 1225   <#else>
 1226   	<@boxHeader title=title params=params skipHeader=true />
 1227   	<@boxBody><#nested></@boxBody>
 1228   </#if>
 1229   </div>
 1230   </#macro>
 1231   <#-- The boxTools parameter is unused, kept for backwards compatibility -->
 1232   <#macro boxHeader title='' i18nTitleKey='' hideTitle=[] showTitle=true id='' class='' params='' boxTools=false titleLevel='h2' deprecated...>
 1233   <@deprecatedWarning args=deprecated />
 1234   <div class="card-header<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1235   <${titleLevel} class="card-title<#if showTitle=false> sr-only</#if>"><#if title!=''>${title}</#if><#if i18nTitleKey!=''>#i18n{${i18nTitleKey}}</#if></${titleLevel}>
 1236   	<#local nested><#nested></#local>
 1237   	<#if nested?has_content>
 1238   	<div class="card-tools d-flex">
 1239   		<#nested>
 1240   	</div>
 1241   	</#if>
 1242   </div>
 1243   </#macro>
 1244   <#macro boxBody class='' collapsed=false align='' id='' params=''>
 1245   <#if collapsed><#local class += ' ' + 'collapse' /></#if>
 1246   <#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
 1247   <div class="card-body bg-white<#if class!=''> ${class}</#if>" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1248   	<#nested>
 1249   </div>
 1250   </#macro>
 1251   <#macro boxFooter class='' align='' id='' params=''>
 1252   <#if align!=''><#local class += ' ' + alignmentSettings(align,'') /></#if>
 1253   <div class="card-footer<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1254   	<#nested>
 1255   </div>
 1256   </#macro>
 1257   <#---------------------------------------->
 1258   <#-- AdminLTE Small Box -->
 1259   <#-- color: Bootstrap + AdminLTE colors -->
 1260   <#-- unit: %,... -->
 1261   <#macro smallBox color='' title='' text='' boxIcon='' titleLevel='h3' unit='' url='' urlText='' id='' params='' fontSize='40px'>
 1262   <div class="small-box m-2<#if color!=''> bg-${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1263   	<div class="inner">
 1264   		<${titleLevel} style="font-size:${fontSize};"><span>${title}</span><#if unit!=''> &nbsp; ${unit}</#if></${titleLevel}>
 1265   		<p>${text}</p>
 1266   	</div>
 1267   	<div class="icon">
 1268   		<@icon style=boxIcon />
 1269   	</div>
 1270   	<#if url!=''>
 1271   	<a class="small-box-footer" href="${url}">${urlText} <@icon style='arrow-circle-right' /></a>
 1272   	</#if>
 1273   </div>
 1274   </#macro>
 1275   <#-- AdminLTE Error Page -->
 1276   <#-- Error Type: 500,404... -->
 1277   <#-- Color: primary/blue/navy/aqua/teal/green/orange/yellow/red/purple/maroon/gray/black... -->
 1278   <#macro errorPage color='' errorType='' id='' params=''>
 1279   <div class="error-page"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1280   	<h2 class="headline text-${color}">${errorType}</h2>
 1281   	<div class="error-content">
 1282   		<h3>
 1283   			<@icon style='warning' class='text-${color}' />
 1284   			<#if errorType=='404'>
 1285   				#i18n{portal.util.error404.title}
 1286   			<#elseif errorType='500'>
 1287   				#i18n{portal.util.error500.title}
 1288   			<#else>...
 1289   			</#if>
 1290   		</h3>
 1291   		<p>
 1292   			<#if errorType=='404'>
 1293   				#i18n{portal.util.error404.text} 
 1294   			<#elseif errorType='500'>
 1295   				#i18n{portal.util.error500.text} 
 1296   			<#else>...
 1297   			</#if>
 1298   		</p>
 1299   		<@aButton href='' size='' color='bg-${color}' style='btn-flat'>
 1300   			<@icon style='home' />
 1301   			#i18n{portal.util.labelBackHome}
 1302   		</@aButton>
 1303   	</div>
 1304   </div>
 1305   </#macro>
 1306   <#-- CONTEXTUAL BACKGROUND P-->
 1307   <#-- Bootstrap colors: primary/success/info/warning/danger -->
 1308   <#-- AdminTLE colors: gray/gray-light/black/red/yellow/aqua/blue/light-blue/green/navy/teal/olive/lime/orange/fuchsia/purple/maroon -->
 1309   <#macro coloredBg color='' type='p' id='' params=''>
 1310   <${type} class="bg-${color}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1311   	<#nested>
 1312   </${type}>
 1313   </#macro>
 1314   <#macro listGroup id='' class='' params=''>
 1315   <ul class="list-group<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1316   	<#nested>
 1317   </ul>
 1318   </#macro>
 1319   <#macro listGroupItem id='' class='' params=''>
 1320   <li class="list-group-item list-group-item-action<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1321   	<#nested>
 1322   </li>
 1323   </#macro>
 1324   <#macro unstyledList id='' params=''>
 1325   <ul class="unstyled"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1326   	<#assign liClass = "margin">
 1327   	<#nested>
 1328   </ul>
 1329   </#macro>
 1330   <#-- DROPDOWN MENU LIST -->
 1331   <#macro dropdownList id='' params=''>
 1332   <div class="dropdown-menu"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1333   	<#nested>
 1334   </div>
 1335   </#macro>
 1336   <#macro dropdownItem class='' href='' title='' target='' id='' params=''>
 1337   	<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>
 1338   </#macro>
 1339   <#-- CARDS -->
 1340   <#macro card header=false headerTitle='' headerIcon=false headerTitleIcon=''>
 1341   <div class="card">
 1342   	<#if header><div class="card-header bg-info"><#if headerIcon><@icon style='${headerTitleIcon}' />&#160;</#if>${headerTitle}</div></#if>
 1343   	<div class="card-body">
 1344   		<#nested>
 1345   	</div>
 1346   </div>
 1347   </#macro>
 1348   <#-- FUNCTION: DISPLAY -->
 1349   <#-- This function returns a "visible" or "hidden" class for any component -->
 1350   <#-- breakpoints: "all" || "xs"/"sm"/"md"/"lg"/"xl" -->
 1351   <#-- display: inline/inline-block/block/table/table-cell/table-row/flex/inline-flex -->
 1352   <#function displaySettings breakPoints=[] display=''>
 1353   	<#local breakPointsOrdered = [] />
 1354   	<#if breakPoints?seq_contains('all')>
 1355   		<#local breakPointsOrdered += ['all'] />
 1356   	</#if>
 1357   	<#if breakPoints?seq_contains('xs')>
 1358   		<#local breakPointsOrdered += ['xs'] />
 1359   	</#if>
 1360   	<#if breakPoints?seq_contains('sm')>
 1361   		<#local breakPointsOrdered += ['sm'] />
 1362   	</#if>
 1363   	<#if breakPoints?seq_contains('md')>
 1364   		<#local breakPointsOrdered += ['md'] />
 1365   	</#if>
 1366   	<#if breakPoints?seq_contains('lg')>
 1367   		<#local breakPointsOrdered += ['lg'] />
 1368   	</#if>
 1369   	<#if breakPoints?seq_contains('xl')>
 1370   		<#local breakPointsOrdered += ['xl'] />
 1371   	</#if>
 1372   	<#local displayClass = '' />
 1373   	<#if breakPointsOrdered?? && breakPointsOrdered?size &gt; 0>
 1374   		<#list breakPointsOrdered as breakPoint>
 1375   			<#if breakPoint = 'xs' || breakPoint = 'all'>
 1376   				<#local displayClass += 'd-none' />
 1377   				<#if breakPoint = 'xs'>
 1378   					<#if !breakPointsOrdered?seq_contains('sm')>
 1379   						<#local displayClass += ' d-sm-${display}' />
 1380   					</#if>
 1381   				</#if>
 1382   			<#elseif breakPoint = 'sm' || breakPoint = 'md' || breakPoint = 'lg' || breakPoint = 'xl'>
 1383   				<#if breakPoint = 'sm'>
 1384   					<#if displayClass = ''>
 1385   						<#local displayClass += ' d-' + breakPoint + '-none' />
 1386   					<#elseif displayClass = 'd-none' && !breakPointsOrdered?seq_contains('md')>
 1387   						<#local displayClass += ' d-md-${display}' />
 1388   					</#if>
 1389   				<#elseif breakPoint = 'md'>
 1390   					<#if !breakPointsOrdered?seq_contains('sm')>
 1391   						<#local displayClass += ' d-' + breakPoint + '-none' />
 1392   					</#if>
 1393   					<#if !breakPointsOrdered?seq_contains('lg')>
 1394   						<#local displayClass += ' d-lg-${display}' />
 1395   					</#if>
 1396   				<#elseif breakPoint = 'lg'>
 1397   					<#if !breakPointsOrdered?seq_contains('md')>
 1398   						<#local displayClass += ' d-' + breakPoint + '-none' />
 1399   					</#if>
 1400   					<#if !breakPointsOrdered?seq_contains('xl')>
 1401   						<#local displayClass += ' d-xl-${display}' />
 1402   					</#if>
 1403   				<#elseif breakPoint = 'xl'>
 1404   					<#if !breakPointsOrdered?seq_contains('lg')>
 1405   						<#local displayClass += ' d-' + breakPoint + '-none' />
 1406   					</#if>
 1407   				</#if>
 1408   			<#else>
 1409   				<#local displayClass += ' undefined_breakpoint' />
 1410   			</#if>
 1411   		</#list>
 1412   	</#if>
 1413   	<#return displayClass?trim>
 1414   </#function>
 1415   <#-- This function returns responsive classes or flex order classes -->
 1416   <#-- type: col|offset|order -->
 1417   <#function responsiveDisplay type='' breakpoints={}>
 1418   	<#local responsiveDisplayClass = '' />
 1419   	<#list breakpoints as breakpointkey,breakpointvalue>
 1420   		<#if breakpointvalue!=0>
 1421   			<#if breakpointkey = 'xs'>
 1422   				<#local responsiveDisplayClass += ' ${type}-${breakpointvalue}' />
 1423   			<#else>
 1424   				<#local responsiveDisplayClass += ' ${type}-${breakpointkey}-${breakpointvalue}' />
 1425   			</#if>
 1426   		</#if>
 1427   	</#list>
 1428   	<#return responsiveDisplayClass?trim>
 1429   </#function>
 1430   <#function alignmentSettings align='' style=''>
 1431   	<#local x = ''>
 1432   	<#if align !=''>
 1433   		<#if align = 'left'>
 1434   			<#if style = 'text'>
 1435   				<#local x = 'text-left' />
 1436   			<#elseif style = ''>
 1437   				<#local x = 'd-flex justify-content-start' />
 1438   			</#if>
 1439   		<#elseif align = 'right'>
 1440   			<#if style = 'text'>
 1441   				<#local x = 'text-right' />
 1442   			<#elseif style = ''>
 1443   				<#local x = 'd-flex justify-content-end' />
 1444   			</#if>
 1445   		<#elseif align = 'center'>
 1446   			<#if style = 'text'>
 1447   				<#local x = 'text-center' />
 1448   			<#elseif style = ''>
 1449   				<#local x = 'd-flex justify-content-center' />
 1450   			</#if>
 1451   		</#if>
 1452   	</#if>
 1453   	<#return x>
 1454   </#function>
 1455   <#-- -------------------------------------------------
 1456   -- MACRO ADMIN STRUCTURE - HEADER + NAVBAR + FOOTER -- 
 1457   -------------------------------------------------- -->
 1458   <#-- MACRO adminHeader -->
 1459   <#macro adminHeader site_name=site_name>
 1460   <script src="js/admin/jquery/jquery-3.5.1.min.js"></script>
 1461   <script src="js/admin/jquery/jquery-migrate-3.3.1.min.js"></script>
 1462   <script>
 1463   var user_level=${user.userLevel!};
 1464   </script>
 1465   <style>.main-header { padding-top: 5px;}</style>
 1466   </head>
 1467   <body class="d-flex flex-column vh-100 layout-top-nav">
 1468   	<div class="wrapper">
 1469   		<div class="sr-only"><a href="#main">aller au contenu principal</a></div>
 1470   		<h1 id="top" class="sr-only sr-only-focusable">Haut de page</h1>
 1471   		<nav class="main-header navbar navbar-expand-lg navbar-dark navbar-gray-dark">
 1472   			<a class="navbar-brand" href="jsp/site/Portal.jsp" title="#i18n{portal.users.admin_header.title.viewSite} ${site_name}" target="_blank" >
 1473   				<img src="#dskey{portal.site.site_property.logo_url}" height="30" class="d-inline-block align-top" aria-hidden="true" title="#i18n{portal.users.admin_header.title.viewSite} ${site_name}" alt="${site_name}">
 1474   				<#if site_name?length &gt; 18> ${site_name?substring(0,16)}... <#else> ${site_name}</#if>
 1475   			</a>
 1476   			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
 1477   				<span class="navbar-toggler-icon"></span>
 1478   			</button>
 1479   			<div class="collapse navbar-collapse" id="navbar-collapse">
 1480   				<ul class="navbar-nav mr-auto">
 1481   				<#list feature_group_list as feature_group>
 1482   					<#if feature_group.features?size &gt; 1>
 1483   						<li class="nav-item dropdown">
 1484   							<a class="nav-link dropdown-toggle" id="dLabel${feature_group.id}Header" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="${admin_url}#${feature_group.id}">
 1485   								${feature_group.label}
 1486   							</a>
 1487   						 <div class="dropdown-menu" aria-labelledby="dLabel${feature_group.id}Header">
 1488   							<#list feature_group.features as feature>
 1489   								<#if !feature.externalFeature>
 1490   									<a class="dropdown-item" href="${feature.url}?plugin_name=${feature.pluginName}">${feature.name}</a>
 1491   								<#else>
 1492   									<a class="dropdown-item" href="${feature.url}">
 1493   										<#if feature.iconUrl?has_content><i class="${feature.iconUrl}"></i></#if> ${feature.name}
 1494   									</a>
 1495   								</#if>
 1496   							</#list>
 1497   							</div>
 1498   						</li>
 1499   					<#else>
 1500   						<#list feature_group.features as feature>
 1501   							<li class="nav-item">
 1502   							<#if !feature.externalFeature>
 1503   								<a class="nav-link" href="${feature.url}?plugin_name=${feature.pluginName}">${feature.name}</a>
 1504   							<#else>
 1505   								<a class="nav-link" href="${feature.url}"><#if feature.iconUrl?has_content><i class="${feature.iconUrl}"></i></#if>${feature.name}</a>
 1506   							</#if>
 1507   							</li>
 1508   						 </#list>
 1509   					 </#if>
 1510   				 </#list>
 1511   				</ul>
 1512   				<ul class="nav navbar-nav user">
 1513   					<li class="nav-item home">
 1514   						<a class="nav-link" href="${admin_url}" title="#i18n{portal.users.admin_header.homePage}">
 1515   							<i class="fas fa-home"></i>
 1516   						</a>
 1517   					</li>
 1518   					<#if user.userLevel == 0>
 1519   					<#assign hasIcon=false />
 1520   					<#if listLoggersInfo?has_content> 
 1521   						<#list listLoggersInfo?filter( logInfo -> ( logInfo.level = 'DEBUG' || logInfo.level = 'TRACE' ) ) as logInfo>
 1522   							<#if logInfo?size gt 0>
 1523   								<#if hasIcon=false >
 1524   								<li class="nav-item dropdown">
 1525   									<a class="nav-link" data-toggle="dropdown" href="#">
 1526   										<i class="far fa-bell"></i>
 1527   										<span class="badge badge-danger navbar-badge">1</span>
 1528   									</a>
 1529   									<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
 1530   										<div class="dropdown-item dropdown-header logger" title="${logInfo.path!}">
 1531   											<strong><span class="badge badge-danger">1</span> #i18n{portal.util.log.warningLevel}</strong>
 1532   											<div class="dropdown-divider"></div>
 1533   								<#assign hasIcon = true />	
 1534   								</#if>
 1535   								<p><strong>${logInfo.name!}  - ${logInfo.level!}</strong> ${logInfo.path!}</p>
 1536   							</#if>	
 1537   						</#list>
 1538   					</#if>
 1539   					<#if hasIcon == true >
 1540   								<div class="dropdown-divider"></div>
 1541   							</div>
 1542   						</div>
 1543   					</li>
 1544   					</#if>
 1545   					<li class="nav-item home">
 1546   						<a class="nav-link" href="jsp/admin/AdminTechnicalMenu.jsp" title="#i18n{portal.admindashboard.view_dashboards.title}">
 1547   							<i class="fa fa-cog"></i>
 1548   						</a>
 1549   					</li>
 1550   					</#if>
 1551   					<li class="nav-item dropdown user-menu">
 1552   						<a href="${admin_url}#user-menu" class="nav-link dropdown-toggle" data-toggle="dropdown" id="dLabelUserHeader">
 1553   							<#if adminAvatar> 
 1554   								<img src="servlet/plugins/adminavatar/avatar?id_user=${user.userId}" height="32px" class="d-inline-block align-top rounded" aria-hidden="true" alt="User's avatar"> 
 1555   							<#else> 
 1556   								<img src="#dskey{portal.site.site_property.avatar_default}" height="32px" class="d-inline-block align-top rounded-pill" aria-hidden="true"  alt="User's avatar"> 
 1557   							</#if>     
 1558   							${dashboard_zone_4!}
 1559   						</a>
 1560   						<div class="dropdown-menu"  role="menu" aria-labelledby="dLabelUserHeader">
 1561   							<#if userMenuItems?has_content>   
 1562   								<#list userMenuItems as item>
 1563   									${item.content}
 1564   								</#list>
 1565   							</#if>
 1566   						</div>
 1567   					</li>
 1568   					<#if admin_logout_url?has_content>
 1569   						<li class="nav-item">
 1570   							<a class="nav-link" href="${admin_logout_url}" title="#i18n{portal.users.admin_header.deconnectionLink}">
 1571   								<i class="fa fa-power-off fa-fw"></i>
 1572   							</a>
 1573   						</li>
 1574   					</#if>
 1575   				</ul>
 1576   			</div>
 1577   		</nav>
 1578   		<#if user.userLevel == 0>
 1579   		<script>
 1580   		$( function(){
 1581   			const loggers = document.querySelector('.logger') ;
 1582   			if( loggers.childElementCount > 0 ){
 1583   				if( !sessionStorage.getItem('lutece-debug-modal') ){
 1584   					sessionStorage.setItem('lutece-debug-modal', false )
 1585   				}
 1586   				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.innerHTML + '</blockquote>';
 1587   				var adminModalBody = $('#adminModal .modal-body')
 1588   				adminModalBody.html( modalContent )
 1589   				var adminModalLabel = $('#adminModalLabel')
 1590   				var adminModalHeader = $('#adminModal .modal-header')
 1591   				var adminModalHeaderBtn = $('#adminModal .modal-header button')
 1592   				adminModalLabel.html( 'Attention configuration non conforme !' )
 1593   				adminModalHeader.addClass('text-white')
 1594   				adminModalHeaderBtn.addClass('text-white')
 1595   				adminModalHeader.addClass('bg-danger')
 1596   				adminModalBody.addClass('text-danger')
 1597   				if( sessionStorage.getItem('lutece-debug-modal') === 'false' ){
 1598   					var myAdminModal = $('#adminModal').modal()
 1599   					myAdminModal.on('hidden.bs.modal', function (e) {
 1600   						sessionStorage.setItem('lutece-debug-modal', true )
 1601   					})
 1602   				}
 1603   			}
 1604   		});
 1605   		</script>
 1606   		</#if>
 1607   		<!-- Begin page content -->
 1608   		<main role="main" class="content-wrapper flex-shrink-0">
 1609   			<section class="content">
 1610   			<!-- Close in footer -->
 1611   </#macro>
 1612   <#-- MACRO adminFooter -->
 1613   <#macro adminFooter >
 1614   	<!-- end content section -->
 1615   	</section>
 1616   </main>
 1617   <!-- footer menu -->
 1618   <footer class="footer mt-auto py-3">
 1619   	<div class="container">
 1620   		<nav id="footer" class="navbar navbar-light bg-light" role="navigation">
 1621   			<div class="navbar-text text-center">
 1622   				<a class="navbar-link" href="https://lutece.paris.fr" target="lutece" title="#i18n{portal.site.portal_footer.labelPortal}">
 1623   					<img src="images/poweredby.png" alt="#i18n{portal.site.portal_footer.labelMadeBy}">
 1624   					<small>version ${version}</small>
 1625   				</a>
 1626   			</div>
 1627   		</nav>
 1628   	</div>
 1629   </footer>
 1630   <!-- Admin Modal -->
 1631   <div class="modal fade" id="adminModal" role="dialog" tabindex="-1" aria-labelledby="adminModalLabel" aria-hidden="true">
 1632   	<div class="modal-dialog">
 1633   	  <div class="modal-content">
 1634   		<div class="modal-header">
 1635   		  <h5 class="modal-title" id="adminModalLabel"></h5>
 1636   		  <button type="button" class="close" data-dismiss="modal" aria-label="#i18n{portal.site.admin_page.buttonClosed}">
 1637   			<span aria-hidden="true">&times;</span>
 1638   		  </button>
 1639   		</div>
 1640   		<div class="modal-body"></div>
 1641   		<div class="modal-footer">
 1642   		  <button type="button" class="btn btn-secondary" data-dismiss="modal">#i18n{portal.site.admin_page.buttonClosed}</button>
 1643   		</div>
 1644   	  </div>
 1645   	</div>
 1646   </div>
 1647   </div><!-- Close wrapper -->
 1648   <!-- Included JS Files 												-->
 1649   <!-- Le javascript 													-->
 1650   <!-- ============================================================== -->
 1651   <!-- Placed at the end of the document so the pages load faster 	-->
 1652   <@coreAdminJSLinks />
 1653   ${javascript_files}
 1654   </#macro>
 1655   <#-- MACRO adminHome -->
 1656   <#macro adminHome >
 1657   <section class="dashboard-widgets">
 1658   <@row>
 1659   	<@columns xs=12 md=6 lg=4 class='widget'>
 1660   		${dashboard_zone_1!}
 1661   		<div>&nbsp;</div>
 1662   	</@columns>
 1663   	<@columns xs=12 md=6 lg=4 class='widget'>
 1664   		${dashboard_zone_2!}
 1665   		<div>&nbsp;</div>
 1666   	</@columns>
 1667   	<@columns xs=12 md=6 lg=4 class='widget'>
 1668   		${dashboard_zone_3!}
 1669   		<div>&nbsp;</div>
 1670   	</@columns>
 1671   </@row>
 1672   </section>
 1673   </#macro>
 1674   <#-- MACRO adminDashboardWidget -->
 1675   <#macro adminDashboardWidget id title color='primary' url='' class='' bodyClass='table-responsive no-padding' params='' >
 1676   <@box style='solid' color='${color}' id='${id}_dashboard_card'>
 1677   	<@boxHeader titleLevel='h5' title='${title}'>
 1678   		<#if url!=''><@aButton color="link" class='card-control' href='${url!}' title='${title!}' size='sm' buttonIcon='cog' hideTitle=['all']  /></#if>
 1679   		<@button style='card-control collapse' buttonTargetId='#${id}_dashboard_card_body' buttonIcon='minus' size='sm' />
 1680   		<@button style='card-control remove' buttonTargetId='#${id}_dashboard_card' buttonIcon='times' size='sm' />
 1681   	</@boxHeader>
 1682   	<@boxBody class=bodyClass id='${id}_dashboard_card_body'>
 1683   	<#nested>
 1684   	</@boxBody>
 1685   </@box>
 1686   </#macro>
 1687   <#-- adminContentHeader  -->
 1688   <#macro adminContentHeader>
 1689   <header>
 1690   	<div class="row justify-content-between">
 1691   		<div class="col-10">
 1692   			<h1 class="mt-4 ml-3" style="font-size:2rem;" id="feature-title">
 1693   				<#if feature_url?? >
 1694   					<@link href='${feature_url}' title='${feature_title!""}'>${feature_title!''}</@link>
 1695   				<#else>
 1696   					${feature_title!''}
 1697   				</#if>
 1698   				<#if page_title?has_content><small>${page_title}</small></#if>
 1699   			</h1>
 1700   		</div>
 1701   		<div class="col-2">
 1702   			<@adminHeaderDocumentationLink />
 1703   		</div>
 1704   	</div>
 1705   </header>
 1706   <section class="content <#if feature_url?? && feature_url?ends_with('AdminSite.jsp')>no-padding</#if>">
 1707   </#macro>
 1708   <#-- adminLoginPage  -->
 1709   <#macro adminLoginPage title='' site_name='SITE_NAME'>
 1710   <script src="js/admin/jquery/jquery-3.5.1.min.js"></script>
 1711   </head>
 1712   <body id="login">
 1713   <img src="images/logo-header.png" class="fixed-top m-4" aria-hidden="true" title="LUTECE Back-Office" alt="LUTECE Back-Office">
 1714   <section id="login-page">
 1715   	<div class="container">
 1716   		<div class="row align-items-center vh-100">
 1717   			<div class="col-sm-5 offset-sm-3 bg-light rounded px-5">
 1718   				<header>
 1719   					<h1 class="h2 mb-3 text-center">
 1720   						<a class="btn btn-link btn-block" href="jsp/site/Portal.jsp" title="${site_name!'Lutece'}">#i18n{portal.admin.admin_login.welcome}<br> <b>${site_name!'Lutece'}</b></a>
 1721   					</h1>
 1722   					<h2 class="h3 mb-3 text-center">${title}</h2>
 1723   				</header>
 1724   				<main>
 1725   					<#nested>
 1726   				</main>
 1727   				<footer>
 1728   					<p class="text-center mt-2">
 1729   						<@aButton href='https://lutece.paris.fr' params='target="_blank"' title='#i18n{portal.site.portal_footer.labelPortal}' hideTitle=['all'] color='link'>
 1730   						<img src="images/poweredby.png" class="thumbnails" alt="logo lutece" title="Lutece">
 1731   						</@aButton>
 1732   					</p>
 1733   				</footer>
 1734   				</div>	
 1735   		</div>
 1736   	</div>
 1737   </section>
 1738   <script>
 1739   $(function(){
 1740   	var randomImages = [#dskey{portal.site.site_property.back_images}];
 1741   	var rndNum = Math.floor(Math.random()*(randomImages.length));
 1742   	var bgImg = 'url(' + randomImages[rndNum] + ')';
 1743   	$("#login-page").css('background-image', bgImg );
 1744   });
 1745   </script>
 1746   </#macro>
 1747   <#-- adminHeaderDocumentationLink  -->
 1748   <#macro adminHeaderDocumentationLink >
 1749     <#if feature_documentation?has_content >
 1750   		<#if feature_documentation?exists>
 1751   			<div class="text-right mt-4">
 1752   				<a class="btn btn-link" target="_blank" href="${feature_documentation}" title="#i18n{portal.features.documentation.help} [Nouvelle fenêtre]">
 1753   					<@icon class="fa-life-ring" /> #i18n{portal.features.documentation.help}
 1754   				</a>
 1755   			</div>
 1756   		</#if>
 1757   	</#if>
 1758   </#macro>
 1759   <#-- MACRO adminSiteToolbar  -->
 1760   <#macro adminSiteToolbar >
 1761   <@btnToolbar>
 1762   	<@btnGroup>
 1763   		<@tform type='inline' action='jsp/admin/site/AdminSite.jsp' role='search'>
 1764   			<@input type='number' name='page_id' id='page_id' title='${i18n("portal.site.admin_page.buttonSearchPage")}' placeHolder='22' params=' style="width:4rem;"' />
 1765   			<@button type='submit' color='primary' title='${i18n("portal.site.admin_page.buttonSearchPage")}' hideTitle=['all'] buttonIcon='search' />
 1766   		</@tform>
 1767   	</@btnGroup>
 1768   	<@btnGroup class='ms-1 ml-1'>
 1769   		<@aButton href='' id='display-full' title='#i18n{portal.site.admin_page.buttonLargeScreen}' buttonIcon='desktop' color='primary'hideTitle=['all'] />
 1770   		<@aButton href='' id='display-940' title='#i18n{portal.site.admin_page.buttonTablet}' buttonIcon='tablet' color='primary' hideTitle=['all'] />
 1771   		<@aButton href='' id='display-480' title='#i18n{portal.site.admin_page.buttonSmartphone}' buttonIcon='mobile' color='primary' hideTitle=['all'] />
 1772   	</@btnGroup>
 1773   	<#if page.id != 1>
 1774   		<@btnGroup class='ms-1 ml-1'>
 1775   			<@aButton href='jsp/admin/site/AdminSite.jsp?page_id=${page.parentPageId}' color='success' buttonIcon='arrow-up' title='#i18n{portal.site.admin_page.buttonUpToParentPage}' hideTitle=['all'] />
 1776   			<@aButton href='jsp/admin/site/RemovePage.jsp?page_id=${page.id}' color='danger btn-icon' buttonIcon='trash text-white' title='#i18n{portal.site.admin_page.buttonDeletePage}' hideTitle=['all']  />
 1777   		</@btnGroup>
 1778   	</#if>
 1779   	<@btnGroup class='ms-1 ml-1'>
 1780   	<#if portlet_types_list?has_content>
 1781   		<@aButton class='dropdown-toggle' id='portlet-type' dropdownMenu=true href='#' title='#i18n{portal.site.admin_page.labelPortletPage}' buttonIcon='th-large' hideTitle=['xs','sm','md']>
 1782   			<#list portlet_types_list?sort_by("name") as portlet_type>
 1783   				<@dropdownItem class='portlet-type-ref' href='jsp/admin/DoCreatePortlet.jsp?portlet_type_id=${portlet_type.id}&amp;page_id=${page.id}' target='preview' title='${portlet_type.name}'>
 1784   					${portlet_type.name}
 1785   				</@dropdownItem>
 1786   			</#list>
 1787   		</@aButton>
 1788   	</#if>
 1789   	<#if extendableResourceActionsHtml?? && extendableResourceActionsHtml?has_content>
 1790   		${extendableResourceActionsHtml!}
 1791   	</#if>
 1792   	</@btnGroup>
 1793   	<@btnGroup class='ms-1 ml-1'>
 1794   		<@aButton href='jsp/admin/site/AdminSite.jsp?page_id=${page.id}&amp;param_block=2' buttonIcon='wrench' title='#i18n{portal.site.admin_page.labelPageProperty}' hideTitle=['xs','sm','md'] />
 1795   	</@btnGroup>
 1796   	<@btnGroup class='ms-1 ml-1'>
 1797   		<@aButton href='jsp/admin/site/AdminSite.jsp?page_id=${page.id}&amp;param_block=5'  buttonIcon='plus' title='#i18n{portal.site.admin_page.labelChildPagePage}' hideTitle=['xs','sm','md'] />
 1798   	</@btnGroup>
 1799   	<@btnGroup class='ms-1 ml-1'>
 1800   		<@aButton href='jsp/admin/site/AdminMap.jsp?page_id=${page.id }' buttonIcon='sitemap' title='Page ${page.name} - Id ${page.id}' hideTitle=['all'] ><@span hide=['all']>#i18n{portal.site.admin_page.tabAdminMapSite}</@span></@aButton>
 1801   	</@btnGroup>
 1802   	<@btnGroup class='ms-1 ml-1'>
 1803   		<@aButton href='' id='fullscreen' title='#i18n{portal.site.admin_page.buttonFullscreen}' buttonIcon='arrows-alt' color='secondary'  hideTitle=['all'] />
 1804   	</@btnGroup>
 1805   </@btnToolbar>
 1806   </#macro>
 1807   <#macro adminSiteColumnOutline columnid=''>
 1808   <div class="admin_column_outline">
 1809   	<span class="admin_column_id">${i18n("portal.site.columnId",columnid)}</span>
 1810   	<div><#nested></div>
 1811   </div>
 1812   </#macro>
 1813   <#-- adminMessagePage  -->
 1814   <#macro adminMessagePage title=''>
 1815   <#assign title=title />
 1816   <#assign alerttype="secondary" />
 1817   <#assign icontype="fa-info-circle" />
 1818   <#if title??>
 1819   	<#if title?trim='' >
 1820   		<#assign title="Information" />
 1821   	</#if>		
 1822   </#if>		
 1823   <#if message.type == 2 >
 1824   	 <#assign alerttype="danger" />
 1825      <#assign icontype="fa-question-circle" />
 1826   <#elseif message.type == 3 >
 1827      <#assign alerttype="warning" />
 1828      <#assign icontype="fa-exclamation-circle" />
 1829   <#elseif message.type == 4 >
 1830   	 <#assign alerttype="warning" />
 1831      <#assign icontype="fa-question-circle" />
 1832   <#elseif message.type == 5 >
 1833      <#assign alerttype="danger" />
 1834      <#assign icontype="fa-ban" />
 1835   </#if>
 1836   <script src="js/admin/jquery/jquery-3.5.1.min.js"></script>
 1837   </head>
 1838   <body>
 1839   <div class="container">
 1840   	<div class="row justify-content-center align-items-center min-vh-100">
 1841   		<div class="col-sm-12 col-md-6">
 1842   			<div class="alert alert-${alerttype} text-center" role="alert">
 1843   				<h1><span class="fas ${icontype}"></span> ${title!}</h1>
 1844   				${text!}
 1845   				<#nested>
 1846   				<p class="text-center">
 1847   					<img src="images/poweredby.png" class="thumbnails" alt="logo lutece" title="Lutece">
 1848   				</p>
 1849   			</div>	
 1850   		</div>
 1851   	</div>
 1852   </div>
 1853   </#macro>
 1854   <#-- fieldSet  -->
 1855   <#macro fieldSet class='' fieldsetId='' fieldsetParams='' legend='' legendClass='' legendId='' legendIcon='' legendParams='' hideLegend=[] disabled=false>
 1856   <fieldset<#if class!=''> class="${class}"</#if><#if fieldsetId!=''> id="${fieldsetId}"</#if><#if fieldsetParams!=''> ${fieldsetParams}</#if><#if disabled> disabled</#if>>
 1857   	<#if legend!=''>
 1858   		<#local legendClass += ' ' +  displaySettings(hideLegend,'block') />
 1859   		<legend<#if legendClass!=''> class="${legendClass?trim}"</#if><#if legendId!=''> id="${legendId}"</#if><#if legendParams!=''> ${legendParams}</#if>><#if legendIcon!=''><@icon style=legendIcon /> </#if>${legend}</legend>
 1860   	</#if>
 1861   	<#nested>
 1862   </fieldset>
 1863   </#macro>
 1864   <#-- RESPONSIVE -->
 1865   <#-- HTML ELEMENTS -->
 1866   <#macro img url='' alt='' title='' class='' id='' params=''> 
 1867   <img src="${url}" alt="<#if alt!=''>${alt!}<#else>${title!}</#if>" title="${title}" class="thumbnails thumb-list<#if class!=''>  ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> />
 1868   </#macro>
 1869   <#-- Email Default Template -->
 1870   <#macro emailTemplate title='Lutece' footer_link='https://lutece.paris.fr'> 
 1871   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 1872   <html xmlns="http://www.w3.org/1999/xhtml">
 1873   <head>
 1874       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 1875       <meta name="viewport" content="width=device-width"/>
 1876       <style type="text/css">
 1877   		* { margin: 0; padding: 0; font-size: 100%; font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; line-height: 1.65; }
 1878   		img { max-width: 100%; margin: 0 auto; display: block; }
 1879   		body, .body-wrap { width: 100% !important; height: 100%; background: #f8f8f8; }
 1880   		a { color: #007bff; text-decoration: none; }
 1881   		a:hover { text-decoration: underline; }
 1882   		.text-center { text-align: center; }
 1883   		.text-right { text-align: right; }
 1884   		.text-left { text-align: left; }
 1885   		.button { display: inline-block; color: white; background: #007bff; border: solid #007bff; border-width: 10px 20px 8px; font-weight: bold; border-radius: 4px; }
 1886   		.button:hover { text-decoration: none; }
 1887   		h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; line-height: 1.25; }
 1888   		h1 { font-size: 32px; }
 1889   		h2 { font-size: 28px; }
 1890   		h3 { font-size: 24px; }
 1891   		h4 { font-size: 20px; }
 1892   		h5 { font-size: 16px; }
 1893   		p, ul, ol { font-size: 16px; font-weight: normal; margin-bottom: 20px; }
 1894   		.container { display: block !important; clear: both !important; margin: 0 auto !important; max-width: 580px !important; }
 1895   		.container table { width: 100% !important; border-collapse: collapse; }
 1896   		.container .masthead { padding: 80px 0; background: #007bff; color: white; }
 1897   		.container .masthead h1 { margin: 0 auto !important; max-width: 90%; text-transform: uppercase; }
 1898   		.container .content { background: white; padding: 30px 35px; }
 1899   		.container .content.footer { background: none; }
 1900   		.container .content.footer p { margin-bottom: 0; color: #888; text-align: center; font-size: 14px; }
 1901   		.container .content.footer a { color: #888; text-decoration: none; font-weight: bold; }
 1902   		.container .content.footer a:hover { text-decoration: underline; }
 1903       </style>
 1904   </head>
 1905   <body>
 1906   <table class="body-wrap">
 1907   <tr>
 1908   	<td class="container">
 1909   		<!-- Message start -->
 1910   		<table>
 1911   				<tr>
 1912   					<td align="center" class="masthead">
 1913   						<h1>${title}</h1>
 1914   					</td>
 1915   				</tr>
 1916   				<tr>
 1917   					<td class="content">
 1918   						<#nested>
 1919   					</td>
 1920   				</tr>
 1921   		</table>
 1922   	</td>
 1923   </tr>
 1924   <tr>
 1925   	<td class="container">
 1926   		<!-- Message start -->
 1927   		<table>
 1928   				<tr>
 1929   					<td class="content footer" align="center">
 1930   						<p><a href="${footer_link}">Lutece</a></p>
 1931   					</td>
 1932   				</tr>
 1933   		</table>
 1934   	</td>
 1935   </tr>
 1936   </table>
 1937   </body>
 1938   </html>		
 1939   </#macro>
 1940   <#macro adminLanguage languages lang action='jsp/admin/DoChangeLanguage.jsp' >
 1941   <@tform method='post' action=action class='form-inline'>
 1942   	<@input type='hidden' name='token' value='${token}' />
 1943   	<@row>
 1944   		<@columns class="mx-4">
 1945   			<@icon style='language' /> #i18n{portal.admin.admin_home.language}
 1946   		</@columns>
 1947   	</@row>
 1948   	<@row>
 1949   		<#list languages as language>
 1950   		<@columns>
 1951   			<#if lang=language.code>
 1952   				<#assign islocale='check-circle text-success pl-4'>
 1953   				<#assign title=' Selectionné '>
 1954   			<#else>
 1955   				<#assign islocale=''>
 1956   				<#assign title=''>
 1957   			</#if>
 1958   			<@button color='' class='${language.code}' type='submit' name='language' value='${language.code}' title='${language.name?capitalize}${title}' buttonIcon='${islocale}' hideTitle=['all'] />
 1959   		</@columns>
 1960   		</#list>
 1961   	</@row>
 1962   </@tform>
 1963   </#macro>
 1964   <#macro adminAccessibilityMode>
 1965   <@tform method='post' action='jsp/admin/DoModifyAccessibilityMode.jsp' class="ml-2">
 1966   	<@input type='hidden' name='token' value='${token}' />
 1967   	<#if user.accessibilityMode>
 1968   		<@button color='link text-dark' size='sm' type='submit' buttonIcon='eye' title='#i18n{portal.users.admin_header.labelDeactivateAccessibilityMode}'/>
 1969   	<#else>
 1970   		<@button color='link text-dark' size='sm' type='submit' buttonIcon='eye-slash' title='#i18n{portal.users.admin_header.labelActivateAccessibilityMode}'/>
 1971   	</#if>
 1972   </@tform>
 1973   </#macro>
 1974   <#macro empty title='' subtitle='' iconName='mood-empty' img='' actionTitle='' actionBtn='primary' actionIcon='plus' actionUrl='#'>
 1975   <div class="empty">
 1976   	<#if img=''>
 1977   		<div class="empty-icon">
 1978   			<@icon prefix='ti ti-' style='${iconName}'  params='style="font-size:48px"'  />
 1979   		</div>
 1980   	<#else>
 1981   		<div class="empty-img"><img src="${img}" height="128"  alt=""></div>
 1982   	</#if>
 1983   	<p class="empty-title"><#if title=''>#i18n{portal.util.message.emptyTitle}<#else>${title}</#if></p>
 1984   	<#if subtitle !=''>
 1985   	<p class="empty-subtitle text-muted">
 1986   		${subtitle}
 1987   	</p>
 1988   	<#else>
 1989   	<p class="empty-subtitle text-muted">
 1990   		#i18n{portal.util.message.emptySubTitle}
 1991   	</p>
 1992   	</#if>
 1993   	<#if actionTitle !=''>
 1994   	<div class="empty-action">
 1995   	  	<a href="${actionUrl}" class="btn btn-${actionBtn}">
 1996   		<#if actionIcon !=''><@icon prefix='ti ti-' style='${actionIcon}' /></#if> ${actionTitle}
 1997   	  	</a>
 1998   	</div>
 1999   	</#if>
 2000   </div>
 2001   </#macro>
 2002   <#macro timeline class='' id='' params=''>
 2003   <div class="timeline<#if class !=''> ${class}</#if>"<#if id !=''> id="${id}"</#if><#if params !=''> ${params}</#if>>
 2004   	<#nested>
 2005   </div>
 2006   </#macro>
 2007   <#macro timelineLabel bg='primary' label='' class='' id='' params=''>
 2008   <div class="time-label<#if class !=''> ${class}</#if>"<#if id !=''> id="${id}"</#if><#if params !=''> ${params}</#if>>
 2009   	<span class="bg-${bg}"><#if label!=''>${label}<#else><#nested></#if></span>
 2010   </div>
 2011   </#macro>
 2012   <#macro timelineItem iconFace='check' iconBg='bg-primary' time='' label='' footer='' class='' id='' params=''>
 2013   <div<#if class !=''> class="${class}"</#if><#if id !=''> id="${id}"</#if><#if params !=''> ${params}</#if>>
 2014   	<#assign timelineIcon>${iconFace} ${iconBg}</#assign>
 2015   	<@icon style=timelineIcon />
 2016   	<div class="timeline-item">
 2017   		<#if time !=''><span class="time"><i class="fa fa-clock-o"></i> ${time}</span></#if>
 2018   		<h3 class="timeline-header">${label}</h3>
 2019   		<div class="timeline-body"><#nested></div>
 2020   		<#if footer !=''><div class="timeline-footer">${footer}</div></#if>
 2021   	</div>
 2022   </div>
 2023   </#macro>
 2024   <#-- scroll to top button -->
 2025   <#macro scrollTopBtn>
 2026   <a href="#" id="scroll" style="display: none;"><span></span></a>
 2027   <script>
 2028   $( function(){ 
 2029       $(window).scroll(function(){ 
 2030           if ( $(this).scrollTop() > 100) { 
 2031               $('#scroll').fadeIn(); 
 2032           } else { 
 2033               $('#scroll').fadeOut(); 
 2034           } 
 2035       }); 
 2036       $('#scroll').click(function(){ 
 2037           $("html, body").animate({ scrollTop: 0 }, 600); 
 2038           return false; 
 2039       }); 
 2040   });
 2041   </script>
 2042   </#macro>
 2043   <#-- copyElementToClipboard a set of elements designed by a selector - param "selector" -->
 2044   <#-- Params																				-->
 2045   <#-- selector : Any CSS selector expression												-->
 2046   <#-- class : Default '' : List of class with double quote with comma separator 			-->
 2047   <#-- 		Possible values : "no-hover" No icon on hover - .no-hover portal_admin.css	-->
 2048   <#-- 		Possible values : "copy-icon" Icon always shown - . see portal_admin.css   	-->
 2049   <#-- 		Possible values : "copy-btn" Icon and Button styles -						-->
 2050   <#-- 		Ex for multiple classes : "class1","class2" 								-->
 2051   <#-- showMsg : Default false : If true a message is show after copy						-->
 2052   <#-- msgDone : Default "Copied" : Success message 										-->
 2053   <#-- msgError : Default "Error : not copied" : Error message							-->
 2054   <#-- Usage																				-->
 2055   <#-- Basic : <@copyElementToClipboard selector='.copy-content'  />						-->
 2056   <#-- No message : <@copyElementToClipboard selector='.copy-content' showMsg=false />	-->
 2057   <#-- No Hover : <@copyElementToClipboard selector='.copy-content' class='"no-hover"' /> -->
 2058   <#-- With icon shown : <@copyElementToClipboard selector='.copy-content' class='"copy-icon"' />	 -->
 2059   <#macro copyElementToClipboard selector class='' showMsg=true msgDone='#i18n{portal.util.copy.done}' msgError='#i18n{portal.util.copy.error}'>
 2060   <script>
 2061   const elems = document.querySelectorAll('${selector!}');
 2062   elems.forEach(elem => {
 2063   	<#if class !=''>
 2064   	elem.classList.add( ${class!} );
 2065   	</#if>
 2066   	elem.setAttribute('title', '#i18n{portal.util.labelCopy}');
 2067     	elem.addEventListener('click', () => {
 2068   		const selection = window.getSelection();
 2069   		const range = document.createRange();
 2070   		range.selectNodeContents(elem);
 2071   		selection.removeAllRanges();
 2072   		selection.addRange(range);
 2073   		try {
 2074   			document.execCommand('copy');
 2075   			selection.removeAllRanges();
 2076   		<#if showMsg>
 2077   			const original = elem.textContent;
 2078   			elem.textContent = '${msgDone}';
 2079   			elem.classList.add('msg-success');
 2080   			setTimeout(() => {
 2081   				elem.textContent = original;
 2082   				elem.classList.remove('msg-success');
 2083   			}, 1200);
 2084   		</#if>
 2085   		} catch(e) {
 2086   		<#if showMsg>
 2087   			const original = elem.textContent;
 2088   			elem.textContent = '${msgError}';
 2089   			elem.classList.add('msg-error');
 2090   			setTimeout(() => {
 2091   				elem.textContent = original;
 2092   				elem.classList.remove('msg-danger');
 2093   			}, 1200);
 2094   		</#if>
 2095       	}
 2096     	});
 2097   });
 2098   </script>
 2099   </#macro>
 2100   <#-- initToast  				-->
 2101   <#-- Params						-->
 2102   <#-- layout='popups' 			-->
 2103   <#-- position='top-right' 		-->
 2104   <#-- closer=false 				-->
 2105   <#-- sticky=false 				-->
 2106   <#-- progressbar=true 			-->
 2107   <#-- theme='default'			-->
 2108   <#-- duration=3000 				-->
 2109   <#-- pool=5						-->
 2110   <#macro initToast layout='popups' position='top-right' closer=true sticky=false progressbar=true insert='before' theme='default' duration=3000 pool=5 >
 2111   <script>
 2112   $( function(){
 2113   	var lutecepolipop = new Polipop('lutecepop', {
 2114   		layout: '${layout}',
 2115   		position: '${position}',
 2116   		theme: '${theme}',
 2117   		life: ${duration?c},
 2118   		insert: '${insert}',
 2119   		closer: ${closer?c},
 2120   		closeText : '#i18n{portal.util.labelClose}',
 2121   		sticky: ${sticky?c},
 2122   		progressbar: ${progressbar?c},
 2123   		pool: ${pool},
 2124   	});
 2125   	<#-- Add addToast macro in your template -->
 2126   	<#nested>
 2127   });
 2128   </script>
 2129   </#macro>
 2130   <#-- addToast  															-->
 2131   <#-- Params																-->
 2132   <#-- title : Default "Error : not copied" : Error message				-->
 2133   <#-- msg : Default "Copied" : Success message 						  	-->
 2134   <#-- type : Default "default" ['info', 'danger', 'success' 'warning'] 	-->
 2135   <#macro addToast title content type='default' >
 2136   lutecepolipop.add({
 2137       content: '${content}',
 2138       title: '${title}',
 2139       type: '${type}',
 2140   });
 2141   </#macro>
 2142   <#-- selectIconFont  																-->
 2143   <#-- Params																			-->
 2144   <#-- id : Default "selectIcon" : Id for select										-->
 2145   <#-- class : Default '' : List of class for select 									-->
 2146   <#-- name : Default "resource-icon" : Name for submit   		  	    			-->
 2147   <#-- showListLabel : Default true : Show icons' label  								-->
 2148   <#-- showListIcon : Default true : Show icons' icon  								-->
 2149   <#-- searchShow : Default true : Show search field in select						-->
 2150   <#-- searchFocus : Default false : It true set focus in search fiedl				-->
 2151   <#-- searchHighlight : Default true : Highlight searched chars in list				-->
 2152   <#-- type : Default 'yaml' : Possible values : ['yaml','json']						-->
 2153   <#-- prefix : Default 'fa' : ['fa','bi-', [ti ti-],...]	Prefix for icon family		-->
 2154   <#-- iconsUrl : Default 'css/admin/font-awesome-icons.yml' : File url to retrieve icon name list -->
 2155   <#-- resources : Default true : If true load slimselect js lib and css. 			-->
 2156   <#-- Only needed once, so set to false if you user this macro more than once		-->
 2157   <#-- FontAwesome icons yaml dowloaded from https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/metadata/icons.yml  -->
 2158   <#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=''>
 2159   <@select name='${name}' id='${id}' />
 2160   <#if resources>
 2161   <link rel="stylesheet" href="js/admin/lib/slimselect/slimselect.min.css">
 2162   <script src="js/admin/lib/slimselect/slimselect.min.js"></script>
 2163   <#if type='yaml'>
 2164   <!-- js yaml parser -->
 2165   <script src="js/admin/lib/slimselect/js-yaml.min.js"></script>
 2166   </#if>
 2167   </#if>
 2168   <script>
 2169   $.get('${iconsUrl}', function(data) {
 2170   <#if type='yaml'>
 2171   	let parsedIcons = jsyaml.load(data)
 2172   <#else>
 2173   	<#-- Json / Object -->
 2174   	let parsedIcons='';
 2175   	if( typeof data === 'object' ){
 2176   		parsedIcons = data;
 2177   	} else { 
 2178   		parsedIcons = JSON.parse( data )
 2179   	}
 2180   </#if>
 2181   $.each( parsedIcons, function(index, icon){
 2182   	let i=0, prefix='${prefix}';
 2183   	let selected = '${defaultValue}' == index ? 'selected' : '';
 2184   	<#if type='yaml'>
 2185   		<#-- FontAwesome specific / Other lib add another test/treatment -->
 2186   		while( i < icon.styles.length ){
 2187   			switch ( icon.styles[i] ) {
 2188   				case 'regular':
 2189   					prefix = 'far'
 2190   					break;
 2191   				case 'solid':
 2192   					prefix = 'fas'
 2193   					break;
 2194   				case 'light':
 2195   					prefix = 'fal'
 2196   					break;
 2197   				case 'brands':
 2198   					prefix = 'fab'
 2199   					break;
 2200   			}
 2201   			$('#${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>');
 2202   			i++;
 2203   		}
 2204   	<#else>
 2205   		<#-- Json / Object -->
 2206   		$('#${id}').append('<option value="' + index + '" ' + selected + ' > <#if showListIcon><span class="' + prefix + ' fa-'+ index + '"></span>&nbsp;</#if>' <#if showListLabel>+ index </#if>+ '</option>');
 2207   	</#if>
 2208   });
 2209   new SlimSelect({ 
 2210   	select: '#${id}',
 2211   	showSearch: ${searchShow?c},
 2212   	searchText: "#i18n{portal.util.labelNoItem}",
 2213   	searchPlaceholder: '#i18n{portal.util.labelSearch}',
 2214   	searchFocus: ${searchFocus?c}, // Whether or not to focus on the search input field
 2215   	searchHighlight: ${searchHighlight?c}
 2216   })
 2217   });
 2218   </script>
 2219   </#macro>
 2220   <#-- Display wrong or deprecated macro arguments -->
 2221   <#macro deprecatedWarning args=[] >
 2222    <#if args?size != 0 ><!-- Warning : wrong or deprecated argument(s) : <#list  args?keys as key >${key}, </#list> ... --></#if>
 2223   </#macro>
 2224   <#macro adminDashboardPanel title='' parentId='' childId='' icon='' color=''>
 2225   <#assign parentId = parentId />
 2226   <@accordionPanel color=color collapsed=true childId=childId>
 2227   <@accordionHeader id=id title=title headerIcon=icon></@accordionHeader>
 2228   <@accordionBody>
 2229   <#nested>
 2230   </@accordionBody>    
 2231   </@accordionPanel>
 2232   </#macro>
 2233   <#-- JStree Macro -->
 2234   <#macro jsTreeInit id='tree' btntreeSearch='treesearch' multiple=false plugins=[] style='proton/style.min.css'>
 2235   <link rel="stylesheet" href="js/admin/lib/jstree/themes/proton/style.min.css" >
 2236   <script src="js/admin/lib/jstree/jstree.min.js"></script>
 2237   <script>
 2238   $(function(){
 2239   	let selectedTree=jsTreeId=localStorage.getItem('jsTreeSelectedId' );
 2240   
 2241   	$('#tree').jstree({
 2242   		'core': {
 2243   			'multiple' : false,
 2244               'themes': {
 2245                   'name': 'proton',
 2246                   'responsive': true
 2247               }
 2248           },
 2249   	 	'plugins' : [  'search' , 'wholerow' ,'changed'  ]
 2250   	}).on('click', function( e ){
 2251   		window.location.replace( e.target.getAttributeNode('href').value );
 2252   	}).on("changed.jstree", function (e, data) {
 2253   		localStorage.setItem( 'jsTreeSelectedId', data.changed.selected );
 2254       });
 2255   
 2256   	$('#tree').jstree( 'select_node', jsTreeId );
 2257      
 2258   	var to = false;
 2259   	$('#treesearch').keyup(function () {
 2260   		if(to) { clearTimeout(to); }
 2261   		to = setTimeout(function () {
 2262   		var v = $('#treesearch').val();
 2263   		$('#tree').jstree(true).search(v);
 2264   		}, 250);
 2265   	});
 2266   
 2267   });
 2268   </script>
 2269   </#macro>
 2270   <#macro jsTreeSearch >
 2271   <@formGroup formStyle='inline' labelKey='#i18n{portal.site.admin_page.buttonSearchPage}' hideLabel=['all']>
 2272   	<@inputGroup size='sm'>
 2273   		<@input type='text' id='tree_search' name='tree_search' placeHolder='#i18n{portal.site.admin_page.buttonSearchPage}' />
 2274   		<@inputGroupItem>
 2275   			<@button id='btn-tree_search' color='link' type='button' title='#i18n{portal.site.admin_page.buttonSearchPage}' buttonIcon='search' hideTitle=['all'] />
 2276   		</@inputGroupItem>
 2277   	</@inputGroup>
 2278   </@formGroup>
 2279   </#macro>
 2280   <#-- Display wrong or deprecated macro arguments -->
 2281   <#macro deprecatedWarning args=[] >
 2282   <#if args?size != 0 ><!-- Warning : wrong or deprecated argument(s) : <#list  args?keys as key >${key}, </#list> ... --></#if>
 2283   </#macro>
 2284   <#macro codeHighLight >
 2285   <link rel="stylesheet" href="js/admin/lib/prism/prism.css">
 2286   <link rel="stylesheet" href="js/admin/lib/prism/prism-live.css">
 2287   <script src="js/admin/lib/prism/prism.js"></script>
 2288   <script src="js/admin/lib/prism/prism-live.js"></script>
 2289   </#macro>