<div th:fragment="footer">
    <footer id="footer" class="text-center py-3">
        <div class="footer-center">

           <a href="https://github.com/Stirling-Tools/Stirling-PDF"
				target="_blank" class="mx-1" title="Visit Github Repository"><img
				src="images/github.svg"></img></a> <a
				href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank"
				class="mx-1" title="See Docker Hub"><img src="images/docker.svg"></img></a>
			<a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1"
				title="Join Discord Channel"><img src="images/discord.svg"></img></a>
			<a href="https://github.com/sponsors/Frooodle" target="_blank"
				class="mx-1" title="Donate"><img
				src="images/suit-heart-fill.svg"></img></a>



            <div style="color: grey;" th:if="${@appName} != 'Stirling PDF'" class="footer-powered-by" th:text="#{poweredBy} + ' Stirling PDF'"></div>
        </div>


            <a href="licenses" id="licenses" target="_blank" class="mx-1" title="" th:text="#{licenses.nav}">Licenses</a>

    </footer>
</div>

	<style>

	#footer {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footer-center {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
    flex-grow: 1;
}

.footer-powered-by {
    margin-top: auto; /* Pushes the text to the bottom */
    color: grey;
    text-align: center; /* Centers the text inside the div */
    width: 100%; /* Full width to center the text properly */
}

.right-link-container {
    align-self: flex-end; /* Align to the end of the flex container */
    padding-right: 20px;
}

</style>

