<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{% block title %}{% endblock %}</title>

        <!-- Font preloads (should be done for each font file) -->
        <link href="{{ url_for('static', filename='Abel-Regular.woff2') }}" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">

        <!-- CSS -->
        <link href="{{ url_for('static', filename='reset.css') }}" rel="stylesheet" media="screen">
        <link href="{{ url_for('static', filename='tailwind.css') }}" rel="stylesheet" media="screen">
        <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet" media="screen">

        <!-- JS that must be executed before the document is loaded -->

    </head>
    <body class="font-abel antialiased">
        <div id="app" class="min-h-screen" style="background-image: url({{ url_for('static', filename=condition_image) }}); background-size: cover; background-position: center;">

            <div id="clock">0:00:00 AM</div>

            {% block content %}{% endblock %}
        </div>
        <script>
            let clock = document.getElementById('clock');
            setInterval(() => {
                clock.innerText = new Date().toLocaleTimeString();
            }, 1000)
        </script>
    </body>
</html>
