portal_footer.html

    <@cTpl>
    <footer class="mt-5">
    	<div class="container">
    		<div class="row">
    			<div class="col-12 col-md-6 col-lg-4">
    				<form class="form-inline mx-5 mx-md-0 mb-3 mb-md-0" action="jsp/site/Portal.jsp" method="get">
    					<input name="page" type="hidden" value="search" >
    					<div class="input-group">
    						<input id="query" class="form-control input-lg" name="query"  type="text" placeholder="Rechercher" />
    						<button type="submit" class="btn btn-light btn-lg" title="#i18n{portal.site.page_menu_tools.labelSearch}">
    							<i class="ti ti-search"></i> <span class="visually-hidden">#i18n{portal.site.page_menu_tools.labelSearch}</span>
    						</button>
    					</div>
    				</form>
    			</div>
    			<div class="col-12 col-md-3 col-lg-4 ps-5">
    				<h3 class="ms-5">#i18n{portal.site.portal_footer.labelTitle}</h3>
    				<ul class="list-unstyled ms-5">
    					<li><a href="#home" class="page-scroll text-capitalize">#i18n{portal.site.page_home.label}</a></li>
    					<li><a href="jsp/site/Portal.jsp?page=map" data-bs-info="#i18n{portal.site.site_map.pageTitle}" data-bs-toggle="modal" data-bs-target="#lutece-modal" >#i18n{portal.site.site_map.pageTitle}</a></li>
    					<li><a href="jsp/site/PopupCredits.jsp" data-bs-info="#i18n{portal.site.portal_footer.labelCredits}" data-bs-toggle="modal" data-bs-target="#lutece-modal" title="[#i18n{portal.site.portal_footer.newWindow}] #i18n{portal.site.portal_footer.labelCredits}" target="info_credit">#i18n{portal.site.portal_footer.labelCredits}</a></li>
    					<li><a href="jsp/site/PopupLegalInfo.jsp" data-bs-info="#i18n{portal.site.portal_footer.labelInfo}" data-bs-toggle="modal" data-bs-target="#lutece-modal" title="[#i18n{portal.site.portal_footer.newWindow}] #i18n{portal.site.portal_footer.labelInfo}" target="info_legal">#i18n{portal.site.portal_footer.labelInfo}</a></li>
    				</ul>	
    			</div>
    			<div class="col-12 col-md-3 col-lg-4 mt-3">
    				<p class="text-sm-center text-md-end">
    					<a class="text-decoration-none" href="http://lutece.paris.fr/" title="Lutece [Open in new window]" target="_blank">
    						<span class="me-2">Powered by</span>
    						<img src="images/logo-footer.png" alt="Powered by Lutece" class="logo-footer" >
    					</a>	
    				</p>
    			</div>
    		</div>
    		<!-- <div class="row mt-3">
    			<div class="col-sm-12 col-md-3 col-lg-3 mt-3">
    				<p class="text-sm-center text-md-start">
    					<a class="text-decoration-none" href="http://lutece.paris.fr/" title="Lutece [Open in new window]" target="_blank">
    						<span class="me-2">Powered by</span>
    						<img src="images/logo-footer.png" alt="Powered by Lutece" class="logo-footer" >
    					</a>	
    				</p>
    			</div>
    			<div class="col-sm-12 col-md-9 col-lg-9 mt-3">
    				<p class="mb-3 text-center">2025 - Coded by the <a href="https://github.com/orgs/lutece-platform/people" title="Lutece Github [Open in new window]">Lutece Dev Team</a> on <a href="https://github.com/lutece-platform/lutece-core" title="Lutece Github [Open in new window]"> Lutece core 7 </a></p>
    			</div>
    		</div>
    	</div> -->
    </footer>
    <div class="modal" tabindex="-1" id="lutece-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="lutece-mdoal-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title"  id="lutece-mdoal-label"></h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="#i18n{portal.util.labelClose}"></button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn me-auto" data-bs-dismiss="modal">#i18n{portal.util.labelClose}</button>
            </div>
          </div>
        </div>
    </div>
    <#noparse>
    <script>
    function loadModalContent( url, body, sel ) {
        const xhr = new XMLHttpRequest();
    	xhr.open('GET', url, true);
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
    			const response = xhr.responseText;
    			// Convert the response to a temporary div to manipulate as DOM
    			const qDiv = document.createElement('div');
        		qDiv.innerHTML = response;
    		    // Use querySelector or getElementsByClassName to select elements
        		body.innerHTML = qDiv.querySelector( sel ).innerHTML;
    		}
    	}
        xhr.send();
    };
    
    // Load content in modal on activation
    document.addEventListener("DOMContentLoaded", function() {
    	const luteceModal = document.getElementById('lutece-modal')
    
    	luteceModal.addEventListener('show.bs.modal', event => {
    		// Button that triggered the modal
    		const button = event.relatedTarget
    		// Extract info from data-bs-* attributes
    		const title = button.getAttribute('data-bs-info')
    		const modalTitle = luteceModal.querySelector('.modal-title')
    		// Update the modal's content.
    		const url = button.getAttribute('href')
    		const modalBody = luteceModal.querySelector('.modal-body')
    		const content = loadModalContent( url, modalBody, '.main-content' );
    		modalTitle.textContent = `${title}`
    		modalBody.innerHTML = content;
    	}) 
    });
    </script>
    </#noparse>
    </@cTpl>