<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title th:text="${title}"></title>
        <link href="/css/style.css" rel="stylesheet">
        <link href="/js/fw/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="/js/fw/bootstrap-icons-1.11.3/font/bootstrap-icons.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <script src="/js/fw/jquery/dist/jquery.js"></script>
        <script src="/js/fw/apexcharts/loader.js"></script>
        <script src="/js/fw/apexcharts/apex.js"></script>
        <script th:inline="javascript">
            let csrf = [[${_csrf}]];
            let auth = [[${auth}]];
            let user = [[${user}]];
            let cdn = [[${cdn}]];
            console.log(cdn);
            console.log(csrf);
            console.log('auth is: ', auth);
        </script>
    </head>

    <body>
        <div class="toast-container position-fixed bottom-0 end-0 p-3" id="info-toast" style="transform: translate(-20px, 0)"></div>
        <header th:insert="~{blocks/header}" style="margin-bottom: 64px"></header>

        <main th:if="${index} == 'home'" th:insert="~{pages/home}"></main>
        <main th:if="${index} == 'profile'" th:insert="~{pages/profile}"></main>

        <footer class="mt-auto" th:insert="~{blocks/footer}"></footer>
    </body>
    <script src="/js/fw/core/dist/umd/popper.min.js"></script>
    <script src="/js/fw/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/js/global/toast.controller.js"></script>
    <script src="/js/global/tooltip.controller.js"></script>
    <script src="/js/global/popover.controller.js"></script>
</html>