<!DOCTYPE html>
<html id="html" lang="en" {{ theme if theme }} {{ overflow | safe }}>
<head>
    {{ head | safe }}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ description_content }}">

    <title>{{title}}</title>

    <link href="/_static/{{ version }}/libs/daisyui.css" rel="stylesheet" type="text/css" />
    <link href="/_static/{{ version }}/libs/daisyui-themes.css" rel="stylesheet" type="text/css" />
    <script src="/_static/{{ version }}/libs/tailwind.js"></script>
    <link href="/_static/{{ version }}/app.css" rel="stylesheet" type="text/css" />
    {{ ext_css | safe }}
</head>

<body hx-ext="swap-header">
    <div id="content">
        {% for element in root_element %}{{ element | safe}}{% endfor %}
    </div>
    <div id="toast" class="toast toast-top toast-end z-50" hx-toast-delay="{{ toast_delay }}"></div>

    <script src="/_static/{{ version }}/libs/htmx1.9.9.min.js"></script>
    <script src="/_static/{{ version }}/libs/htmx-json-enc.js"></script>
    <script src="/_uiwiz/{{ version }}/default.js"></script>
    {{ ext_js | safe }}
    <!-- A bit hacky but aggrid requires the css to load after the grid... -->
    {{ ext_css | safe }} 
</body>

</html>