<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <div layout:fragment="expired" th:if="${#authenticatedP != null}">
        <dialog class="dialog" id="sessionExpiredModal">
            <div class="p-7 flex vertical">
                <h2 class="underlined font-500">Session expired</h2>

                <p>Your session has expired</p>

                <div class="flex space-between">
                    <button class="button p-less" data-style="outlined" data-cancel>Close</button>
                    <a th:href="@{/login}" class="button p-less" id="sessionExpiredLogin">Log in</a>
                </div>
            </div>
        </dialog>

        <th:block th:if="${#authenticatedP != null}">
            <!-- Import push.js -->
            <script src="/js/push.js"></script>
            <script th:inline="javascript">
                /*<![CDATA[*/

                let timeout = /*[[${#httpSession.getMaxInactiveInterval()}]]*/ "60";
                setTimeout(function () {
                    document.getElementById("sessionExpiredModal").showModal();
                    document.getElementById("sessionExpiredLogin").focus();
                }, parseInt(timeout) * 1000);

                /*]]>*/
            </script>
        </th:block>
    </div>
</html>
